Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1329009

    Hi guys,
    recently, maybe due to the theme update, something went wrong to me mobile footer.
    What is even more strange it seems that it has happen only to German and Spanish (not engl, ita, french)
    see here the wrong positioning:
    PHOTO-2021-11-11-15-57-45

    The 3d column went down instead of staying before the 4th column.
    website: phoenixdivers-kohlanta.com

    Cheers

    #1329013

    Hey Daniele,

    Thank you for the inquiry.

    The issue occurs only on the German and Spanish languages because in those languages, the first widget contains four menu items instead of three, which pushes the third widget to the second column, and in turn causes the fourth widget to drop to the third row. By default, footer widgets should stack up above each other on mobile view but you have modified it with this css code to create a two-column layout.

    .responsive #top #wrap_all #footer .flex_column.av_one_fourth:not(.second) {
        width: 50% !important;
    }
    

    To fix it, remove the css code, then use this instead.

    #footer .container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }
    

    Make sure to place the css inside the css media query for mobile view.

    Best regards,
    Ismael

    #1329018

    Hi Ismael thanks for the fast reply but I have the same widgets and menu items for all languages.
    As you can check in the desktop version.
    Or I didnt understand what you refers to :-)

    Moreover, If I substitute my quick css with yours, I will get 4 rows instead of 2, as I would like to have.
    Cheers

    #1329020

    Solved!
    The menu second item title was too long in Spanish and German and caused the issue!
    All fixed now!

    Thanks

    #1329044

    Hi,

    Great, I’m glad that you found a solution, and thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    #1329819

    Hi
    I noticed that the problem still persists on the mobile version (in all languages) of these pages:
    blog/news
    why us
    green award

    Very strange.

    #1329895

    Hi,

    Thank you for the update.

    Adding the css code above should help to completely adjust the layout of the columns on mobile view regardless of the content length or the number of menu items.

    #footer .container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    

    You also need to define the width of the columns inside the footer container.

    #footer .container .flex_column.av_one_fourth {
        width: 50% !important;
    }
    

    Make sure to place the code inside one of the css media queries for mobile view.

    Best regards,
    Ismael

    #1330373

    Hi Ismael
    it seems to work, thanks!

    I’m curious tho:

    1) why only those pages were “wrong”?

    2) why this in the quick css wasn’t enough?

     .responsive #top #wrap_all #footer .flex_column.av_one_fourth:not(.second) {
        width: 50% !important;
      }

    Cheers

    #1330481

    Hi,

    Yeah, it is quite odd. We inspected the footer widgets again but we cannot see any styling issues. The 4th column weirdly breaks into the third row. Please keep the css modification to adjust the column layout on mobile view.

    Thank you for your patience.

    Best regards,
    Ismael

    #1330645

    Yes sure, I will!
    all the best and thanks again

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.