Prevent 3 columns from being stacked

Support
#1

If you visit advancedbiology.com near the top you will see near the top below the “MORE” section, there is a section with 3 images in columns. I want them to stay in 3 columns without stacking on pad widths. I am using this code and adding the class keep3 to the row they are in, but it’s not working. I’ve tried it with and without .x-1-3

@media (min-width: 481px) and (max-width: 767px) {
.keep3 .x-column.x-sm .x-1-3 {
width: 33.33333%;
float: left;
margin-right: 0;
}
.keep3 .x-column.x-sm .x-1-3:last-child {
margin-right: 0;
}
}

#2

Hello @LanceBarton,

Thanks for writing in!

I see nothing wrong with your code. It is actually valid and correct. The only issue is that there is now sections or rows that contains keep3 custom class. Please edit the page and apply that class to the section where you have the three columns.

Hope this helps. Please let us know how it goes.

#3

It doesn’t work. I have that class listed in both the section and the row.

#4

Hello @LanceBarton,

There was a typographic error in your code.
Please use this:

@media (min-width: 481px) and (max-width: 767px) {
    .keep3 .x-column.x-sm.x-1-3 {
        width: 33.33333%;
        float: left;
        margin-right: 0;
    }

    .keep3 .x-column.x-sm.x-1-3:last-child {
       margin-right: 0;
    }
}
#5

Awesome! I noticed that when it gets to that screen width and keeps the 3 columns together, it deletes the space between them - is there a way to keep the space between the columns?

#6

Hello @LanceBarton,

The spaces were remove because you did not have any margins at all. If you want the same spacing like in the desktop screen sizes, please update the code and use this:

@media (min-width: 481px) and (max-width: 767px) {
    .keep3 .x-column.x-sm.x-1-3 {
        width: 30.66666%;
        float: left;
        margin-right: 4;
    }

    .keep3 .x-column.x-sm.x-1-3:last-child {
       margin-right: 0;
    }
}

We would loved to know if this has work for you. Thank you.

#7

It didn’t. using margin-right: 4; doesn’t do anything. If I replace the 4 with 4px, 10px, 1em, 4em it adds the gap but always forces the third column down below.

#8

Hey @LanceBarton,

Sorry for the code. It is supposed to be 4%.

@media (min-width: 481px) and (max-width: 767px) {
    .keep3 .x-column.x-sm.x-1-3 {
        width: 30.66666%;
        float: left;
        margin-right: 4%;
    }

    .keep3 .x-column.x-sm.x-1-3:last-child {
       margin-right: 0;
    }
}

Hope this helps.

#9

Perfect! Thank you so much!

#10

You’re welcome.

#11

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