Two columns section doesn't stay side by side on small screen

[Berube]

Hi, I created in a couple of place in my website a two columns section, mostly in my project pages, where there are two images side by side, or at the bottom where there are buttons to navigate between different pages/projects. But when the window is reduced, or on a mobile, they change line.

For the images it could be okay that they do so it’s easier to see, but then the padding is not alright at all. Do I have to duplicate the same section and hide when on small screen and for the duplicate change the padding and hide it when on large screen? Or is there any code I can add to simplify that?

For the button though, I would like them to stay on the same line. What can I do?

Thank you

[Prasant]

Hello @Berube,

Thanks for asking.

Using duplicate section and styling the same only for mobile device is definitely an option. But my recommendation would be to add a class name under Customize > Setup > Class. After that using CSS media queries you can adjust the width property of column to bring elements in one line. You can also play with the padding values of button to further style the element. I have recorded a screencast that you can take a look.

Here is the sample CSS that you can use:

@media only screen and (max-width: 600px) {
  .button-mobile {
    width: 50% !important;
    float: left !important;
}  
}

You can change the class name as per requirement.

To learn more about CSS media queries, please take a look at following resource:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Let us know how it goes.

Thanks.

[Berube]

Thank you so much! Works like a charm for the buttons!

For the images it works almost perfectly there’s only that if I set the perfect percentage for 480 px & smaller by example, when it goes under 480px the percentage is not good anymore. Should I add media queries for every gap of 100px so it’s perfectly aligned on every size of screen and mobile?

Thanks again for this, I even used this for the footer! But then I noticed that the smaller the screen, the more the footer ovelaps on the contact form and we can’t press the submit button. What could be causing that?

[Prasant]

Hello @Berube,

Thanks for updating the thread.

If you want to align custom elements for every screen sizes then you should use media queries as it gives you the ability to style particular element based on screen resolution.

Please add following CSS under Pro > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    footer.x-colophon {
    margin-top: 22%;
}
}

Thanks.

[Berube]

Thank you!

[ruenel]

You’re welcome.