Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1318645

    Hi,
    it seems like my site alforno-esslingen.de is not mobile optimized.
    Footer widgets are next to each other and not below each other.
    Do I have to consider some other theme settings?
    Thanks
    Mehmet

    #1318844

    Hey ms-45,
    Thank you for your patience and the link to your site, I found that for some reason on this page the main content div #wrap_all is closing early so the #footer is not inside of it, so this css target won’t work:
    .responsive #top #wrap_all .flex_column
    which is what tells the columns to be 100% width at mobile.
    I note that your pages /impressum/ & /datenschutz/ or your shopping pages do not have this problem, so it’s only your homepage.
    I believe this could be a plugin conflict but you have many plugins, you could disable your plugins one at a time clearing your browser cache between each one until you find the conflict, or you could try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

    @media only screen and (max-width: 767px) {
    .responsive #top .container .av-content-small, .responsive #top #footer .flex_column, .responsive #top #footer .av-flex-cells .no_margin {
        margin: 0;
        margin-bottom: 20px;
        width: 100%;
    }
    }

    in my test this solves and should not cause any issues in the future, after applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1318921

    Hi Mike,

    Thank you so much for your great help. Your CSS code helped perfectly.
    Above my footer I have two sections which do not have full widt either. For the rest it seems to be alright how it is.
    If you could tell me how I get the two sections above my footer to full width with CSS I would be super happy :-)

    Thanks
    Mehmet

    #1318954

    Hi,
    Glad that this helped, please try this css instead:

    @media only screen and (max-width: 767px) {
    .responsive #top .container .av-content-small, .responsive #top #footer .flex_column, .responsive #top #footer .av-flex-cells .no_margin, .responsive #top #liefergebiete .flex_column, .responsive #top #liefergebiete .av-flex-cells .no_margin, .responsive #top #kontakt .flex_column, .responsive #top #kontakt .av-flex-cells .no_margin, .responsive #top #speisekarte .flex_column, .responsive #top #speisekarte .av-flex-cells .no_margin {
        margin: 0;
        margin-bottom: 20px;
        width: 100%;
    }
    }
    

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1318962

    This is perfect thank you so much for your great and fast support Mike!

    #1318970

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Footer widgets next to each other in mobile view’ is closed to new replies.