- This topic has 8 replies, 2 voices, and was last updated 4 years, 4 months ago by David.
-
AuthorPosts
-
November 18, 2019 at 7:07 am #1066538Samuel
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,
SamuelNovember 18, 2019 at 8:08 am #1066586DavidStaffCustomer SupportHi 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.
November 18, 2019 at 8:24 am #1066610SamuelThank David,
Your solution is working on my online “test” website, but not on my local server where I’m working… this is really weird…
November 18, 2019 at 8:35 am #1066617SamuelRe,
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.
November 18, 2019 at 8:38 am #1066624SamuelSo,
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
November 18, 2019 at 8:40 am #1066629DavidStaffCustomer SupportIf the sites are identical then it should work or not work on both.
Whats ‘not working’ on the local site?November 18, 2019 at 8:48 am #1066641DavidStaffCustomer SupportThat CSS you have looks like it come from a site import – check for it in Customizer > Additional CSS
November 18, 2019 at 9:01 am #1066656SamuelOh 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 !
November 18, 2019 at 9:22 am #1066673DavidStaffCustomer SupportYou’re welcome
-
AuthorPosts
- You must be logged in to reply to this topic.