- This topic has 9 replies, 2 voices, and was last updated 5 years ago by
.
- Posts
Hi Buruko
Thanks for posting.
I’ll do my best to include further Block Editor support in the next theme update.
Ideally, the Full-Width page templates should have been named No Sidebar. If you’d like to make that template truly full-width, try the following:
.page-template-full-width-no-title .site-content > .container { max-width: none; padding-right: 0; padding-left: 0; }There are a few ways to tackle the wide and full issue. Perhaps try the following:
@media (min-width: 750px) { .alignfull { max-width: 1000%; margin-right: ~"calc(50% - 50vw)"; margin-left: ~"calc(50% - 50vw)"; width: auto; } .alignwide { max-width: 1000%; margin-right: ~"calc(25% - 25vw)"; margin-left: ~"calc(25% - 25vw)"; width: auto; } }Let me know how that goes. Thanks.
Would I need to add:
@media (min-width: 750px) { .alignfull { max-width: 1000%; margin-right: ~"calc(50% - 50vw)"; margin-left: ~"calc(50% - 50vw)"; width: auto; } .alignwide { max-width: 1000%; margin-right: ~"calc(25% - 25vw)"; margin-left: ~"calc(25% - 25vw)"; width: auto; } }To the style.css in the Child Theme folder?
I believe there is a No Sidebar template page option I will try using that as well but I really want the content to stay in the center not extend to the edges. I merely want the background color to extend pass the center and to the edges.
Thanks for your feedback. The CSS can go at Appearance > Custom CSS, Customize > Additional CSS or in your child theme stylesheet, it’s up to you. You can try replacing all with the following:
@media (min-width: 750px) { .alignfull { max-width: 1000%; margin-right: ~"calc(50% - 50vw)"; margin-left: ~"calc(50% - 50vw)"; width: auto; } .alignwide { max-width: 1000%; margin-right: ~"calc(25% - 25vw)"; margin-left: ~"calc(25% - 25vw)"; width: auto; } .wp-block-group__inner-container { max-width: 85.7143rem; } }Thank you for the update. I’ve added this through the Additional CSS option presently but may combine it to a child theme style.css file later.
I ended up using:
@media (min-width: 750px) { .alignfull { max-width: 1000%; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); width: auto; } .alignwide { max-width: 1000%; margin-right: calc(25% - 25vw); margin-left: calc(25% - 25vw); width: auto; } .wp-block-group__inner-container { max-width: 85.7143rem; margin: auto; } }This caused the Group block to ‘center’ automatically while the previous code left it on the left side of the screen although it did maintain the container size. Also I note I had to remove the
~and"..."from around the parenthesis otherwise it would not work properly.It seems to maintain the responsive nature of the page however no matter what template I use Full Width or No Side Bar the page has about 5px on the left and right side once collapsed to a mobile view. Thoughts?
Very much appreciate the speedy reply and assistance with this! THANK YOU!
Glad to hear you’re making progress. You can try adding to the Custom CSS:
@media (max-width: 749px) { .alignfull, .alignwide { margin: 0 -1.78571em; padding: 0 1.78571em; } }After the next theme update, you should be able to remove these rules.
That works like a champ! Thank you!
Just for resolution seekers…
Add Following for Align Wide support for theme:
@media (min-width: 750px) { .alignfull { max-width: 1000%; margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); width: auto; } .alignwide { max-width: 1000%; margin-right: calc(25% - 25vw); margin-left: calc(25% - 25vw); width: auto; } .wp-block-group__inner-container { max-width: 85.7143rem; margin: auto; } }Then add following for Padding issue in Mobile Resolutions:
@media (max-width: 749px) { .alignfull, .alignwide { margin: 0 -1.78571em; padding: 0 1.78571em; } }These are to be corrected in future theme Updates.
You must be logged in to reply to this topic.