Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 21, 2020 at 12:51 am #1254496
    aussiedropbear

    Hi support,

    I have noticed a footer page display issue when viewing on mobile.

    The footer page is made up of various elements of grid rows with a partner logo element on top and a color section below that has 1/3 columns with content in them (logo and text).

    In both areas there is a compaction of the image and content,,. being squashed into the mobile frame. I’m not sure if the partner logo section can be corrected but the other 1/3 section I am hoping can.

    Is there a way to correct this? This is not the only site i have noticed this issue on using Enfold so either my footer layout with the elements I have used is screwing with it or its something else?

    Thanks in advance.

    John

    October 22, 2020 at 5:49 am #1254834
    Rikard

    Hey John,

    Please try the following in Quick CSS under Enfold->General Styling to adjust the columns:

    @media only screen and (max-width: 767px) {
.footer_color .av_one_third {
    margin-left: 0;
    width: 100%;
}
}

    I’m not sure what you are looking to achieve with the partner/logo images though, do you want them stacking at 100% width on mobile?

    Best regards,
    Rikard

    October 22, 2020 at 11:08 pm #1255105
    aussiedropbear

    Hi Rikard,

    Many thanks for getting back to me.

    As I have a similar footer page setup on another site I was hoping to kill two birds with one stone withe the code. I applied the CSS there and it fixed the 3 columns but I still have an issue with the partner logo section, the heading above this and the special heading section directly below. (see images). It’s best viewed on the other site – BMC, as it shows the issue better.

    On the BMC home page in the footer page section when viewed on mobile, the partner logos with heading above and special heading below logos are OK and display correctly but when you navigate to ‘products’ or ‘services’ page, these sections are being shrunk down? On pages home, gallery and about they are not?

    It’s a weird inconsistency being applied to some pages and not others?

    thanks in advance
    John

    October 24, 2020 at 6:29 am #1255383
    Rikard

    Hi,

    Thanks for the update. Please try this CSS as well:

    @media only screen and (max-width: 767px) {
.av_three_fifth {
    margin-left: 0;
    width: 100%;
}
}

    Best regards,
    Rikard

    October 26, 2020 at 1:17 am #1255582
    aussiedropbear

    HI Rikard,

    Many thanks for the CSS. I have added the extra code and cleared the cache etc. however I am still having the issue in that some pages will resolve the correct size and others are being shrunk? It’s like on some pages, the footer page is being treated differently than on others? Just weird.

    Thanks
    John

    October 27, 2020 at 6:00 am #1255970
    Rikard

    Hi John,

    Thanks for the update. It looks like the CSS I posted above is not overriding, please try this instead:

    @media only screen and (max-width: 767px) {
.av_three_fifth {
    margin-left: 0 !important;
    width: 100% !important;
}
}

    Best regards,
    Rikard

    October 29, 2020 at 12:30 am #1256541
    aussiedropbear

    Thanks Rikard for the update.

    I have the following code now in the Quick CSS:

    /*—————————————-
    // CSS – footer page column layout in mobile view
    //————————————–*/
    @media only screen and (max-width: 767px) {
    .footer_color .av_one_third {
    margin-left: 0;
    width: 100%;
    }
    }

    @media only screen and (max-width: 767px) {
    .av_three_fifth {
    margin-left: 0 !important;
    width: 100% !important;
    }
    }

    I have tried this on both sites and I am getting inconsistent results when viewing in mobile.

    For the GForce home page, the footer page is displaying the text smaller and partner logos show smaller and 3 all in the same area, not stacked one after the other like other pages, but smaller. Go to say ‘Engineering’ page and it is correct?

    on the BMC home page, the footer page would appear to be correct but go to say ‘products’ and everything is smaller.

    I just wonder is there is something else at play such as how these other pages may be setup and the the footer page is inheriting?

    I can’t find anything that stands out that would indicate this?

    Many thanks
    John

    November 1, 2020 at 6:03 am #1257387
    Rikard

    Hi John,

    Thanks for the update. I’m not sure why different CSS rules are applying to different pages on your site, but please try this CSS as well:

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all .container {
    width: 85% !important;
    max-width: 85% !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
}
}

    Best regards,
    Rikard

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