- This topic has 9 replies, 2 voices, and was last updated 4 years, 8 months ago by Andrew Misplon.
Tagged: align-wide color rows full width blocks
- AuthorPosts
- March 29, 2020 at 8:13 pm #14171
BurukoParticipantHello,
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!
March 29, 2020 at 8:22 pm #14172
BurukoParticipantThis reply has been marked as private.March 30, 2020 at 5:00 pm #14180
Andrew MisplonKeymasterHi 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.
March 30, 2020 at 5:59 pm #14181
BurukoParticipantWould 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.
March 30, 2020 at 7:17 pm #14183
BurukoParticipantThis reply has been marked as private.March 30, 2020 at 8:08 pm #14184
Andrew MisplonKeymasterThanks 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; } }
March 30, 2020 at 8:38 pm #14185
BurukoParticipantThank 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!
March 30, 2020 at 9:09 pm #14186
Andrew MisplonKeymasterGlad 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.
March 30, 2020 at 9:24 pm #14187
BurukoParticipantThat 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.
April 1, 2020 at 10:20 am #14196
Andrew MisplonKeymasterThanks for posting your solution, appreciate it. I’ll let you know once this has been included in the theme. Cheers for now 🙂
- AuthorPosts
You must be logged in to reply to this topic.