Web Hosting
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

WordPress fix WordPress site not displaying correctly on mobile

Discussion in 'Misc WordPress Requests' started by jason1086, Nov 27, 2017.

  1. jason1086

    Guest

    WordPress site not displaying correctly on mobile, by jason1086

    Hi,

    I have recently completed my new wordrpress site here:

    http://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.

    WordPress site not displaying correctly on mobile
     
    #1

Share This Page

Web Hosting