Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • August 2, 2023 at 11:29 am #1415229
    sofiadadci

    Hello,

    My website looks very awful on mobile. The homepage for example (link in private content) has big white spaces, font is big, logo slider and other images are not displaying, the bar of the menu is overlapping the logo which also too big. Nearly all of the pages of my website are not responsive for mobile. (I tried on different mobile size and brand : samsung, Iphone etc still the same)

    Same for my landing page : there is a big blank space, some elements are too close, some are to far away, titles are too big…There is a Google Ads campaign running at the moment. People will not click on a page like this.

    Enfold is supposed to be mobile responsive. Maybe I am missing something ?

    Thank you for your help.

    Regards,

    • This topic was modified 1 year, 1 month ago by sofiadadci.
    • This topic was modified 1 year, 1 month ago by sofiadadci.
    August 3, 2023 at 4:50 am #1415302
    Ismael

    Hey sofiadadci,

    Thank you for the inquiry.

    The site is using an older version (5.2.2) of the theme, which might be the reason why the site is not displaying correctly on mobile view. Please upgrade the theme to version 5.6.5, toggle or temporarily disable the Enfold > Performance > File Compression settings, then purge the cache afterward.

    Best regards,
    Ismael3f

    August 11, 2023 at 7:52 pm #1416088
    sofiadadci

    Hi Ismael,

    I upgraded the theme. There are no more large blank space or image not displaying, but there are still some issues.

    The first one is the logo and menu bar as you can see : https://imgpile.com/i/C8uXAi the logo is too big and the nav bar is on the logo

    Also the text is too big https://imgpile.com/i/C8uHju

    There is missing space here : https://imgpile.com/i/C8u0Ba

    Here : https://imgpile.com/i/C8uFJh
    https://imgpile.com/i/C8uQAE

    The spaces are originally present on the computer version and are very important because it separate the different key point of the product.

    The titles are too big for a mobile version : https://imgpile.com/i/C8u6Vg

    Thank you.

    Regards,

    August 13, 2023 at 1:23 pm #1416175
    Mike

    Hi,
    For the header logo and icons try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all #header .container.av-logo-container {
    width: 100%;
    max-width: 100%;
}
#header #menu-item-shop .cart_dropdown_link {
    left: 50%;
    padding: 0 3px;
    z-index: 5;
}
.responsive #top #header #header_main > .container .main_menu .av-main-nav > li > a {
    padding: 0 0 0 10px;
}
.responsive #top #header_main .logo {
    width: 60%;
    padding-left: 5%;
}
}

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    Please see the screenshot in the Private Content area for the expected results.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.