Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 13, 2015 at 7:13 pm #411229
    nurdwurks

    Hi Guys,

    Having a bit of an issue with a site – was all working fine but now appears to have developed a few issues. I am unsure but this may have occurred at the last update.

    I am still trying to establish the issues with the site and what the problems are but at a glance they appear to be the following:

    White space between desktop / tablet / mobile are inconsistent – what looks fine on desktop looks wrong on mobile and vice versa?

    Additional site space being added above columns on the same row so when reduced down in browser or viewed on mobile there is a lot of unnecessary white space.

    Extra white space being added in the desktop – which can’t be removed.

    Been playing around on a test page for the moment but can’t work out whats happening or why – hopefully you guys might be able to shed some light?

    p.s Its not the latest version of Enfold as I wanted to establish the issues first before updating.

    Thanks

    March 15, 2015 at 1:20 am #411616
    Josue

    Hey!

    It’s because of the white space elements you are using throughout the page, those spaces should not be the same in mobile, try adding this to Quick CSS:

    @media only screen and (max-width: 767px) {
    .hr.hr-invisible {
        margin: 0 !important;
    }
}

    Cheers!
    Josue

    March 16, 2015 at 12:45 pm #412057
    nurdwurks
    This reply has been marked as private.
    March 16, 2015 at 1:08 pm #412065
    nurdwurks
    This reply has been marked as private.
    March 16, 2015 at 1:59 pm #412107
    nurdwurks
    This reply has been marked as private.
    March 17, 2015 at 5:49 am #412774
    Ismael

    Hey!

    The problem is the custom margin of the separator isn’t dynamic, 30px top margin on desktop is the same 30px top margin on mobile devices, so you have to use css media queries to remove or adjust them on different screen sizes. If you don’t want to add custom modifications via media queries, you can remove the custom margin.

    Regards,
    Ismael

    March 17, 2015 at 5:10 pm #413111
    nurdwurks
    This reply has been marked as private.
    March 19, 2015 at 4:46 am #414145
    Andy

    Hey!

    As Ismael already said you would need to adjust it via media querries for mobile. To do so try the following:
    For “How we work” try this:

    @media only screen and (max-width: 767px) {
body .container_wrap .avia-builder-el-no-sibling {
margin-bottom: -24px;
}}

    For “Terms and conditions”:

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

    and adjust as needed.

    Hope this helps.

    Cheers!
    Andy

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