Buruko Mar 29, 2020 · 8:13 pm #14171 Hello,
I’m using the default page with menus for my site but would like to break up the blocks with full width rows of color. The easiest way to achieve this appears to be grouping blocks together and then using full-width alignment on the group and assigning a background color.
Although full-width alignment was not an option on my Groups I enabled it within the Child Theme I created by adding:
add_theme_support('align-wide');
To the functions.php file. However while I can view the page and align-wide settings in the editor when changes are saved and viewed on the front end the background does not extend properly.
Is there some additional changes needed to enable full-width alignment of the blocks? Is this not supported by the current version of the Ultra theme?
If not is there an alternative method that maintains the responsive nature of the site to accomplish what I’m trying to do? I have found a few solutions via CSS tricks but they destroy any responsive element they are used on.
Appreciate your assistance in this matter!
Buruko Mar 29, 2020 · 8:22 pm #14172 This reply has been marked as private.
Andrew Misplon Puro Mar 30, 2020 · 5:00 pm #14180 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.
Buruko Mar 30, 2020 · 5:59 pm #14181 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.
Buruko Mar 30, 2020 · 7:17 pm #14183 This reply has been marked as private.
Andrew Misplon Puro Mar 30, 2020 · 8:08 pm #14184 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;
}
}
Buruko Mar 30, 2020 · 8:38 pm #14185 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!
Andrew Misplon Puro Mar 30, 2020 · 9:09 pm #14186 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.
Buruko Mar 30, 2020 · 9:24 pm #14187 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.
Andrew Misplon Puro Apr 1, 2020 · 10:20 am #14196 Thanks for posting your solution, appreciate it. I’ll let you know once this has been included in the theme. Cheers for now 🙂