Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • November 15, 2021 at 4:24 am #1329009
    Daniele

    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

    November 15, 2021 at 4:52 am #1329013
    Ismael

    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

    November 15, 2021 at 5:24 am #1329018
    Daniele

    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

    November 15, 2021 at 5:32 am #1329020
    Daniele

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

    Thanks

    November 15, 2021 at 9:20 am #1329044
    Rikard

    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

    November 21, 2021 at 3:01 am #1329819
    Daniele

    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.

    November 22, 2021 at 7:19 am #1329895
    Ismael

    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

    November 25, 2021 at 2:35 am #1330373
    Daniele

    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

    November 25, 2021 at 2:43 pm #1330481
    Ismael

    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

    November 27, 2021 at 12:14 am #1330645
    Daniele

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

    December 1, 2021 at 1:53 pm #1331156
    Ismael

    Hi,

    No problem. We will close this thread now. Please feel free to open another if you need anything else.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Mobile Footer Behaviour’ is closed to new replies.