WordPress site not displaying correctly on mobile

  • Hi,

    I have recently completed my new wordrpress site here:

    https://www.airlesspro.co.uk

    My margins and custom css are working on desktop view but when viewed on a mobile device, my wesbite is all over the place and not displayed correctly.

    Margins I had changed in the page builder are not respected when the site is viewed on a mobile.

    I am not that advanced with css but here is what I have so far in the custom css section:

    .homepage-feature {
text-align: center;
}

.fp-slider > .so-widget-sow-slider > .sow-slider-base > ul {
height: 100%;
}

.homepage-feature > h3 {
font-size: 2rem!important;
margin-bottom: .5rem!important;
padding-bottom: .5rem!important;
}

.homepage-icon {
padding: 0 6rem;
}

@media only screen and (max-width: 1000px) {
.homepage-icon {
padding:0 4rem;
}

}

@media only screen and (max-width: 780px) {
.homepage-icon {
padding:0 14rem;
}

}

@media only screen and (max-width: 550px) {
.homepage-icon {
padding:0 6rem;
}

}

    .social-media-icons {
    float: right;
    }
    .sm-icon {
    display: inline-block;
    width: 30%;
    float: right;
    padding: 0.5rem;
    }
    .site-content .col-full {
    max-width: inherit;
    max-height: 500px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    box-sizing: content-box;
    }
    .site-header .col-full {
    max-width: 1500px;
    max-height: 500px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    box-sizing: content-box;

    }
    .page-title { display: none !important; }
    footer .site-info {
    display: none !important;
    }
    footer .col-full:after {
    content: “? Airlesspro Ltd 2017 VAT No:115801541 Reg No: 07670900 FCA No: 755679”;
    font-size: 25px;
    color: #ffffff;
    line-height: 140%;
    text-align: left;
    display: block;
    margin-left: -110px;
    }
    .site-header .custom-logo-link img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {
    max-width: 700px
    }
    @media only screen and (max-width: 780px) {
    img {
    width: 100%;
    height: auto;
    }

    }

    I have a feeling the problem is with the fact I have changed margins/padding on some of the site elements directly, when maybe I should have wrote some css info that would have achieved the same thing and remained responsive?

    Any help would be great.

    Thanks,

    Jason.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)

  • hi,

    could u name a specific thing thats not showing up correctly?
    So whats broken in your mobile view?

    Thread Starter jason1086

    (@jason1086)

    Hi. Thank you so much for posting back. If you look on an Iphone etc the homepage is fragmented when compared with the desktop view. I have put in negative margins to bring the header logo and slider etc to have none of the white space showing. On a mobile this space is back there and the margins/padding are not in place.

    Also if you take a look on the shop page, you will see the footer bar is now over the shop description for some reason!

    The Finance page writing on the image is split over 4 lines and looks messy.

    The rest of the pages are totally messed up with none of the correct styling layouts applied since I added my content to my new CDN.

    Any help would be great. As you can tell, I am new to this.

    Thanks.

    hi,

    first of all, remove the “max-height” attribute here, it fixed alot in my view.
    Maybe after that you are able to see some more positions that could be easy fixed..

    .site-content .col-full {
    max-width: inherit;
    /* max-height: 500px; */
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    box-sizing: content-box;
}
    Thread Starter jason1086

    (@jason1086)

    That’s great it really helped and stops the text me ssing things up!

    I have no idea what I need to do to get the margins on the pages to be respected in mobile view Can you tell me how to do this?

    Thanks again for all your help.

    Thread Starter jason1086

    (@jason1086)

    That’s great it really helped and stops the text messing things up!

    I have no idea what I need to do to get the margins on the pages to be respected in mobile view Can you tell me how to do this?

    Thanks again for all your help.

    I see some margins in your product listing, they are working.

    Like this:

    @media screen and (max-width: 479px)
mob-store.css:144
ul.products li.product {
    margin: 1% 0 !important;
    width: 48%;
}

    Name some specific problems, that would be nice.
    It’s kinda hard to go through your whole page and look for margin problems ??

    Thread Starter jason1086

    (@jason1086)

    I am sorry yes I should have been much more specific.

    On the home page, there should be no gap (white space) showing between the grey bar and the airlesspro header blue logo and the grey bar and the slider. Also the slider and the ‘essential products’ banner there should be no space.

    This all works on the desktop and it’s nice and tight together but this isn’t the same on the mobile view.

    Thank you.

    hi,

    that was tricky ??
    The problem was the negativ margin on your slider.

    .fl-node-5972696143ad5 > .fl-row-content-wrap {
    /* margin-top: -70px; */
    margin-right: -10px;
    margin-bottom: 0px;
    margin-left: -10px;
}

    This “margin-top: -70px” is working on your desktop view, not on mobile.
    So if you remove this “margin-top:-70px;”.

    I’m not sure where this class “.fl-node-5972696143ad5” cames from, so if you cant find this, try (this not very good solution):

    .fl-row-content-wrap {
    margin-top: 0px!important;
}

    and

    .home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header {
    margin-bottom: 0;
}

    Set this “margin-bottom:0” and everything should look like you want.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘WordPress site not displaying correctly on mobile’ is closed to new replies.