Full width post and page giving horizontal scroller

Hello,

I have tried several of your solutions (and a few of my own ideas) on adding to the custom css to get a the content truly full width.
My last attempt from post:
https://colorlibsupport.com/t/centering-content-in-full-width-view/

  • some additions:
/* Set content area to 100% */
.main-content-inner.col-sm-12.col-md-8.pull-left {
  float: none !important;
  margin: auto;
  width: 100%;
  max-width: 800px;
}

.main-content-area {
  width: 100%;
}
.home .main-content-area, 
.home .entry-content {
  margin-top: 0;
	margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

.home .post-inner-content {
  padding-top: 20px;
}

With this custom CSS, I’m almost there, full width and no margins after header and before the footer. The only problem is that I get a horizontal scroller because of the padding-right: 15px in one of the bootstrap classes (removing/overriding/disabling padding-right does not solve the issue):
(image 3)

Also, as shown in image 2, the footer is 15px less the header in width.

(the problem also appears when removing all my other custom CSS and using only the code above)

Hi there

Please provide a link to your website and i will check it

The site is not public yet (just internal), but I guess both I and you could set it up pretty easy. Standard wordpress installation, unmodified Sparkling theme except that custom css.
I will set it up externally for you to try to spot the problem, but just with the absolute minimal to reconstruct the problem.

Here’s the public test site

http://test.hogkammen.se/sparkling/

/PeO

Hi Peoy

Ok, add this code now and you will have full-width page:

.post-inner-content {
padding: 45px 0px;
}

Nothing changed by setting left/right padding to 0px (as above)

HI Peoy

Please clear cache and check again, I can see changes on my side: Screenshot by Lightshot

You do not show the whole window in your snapshot, there is still a horizontal scroller, which allowa 15px side scrolling to see that white are at the right side… Content is full width + 15px.

Updating the CSS in the Customizer gives immediate effects, but I have slso tried visiting the page with a computer/browser thas has never been there before.

Can I take a look at the dashboard? this is not happening to the default WordPress theme, can you please remove all your customization?
or, just use this plugin to create temporary access for us, its automatic login link and does not requires sharing your admin details. here is How To guide. at the and don’t forget about  “Set as private reply” at the bottom of the message box

 

There is no customization (needed) to reconstruct the problem, other than what I have put into Custom CSS (as posted).

I have the suggested plugin installed and activated, URL for your login:
http://test.hogkammen.se/sparkling/wp-admin/?wtlwp_token=cb17c2206878d27a41dd98802663f10a

You can also register as a new user on the site, and I will grant you administrator privileges. As it’s just a test site (for the one I’m building offline) you are free to do whatever changes needed and then let me know (if only needed in Custom CSS or elsewhere)

At the same time, take a look at my other case (the one with the logo not getting centered, and the folded menu jumping down below the logo when resizing the window for mobile devices).

/PeO

Hi Peo

Width problem is triggered by this CSS code you have in customization:

.main-content-area {
width: 100%;
}

Let’s not mess this ticket, I know you have logo ticket separatelly and you will get my answer :slight_smile:

“Width problem is triggered by this CSS code you have in customization:”

Which I mentioned in the initial request. If I remove that CSS part, the width will be 70% and fit, but then it’s no longer “full width”.

HI

Ok, try this code instead:

.post-inner-content {
border: 0px solid #dadada00;
}
.main-content-area {
width: 100%;
padding: 15px !important;
}
body {
background-color: #ffffff;
}

Ok, scroller gone, but now the content is not using the full width (because of the padding in the main-content-area class)

HI

Sorry, but there is nothing else I can offer, this is maximum for page width if we increase it scroller will appear again, no further customization is possible for this item, and to be honest, this is even not acceptable to leave the content without minimum padding. Only major customization of the template can solve this problem

Well, almost there, I’m not even sure if I want the content to be able to use the 100% width without the 15px left/right paddings, but it would be great if it was possible if required.

.main-content-area {
width: 100%;
padding: 0 15px !important;
}

Setting top/bottom padding to 0 removed that line I got when having 15px padding on all sides, but where dose that line come from ?

Hi

Ok, try this code:

.home .post-inner-content {
padding-top: 0px;
}
body.archive .post-inner-content, body.blog .post-inner-content, .post-inner-content:first-child {
border-top: 1px solid #ffffff;
}

That removed the line. I changed the border-top to border: none so it would work correct with another background color. I think this is as close we can get to a solution for now, so thanks for your help with this case.

If you’re happy with our service, don’t forget to rate us: [Illdy] Reviews | WordPress.org