Stack columns in footer

Support
#1

hey there,
I got two columns in my footer, one with text, the other one with an image http://prntscr.com/mv0vz5 .
however, both are displayed side by side, even on narrow mobile screens. I’d like them to behave like normal columns made in the content editor, they should be stacked when the screen is smaller. Thanks for your Help!

#2

Hi @zerotoone.de,

You need to add another bar which have columns that are stacked. Then make it visible on mobile only.

Flex layout set to column

Make it visible in mobile only

For your existing bar, set it to be visible on desktop only.

Thanks

#3

thats a weird approach, why isn’t this natively supported? I don’t want to change two sections in order to display correctly on mobile and desktop. that’s not what responsive design is all about

#4

Hello @zerotoone.de,

Thanks for updating in! I will go back to your original post.

hey there,
I got two columns in my footer, one with text, the other one with an image http://prntscr.com/mv0vz5 .
however, both are displayed side by side, even on narrow mobile screens. I’d like them to behave like normal columns made in the content editor, they should be stacked when the screen is smaller. Thanks for your Help!

Please be advised that the columns is using float layout and then the footer builder is using flex layout. The float layouts can simply be overridden in smaller screens by setting float: none;. With flex layout, it is different because of it’s structure and the way the elements were laid out.

By the way, your feedback has been noted. We will forward this to our developers to make them aware of this. Meanwhile, please edit your footer back in the editor and then in your bar settings, find the “Customize” tab and insert this inline element css:

@media(max-width: 979px){
  $el {    
     display: block;
  }
}

This code should collapse the flex layout in smaller screen widths.

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

#5

OKay thank you, I’am not sure what you want me to do now: Should I just add the css?

#6

Hello @zerotoone.de,

Yes, please add the CSS code shared by my colleague under Bar > Customize > Setup > Element CSS.

Thanks.

#7

thank you,
now I got following behavior on smaller screens http://prntscr.com/mv7tu7
thanks for your help!

#8

You’re most welcome!

#9

have you looked at the screenshot? Its an actual problem, as the right column is cut off before it even gets stacked

#10

Hi @zerotoone.de,

I tried checking the screenshot that you posted but you mentioned that the issue on a smaller because the map image column should fall below the content text info for screen size 979px and below.

If you are referring to another issue, kindly provide us more detailed information about it so that we can check it.

Thank you.

#11

Its a problem that came up because I added the css you gave me

#12

Hi @zerotoone.de,

Thanks for clarifying. Actually, the initial issue could be because of the flex settings of the containers.

Firstly, please remove the previous code you have added then check the Flex setting of the Bar and follow these settings:

Then check the settings of the two containers and set the flex settings to:

Once you’ve done those steps, the behavior of your container should be like this:



Now, to have the two containers stacked in certain screen width, please add this code to the Element CSS of the Bar.

@media (max-width: 480px) {
  $el {
    flex-direction: column !important;
  }
}

After being able to add the CSS code, the bar contents should display in a column instead of row that is the two containers will be stacked above each other.

In case you want the containers to collapse into stack sooner, feel free to change 480px from the code to another value.

Here is the expected result after following all the steps mentioned:




Hope this helps.

#13

thank you,
still this issue appears http://prntscr.com/mvgsly

#14

Hello @zerotoone.de,

When I check your site in smaller screens, I see this:

The columns did not collapse in the preview but in the live page it does.
Please test it on an actual smaller screen.

#15

the problem occurs on smaller screens similar to tablets in landscape mode

#16

Hi @zerotoone.de,

Please find this custom CSS:

@media (max-width: 480px) {
  $el {
    flex-direction: column !important;
  }
}

And change to this:

@media (max-width: 979px) {
  $el {
    flex-direction: column !important;
  }
}

Hope it helps :slight_smile:

#17

thank you, but it got even worse now

#18

Hi @zerotoone.de,

Sorry about the previous confusion, I thought you got the preferred behavior now. Would you mind removing all the suggested CSS from this thread?

I was also checking your site from another thread and I see CSS, which maybe you’re not familiar as you may not have added them. So this will be tricky., but for now, please remove the CSS provided on this thread and put back the settings you changed. The problem is image and flex styling, maybe somehow we could apply the fix directly to the image. Though, I don’t want to touch it yet so I could see the initial behavior :slight_smile:

Thanks and let me know.

#19

no sure remove all you need

#20

Hi @zerotoone.de,

Sorry, but can’t do that as I need to check it’s previous state where the initial issue is present. I just want to make sure I was checking the original copy. I couldn’t continue as I can’t track of what’s already changed. Please back up your site and remove the changes you have added related to this current thread :slight_smile:

Then I’ll test it directly, the issue was the image touching or clipping to the edge or bezel of a device like a tablet.

Thanks!