Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Problems with display of website on mobile devices

    • 9 years, 5 months ago Madej_Design
      Participant

      Expired

      I have created the following website:

      http://www.whl-verband.de

      Everything is fine. There are just a few problems when watching the website on mobile devices, such as Ipad and Iphone5. The content doesn’t fully scale as supposed to do, e.g. the white content box scales smaller than the header and footer (Ipad) and the text and the logo partly run over the white header and footer box (Iphone5).

      How can this be optimized? Many thanks for your support in advance!

    • 9 years, 5 months ago Mirela
      Participant

      Hello,

      Please add this code into your custom css box:

      @media (max-width:480px){
      #content {  width: 268px !important;}
      #logo { left: -37px !important;}
      .mobile_small_menu { left: 6px !important;}
      }
      @media (max-width: 767px){
      #copyright .desc {
          width: 97% !important;
          margin-left: 3px;
      }}
      @media (max-width: 979px) and (min-width: 768px){
      .mobile_small_menu { top: 50%;}
      #content { width: 646px !important;}
      .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container, .header_7.header_wrapper .container { width: 647px !important;}
      .wpb_text_column.wpb_content_element { margin-left: 12px;}
      }
      

      Result: iPhone5, iPad.

      Best regards!

    • 9 years, 5 months ago Madej_Design
      Participant

      Expired

      Dear Mihaila!

      Thank you very much for the quick answer! It works in some parts, e.g. footer, but there are still the following “bugs”:

      Ipad – horizontal view:

      When scrolling down, the middle content part scales down and then is smaller than header and footer.

      Ipad – vertical view:

      Only the pictures in the middle content part end at the borders of the box (no white”frame” visible any more). Also the text is quite near to the border. This is not so important like the problem described in “Ipad – horizontal view”.

      Iphone5 – vertical view:

      The logo in the header doesn’t adjust to the header and still goes over the right border of the header.

      Many thanks in advance!!!

    • 9 years, 5 months ago Madej_Design
      Participant

      Expired

      And one further comment:

      Iphone6 – vertical view:

      This is visible when opening the website: The middle content part is scaled down and therefore is smaller than header and footer on the right border.

      Many thanks!

    • 9 years, 5 months ago Madej_Design
      Participant

      Expired

      I am still searching for the solution to my above mentioned problems.

      Could the problem be that I set up Specular the following?

      Specular Settings under “Layout”:

      Page Container Width AND Boxed Container Width with the same values: 1100 px – 84%?

      I already tried various variations, but nothing works…

      I’d be pleased to be supported by you.

      Thanks!

    • 9 years, 5 months ago Madej_Design
      Participant

      Expired

      Hello again!

      I have just deleted your customized CSS-Code from yesterday and changed the following:

      Page Container Width: 1100 px – 84 %

      Boxed Container Width: 1100 px – 100%

      On computers it looks perfect.

      On mobile devices, the container now doesn’t show a frame on the left and right side any more. The container box goes straight from the left to the right side. This is ok for me. I will leave it like that.

      Or ist there anything else that I can do to change this effect?

      Many thanks! Great theme anyway!

    • 9 years, 4 months ago Mirela
      Participant

      Hello,

      Sorry for the late reply.
      You can change the boxed container width to 90%. This will be the result. Is it what you want? Let us know.

      Best regards!

    • 9 years, 4 months ago Madej_Design
      Participant

      Expired

      Dear Mihaila!

      Yes, your result is exactly the look that I want!
      So, I have just tested to put the boxed container on 90% but the problems from mentioned above still occur:

      Ipad – horizontal view:
      When scrolling down, the middle content part scales down and then is smaller than header and footer.

      Iphone5 – vertical view:
      The logo in the header doesn’t adjust to the header and still goes over the right border of the header.

      Iphone6 – vertical view:
      This is visible when opening the website: The middle content part is scaled down and therefore is smaller than header and footer on the right border.

      If you can help, that would be great. Otherwise I will leave it like that because the boxed container at 100% doesn’t cause any problems on the mobile devices.

      Many thanks from Madeleine

      • This reply was modified 9 years, 4 months ago by Mirela. Reason: html
    • 9 years, 4 months ago Madej_Design
      Participant

      Expired

      Can you read my message without problems?!

    • 9 years, 4 months ago Mirela
      Participant

      Hello,

      Please send us your site’s credentials in a private reply. I will fix it for you.

      Best regards!

Viewing 9 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password