This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Right margin for rows on tablet and lower

Open 9 replies bug-reportpluginplugin-page-builder
bigwebmedia
9 years ago · Last reply by Andrew Misplon 9 years ago

I’m experiencing an issue where a 15px margin on the right and left is being generated for the rows when the site is viewed on Tablet screens and smaller. I suppose this is normal however this causes a white space to be present on the right of the body which allows for a small horizontal scroll to the right on mobile which isn’t ideal.

I have the row theme set to full width stretch on the page builder

The following container class seems to be doing it
.siteorigin-panels-stretch .sydney-stretch .panel-row-style

I’m using the Sydney theme
Would anyone be able to assist?

Here’s a screenshot of the issue

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

9
  1. Andrew Misplon Staff 9 years, 6 months ago

    Hi Bigwebmedia

    Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.

  2. bigwebmedia Private 9 years, 6 months ago

    This is a private message.

  3. Andrew Misplon Staff 9 years, 6 months ago

    Thanks, which browser are you seeing the issues in? Chrome and Safari (OS X) seem ok.

  4. bigwebmedia 9 years, 6 months ago

    Sorry the home page is fine.

    The issue occurs on the majority of the of the internal pages such as this one http://www.bigwebmedia.co.za/website-design/

  5. bigwebmedia 9 years, 6 months ago

    I see the issue in Chrome and fireox. As well as chrome on Android mobile

  6. Andrew Misplon Staff 9 years, 6 months ago

    For the horizontal scroll bar issue you can try adding the following a Custom CSS plugin like SiteOrigin CSS:

    html {
    overflow-x: hidden;
}
  7. Andrew Misplon Staff 9 years, 6 months ago

    For the side issue, please, try adding the following to your Custom CSS plugin:

    @media (max-width: 780px){
    .sydney-stretch {
        margin: 0 !important;
    }
}

    Let us know how that goes. Thanks.

  8. bigwebmedia 9 years, 6 months ago

    The first css suggestion of yours seems to do the trick really. All I initially needed to do was remove that overflow, don’t know why I didn’t think of that. Thank you very much

    I just placed the 1st suggestion within the media query like below

    @media (max-width: 780px){
 html {overflow-x: hidden;}
}

    The second css suggestion results in a padding loss i.e the text gets too close to the containers. I’m guessing containers are stretched beyond the screen width

  9. Andrew Misplon Staff 9 years, 6 months ago

    Glad to hear you’ve made progress. In OS X I can’t actually see the second issue, Alex had a look at that for me in Windows…I think. If the fix solves the right space issue you could add padding back where required. Perhaps, something like this:

    @media (max-width: 768px) {
	.serviceboxpad {
		padding-left: 40px;
		padding-right: 40px;
	}
}

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread