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

Overflow on mobile when layout set to Boxed

    • 8 years, 10 months ago abacusit
      Participant

      Expired

      Our website does not look okay, on mobile, when our layout is set to Boxed, with a fixed background image. The footer is off to the left, on top of the background image and the logo is off to the right, over the background image.

      Also, when clicking on the hamburger menu from a mobile device, there is a hesitation in loading, where the content of the page shows above the hamburger menu and then it quickly disappears. I noticed this for the Business Minimal demo as well.

      How can we get a nice responsive look on mobile, with our current setup? We are trying to go off of the Business Minimal theme.

       

      Our website is dev.one2oneus.com.

       

       

    • 8 years, 10 months ago Mirela
      Participant

      Hello,

      Please send us your wp credentials in a private reply. So we can fix these issues.
      You can add the data in your profile settings in this support forum.
      Please read this article for more detailed guidance.

      Let us know.

      Best regards!

    • 8 years, 10 months ago abacusit
      Participant

      Expired

      Hello,

      I have added the credentials to my profile. Please let me know if you need anything else.

      Thank you

    • 8 years, 10 months ago Mirela
      Participant

      Hello,

      I edited the Boxed Container Width with percentage value to 100% in General Options > Layout.
      I added this code into your custom css box:

      @media (max-width: 767px) {
      footer#footer .inner .row-fluid.ff .span12:first-child:last-child {
          margin-left: 0 !important;
      }
      .boxed_layout {
          padding-left: 7% !important;
      }
      }

      Please go to file css/bootstrap-responsive.css and find this line:

      footer#footer .inner .row-fluid.ff .span12:first-child:last-child {
          margin-left: -210px !important;
      }

      Remove the !important from it and save file.
      After the above edit, the site should look like this: screenshot.
      Let us know.

      Best regards!

    • 8 years, 10 months ago abacusit
      Participant

      Expired

      That’s a step in the right direction but we’re not completely there yet.

      I made the following change to the css file:

      footer#footer .inner .row-fluid.ff .span12:first-child:last-child{  margin-left:-210px;  }

      When I pull up the site on Chrome or Safari on my iPhone, the site is kind of zoomed in and the background image is wider than the screen.

      See the linked screenshots below. The first is the initial load of the site, and the second is when I zoom out with 2 fingers.

      https://postimg.org/image/yfyijntv3/

      https://postimg.org/image/9nywcfcof/

       

      • This reply was modified 8 years, 10 months ago by abacusit.
    • 8 years, 10 months ago abacusit
      Participant

      Expired

      Hello, is there any progress with this? We need our site to be mobile friendly.

    • 8 years, 10 months ago Kris
      Participant

      Hello,

      Sorry for the delay. We are working on resolving this issue.
      You will be updated as soon as we fix it.

      Best regards!

    • 8 years, 10 months ago Ruco
      Keymaster

      Hello,

      We fixed it. Removed the padding you have added at the empty columns beside the slider at the bottom.

      Best regards!

    • 8 years, 10 months ago abacusit
      Participant

      Expired

      Thank you!

      How can we fix the overflow of the icon at the top though?

      I have found how to change the padding of content on each page, via Visual Composer so that things aren’t pressed up against the edge, in mobile, but I cannot figure out how to fix our logo when viewing on mobile. The header logo overflows over the background image.

      This is happening on iPhone5. iPhone6 seems to look okay, when viewing with portrait orientation.

      • This reply was modified 8 years, 10 months ago by abacusit.
    • 8 years, 10 months ago Kris
      Participant

      Hello,

      Please check your site, we fixed. Just added this code to your custom CSS box:

      @media (max-width: 320px){
      #logo img {
          
          margin-left: -185px;
      }
      .mobile_small_menu {
          margin-left: 20px;
      }
      }

      Let us know.

      Best regards!

    • 8 years, 10 months ago abacusit
      Participant

      Expired

      It looks like that fixed it!

      Thank you for your support!

Viewing 10 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