Full Width Container Causes Horizontal Scrollbars

Looking on this page, I want the .pp_pic_holder container to be full-width. When I set pp_pic_holder to width: 100%, the browser scrollbars appear and blow out the screen to the right.

Is there a way to do this without causing the scrollbars?

That’s because it’s absolutely positioned x-pixels from the left, so it’s never going to fit on the screen at 100% width without being 0 from the edge.
You will need to disable the script that is “magic numbering” it into the centre.
Also, you may find width: auto more useful than 100% to avoud these kind of issues.

Well here’s the problem: the client wants the container to be full-width 100%.
There’s a plugin that’s controlling the automated width: not sure what to do there.
The client wants the close button on the top right corner of the container.

That doesn’t seem to make sense?

If you make the container full width then the image will be too large especially on a wide screen monitor.

If you meant that you just want the X to the right of the viewport then again that makes no sense because on my wide monitors it would be miles away from the image in the centre?

It’s not exactly clear how you want this to behave and of course with plugins like this you are limited in what is possible.

This is what the client wants:

As you can see, they want the container to be full width (or nearly) while the close button can be pushed to the top right corner.

Now if I am able to override the plugin, THAT would be a better method to go. Then I can modify the code placement and not have to struggle with using CSS to accommodate different image dimensions.

I still don’t think you want it full width as that would make the image full width and massive!

You can easily mopve the close arrow to the top right of the viewport if that is all you want to do.
e.g.

div.pp_default .pp_close {
position:fixed!important;right:25px;top:25px;
}
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.