Columns not stacking in responsive

Support
#1

I have a background image in a section with 2 columns. The first column is empty (so the bg image is visible) and the second has text. In responsive the 2 columns don’t stack properly. Could you please guide me what I’m doing wrong?
Thanks so much!

#2

Hey there,

Upon checking, the columns stack properly. There’s a problem with your setup though. Your inline CSS is what’s causing the issue. I recommend you apply that to your column and not the section.

And, in your first column, use a gap element and hide it on mobile using the Hide Based on Screen Width option instead of leaving it empty. If the Gap element hides on mobile, the column will collapse therefore hiding the background image as well.

Thanks.

#3

That definitely made it better but how do I get the headline to break below the image on the responsive Medium screen?
Thanks!

#4

Hi There,

Removed the image already.

First option is to use HIDE BASED ON SCREEN WIDTH PROPERTY on ROW. Hide this row with 2 columns on medium screen. Then create another ROW that is hidden on large screen. Inside this ROW add two columns on top of each other and then add the same content.

Other option is we can try using custom CSS to stacked to columns on certain screen size using media query.

Try this:

@media (max-width: 979px) and (min-width: 768px){
.column-stacked-early{
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    display: block !important;
}
}

Add column-stacked-early on each column style field. On specified screen size, it will stacked on top of each other. If you are not much familiar with CSS, please try the first option instead.

Hope this helps.

#5

Thank you! You’ve been an incredible help. I really appreciate it!

#6

You are most welcome.:slight_smile: