Adjust column widths without affecting mobile

Support
#1

Hello, I’m trying to build a page with a 2-column layout and my client wants me to tweak the column sizes (the 1/4 column is too narrow for her but the 1/3 is too wide). I was able to do this well enough for the desktop/tablet views by adjusting these values:

.x-column.x-1-4 {
width: 22%;
}

.x-column.x-3-4 {
width: 74%;
}

.x-column {
margin-right: 4%;
}

But then the columns don’t become full width when they stack in the mobile view. I tried doing this just for @media(max-width:979px) and @media(max-width:767px, but the mobile view was still affected. What would I need to add so that I can adjust the column widths only when they’re side by side, without affecting the mobile stacking? The dev page is accessible here: https://scwfit.com/store/virtual-mania-active-aging/

Thanks in advance.

#2

Hello SCW,

Thanks for writing in!

If the code you shared should affect only the desktop screens then add following CSS under X > Theme Options > CSS

@media only screen and (min-width: 1024px) {
 .x-column.x-1-4 {
width: 22%;
}

.x-column.x-3-4 {
width: 74%;
}

.x-column {
margin-right: 4%;
}
}

Additionally, to keep the code clean and avoid any confusion, I suggest you to add a custom class name for columns by inspecting the column and under Customize > Setup > Class Name.

Thanks.

#3

Thanks, that worked!

#4

You are most welcome. :slight_smile:

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.