Archived topic
Make a div full width
8 replies · Started by Samuel on November 18, 2019
Hello,
I use a hook to insert after content stuffs like Related posts, Newsletter and Share Icons.
Here is the code I use :
<div class="after-content">
<div class="related-post">
[rp4wp]
</div>
<div class="outro">
<div class="col-1">
<h3>Newsletter</h3>
<iframe class="mj-w-res-iframe" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://app.mailjet.com/widget/iframe/4baN/jfs" width="100%"></iframe>
<script type="text/javascript" src="https://app.mailjet.com/statics/js/iframeResizer.min.js"></script>
</div>
<div class="col-2">
<h3>Partagez c'est la vie !</h3>
[gp-social]</div>
</div>
</div>My content width is 765px. But I would love to display a full width background color to my "after-content" div ? Like a real full width, all screen width.
To be more specific I want my content to stay with his 765px width, but background color to be full screen.
Thanks,
Samuel
Hi there,
the after_content is within the content container so the only way is with some 'hackish' CSS.
So this would be the markup:
<div class="fullwidth-container">
<div class="grid-container">
<!--- HTML in here -->
</div>
</div>And this CSS for the fullwidth:
.fullwidth-container {
margin-left: calc(-100vw / 2 + 765px / 2);
margin-right: calc(-100vw / 2 + 765px / 2);
padding: 40px;
box-sizing: boder-box;
background-color: #ccc;
}The grid-container class is the GP class that sets the container width and centers it.
Thank David,
Your solution is working on my online "test" website, but not on my local server where I'm working... this is really weird...
Re,
It seems that on local this max-width CSS is causing trouble :
.no-sidebar:not(.generate-columns-activated) .inside-article > *, .no-sidebar #comments {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}But in my online test website I don't have this issue. The 2 websites are mirror.
So,
if I add
max-width: 100vw !important;
To your CSS proposal it works on local...
But I don't understand why this "no-sidebar" CSS is displaying on local and not online...
Anyway, it works.
Thanks
If the sites are identical then it should work or not work on both.
Whats 'not working' on the local site?
That CSS you have looks like it come from a site import - check for it in Customizer > Additional CSS
Oh thanks David, that was it ! I really never use the Customizer/Additional CSS as I use a child theme to customise everything... thanks a lot !
You're welcome
