Website not displaying correctly on mobile view.

• 

  airlesspro · Member · Nov 24, 2017 at 2:39 pm

  • Copy link
  • Add topic to favorites

  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.

• 

  tarunvijwani · Member · Nov 26, 2017 at 5:45 am

  • Copy link

  Hi there,

  The site you’re referring http://www.airlesspro.co.uk is not hosted on WordPress.com.

  `Name Servers:
  ns.123-reg.co.uk 212.67.202.2
  ns2.123-reg.co.uk 62.138.132.21`

  Please share the site URL, if this is regarding to any other site which hosted on wordpress.com?

  This is a public forum which provides support only for the sites hosted on WordPress.com.

  There’s another support forum for WordPress.org self-hosted site, you can navigate to WordPress.org forum using this link:
  https://wordpress.org/support/

  For jetpack support https://jetpack.com/support/

  To learn about the difference between the WordPress.com and WordPress.org please refer this article:
  https://en.support.wordpress.com/com-vs-org/
  For documentation for WordPress.org refer this article:
  https://codex.wordpress.org/Main_Page

  Let me know if you have any questions.

  Thanks!

• 

  airlesspro · Member · Nov 27, 2017 at 9:33 am

  • Copy link

  Hi,

  Sorry yes it is hosted with 123 reg but this is a WordPress problem so I cannot ask them about it.

  Please can you help?

  Thanks,

• 

  fstat · Staff · Nov 27, 2017 at 10:23 am

  • Copy link

  Hi there,

  As @tarunvijwani already said, this is the support forum for sites hosted on WordPress.com. Since your site is built using the self-hosted version of WordPress, you can ask for help at the WordPress.org forums:

  https://wordpress.org/support/