- This topic has 13 replies, 2 voices, and was last updated 3 years, 11 months ago by
.
- Posts
We’re using the WP block editor and would like to know if there’s a way to extend the background color on this theme to the edges of the screen. Right now, we see white space on the right and left side of the color background. See this page as an example: https://newsite.segrustgroup.com/
Hi, rows that support Wide or Full Width can be set to wide or full. The Image block is an example of a block that supports wide and full. https://imgur.com/a/eUXFAbb.
Unfortunately the paragraph, heading, quote and pull quote blocks do not support that. Is there any CSS you can recommend that would allow paragraph or heading blocks to be full width?
You can try inserting a Block Group and then insert your paragraph into the group. The group can be set wide with a background color.
The group block doesn’t allow it to be set wider than the default page full width. Unlike the Meta Slider that extends to the edge of the screen.
That’s correct, only the background color will be full-width. Here is an example: https://imgur.com/a/jV7Qkgm.
The following can be added to Customize > Additional CSS if you’d like to remove the width constraint:
.full.page-layout-no-sidebar .alignfull .wp-block-group__inner-container { max-width: 98%; }Thanks for that. I believe the issue is that for a group block I do not have the full width option. See here: https://snipboard.io/eSMw67.jpg
I updated the theme and now I have the ability to set the group block to full width. I can see it extend to full width in the page editor, but when looking at the site live the background block does not extend to the edge of the screen. In page attributes I have the template set to default, which is full width, and in page layout I have it set to default. If I pick full width there, then the columns and text extend to the edges which I don’t want. I want the text to stay in its area and just have the background extend to the edges. See here:
https://snipboard.io/WGv3ph.jpg.Thanks, that fixed it. Now I just need to figure out how to have a two column block that has color for each column where each color to extends to the edges on their respective sides (one color to the left and the other color to the right). Thanks for your help!
One last thing I noticed is that on a mobile device the text in the group block sits right at the edge of the screen. I don’t want to add general margins or padding in CSS because the text will then be set in on a desktop. Is there CSS I can use for the group blocks that will add padding on a mobile, but not affect the desktop view?
Hi
Now I just need to figure out how to have a two column block that has color for each column where each color to extends to the edges on their respective sides (one color to the left and the other color to the right).
Sorry, I’m not aware of a method of achieving this within Ultra at the moment.
One last thing I noticed is that on a mobile device the text in the group block sits right at the edge of the screen. I don’t want to add general margins or padding in CSS because the text will then be set in on a desktop. Is there CSS I can use for the group blocks that will add padding on a mobile, but not affect the desktop view?
Thanks for the feedback, I’ll resolve this in the next update. You can add the following to Customize > Additional CSS and adjust as required:
@media (max-width: 768px) { .full.page-layout-no-sidebar .alignfull .wp-block-group__inner-container { padding-right: 25px; padding-left: 25px; } }
You must be logged in to reply to this topic.