Fix footer elements being squeezed

Support
#1

Hey there,
I need your help to fix this http://prntscr.com/n5t997
I’d like those two footer containers to be stacked on smaller screens.
Why isn’t this implemented natively, I never had to deal with this in the content editor :frowning:

Thanks for your help!

#2

Hi @zerotoone.de,

Please edit your bar under Flex Layout option, check on the Wrap Children option:

Hope it helps :slight_smile:

#3

Thank you!

#4

Glad we were able to help :slight_smile:

#5

at some screen sizes this happens http://prntscr.com/n6b4rh
is there a way to make it impossible for content to overlap?.

#6

Hi @zerotoone.de,

Please try adding this custom CSS:

@media (max-width: 768px){
    #kontakt .x-bar-content {
        flex-flow: wrap !important;
    }
}

Let us know how it goes!

#7

thank you, but still the same behavior
please visit the page and resize the browser window. You will see it too

#8

Hi There @zerotoone.de

Could you please try updating the above provided code with the following code and see if that helps.

@media (max-width: 800px){
    #kontakt .x-bar-content {
        flex-flow: wrap !important;
    }
}

Please make sure to clear all caches when testing your issue (https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/).

Hope that helps.

#9

Thank you,
but why isn’t the text on mobile http://prntscr.com/n7cj2w
displayed side by side ( dark text on the left, orange text on the right) like on desktop http://prntscr.com/n7cisa.
The spacing would be there

#10

Hello @zerotoone.de,

You have placed the texts in columns. And as soon as the screen size get smaller, the columns will collapse by default. This is why in smaller screens the text is no longer being displayed side by side.

If you want to maintain the columns even in smaller screens, you will need to add this code as well:

@media (max-width: 800px){
    #kontakt .x-bar-content {
        flex-flow: wrap !important;
    }

    #kontakt .x-bar-content .x-text .x-column.x-sm {
      float: left;
      width: 48%;
      margin-right: 0;
    }
}

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

1 Like
#11

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