Preventing side scroll on mobile

1 Views

I’m attempting to help a friend with her site jessheading.com

She’s using a WordPress theme and the WP Touch mobile plugin. But when someone clicks to view the full-site version on mobile, the orange box with the quote part way down the page runs off to the side when you zoom out (creating a sort of side-scroll).

Read More

The CSS on that box is: 

.pull-quote {
  background: #fb8063;
  width: 300%;
  margin: 30px 0 30px -100%;
  z-index: 70;
  position: relative;
 }

How can I fix the CSS or the viewport settings to prevent zooming out so far so that that orange box overflows to the right?

Post Views: 1

Related posts

2 comments 

  2. .pull-quote {
    background: #fb8063;
    width: 300%;
    margin: 30px 0 30px -100%;
    z-index: 70;
    position: relative;
    overflow: hidden;
}

    this merely clips overflow, and the rest of the content will be invisible

    some other things to consider is to resize the whole orange box as well as the tags with it.

    other overflow css you can try are: scroll, auto, etc.

    quite possibly even set the width of the orange box to be fixed and display it within a div tag that has a background of orange.

    hope this helps

Comments are closed.