Stack columns in footer

Support
#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!

#21

thank you, removed all related css

#22

Hi @zerotoone.de,

To fix this, please set your Bar’s Content Length to 100%

Then add this in Header > CSS

@media(max-width:1200px) {
#kontakt .x-bar-content {
        flex-direction: column;
}
}

Hope that helps

#23

thank you, works

#24

You are most welcome. :slight_smile:

#25

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