- This topic has 13 replies, 2 voices, and was last updated 3 years, 9 months ago by Andrew Misplon.
- AuthorPosts
- December 15, 2020 at 4:11 pm #15158
ememkParticipantWe’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/
December 15, 2020 at 4:26 pm #15160
Andrew MisplonKeymasterHi, 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.
December 15, 2020 at 4:37 pm #15161
ememkParticipantUnfortunately 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?
December 15, 2020 at 4:41 pm #15162
Andrew MisplonKeymasterYou can try inserting a Block Group and then insert your paragraph into the group. The group can be set wide with a background color.
December 15, 2020 at 5:36 pm #15163
ememkParticipantThe 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.
December 15, 2020 at 8:07 pm #15170
Andrew MisplonKeymasterThat’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%; }
December 15, 2020 at 10:05 pm #15171
ememkParticipantThanks 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
December 16, 2020 at 1:33 am #15172
ememkParticipantI 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.December 16, 2020 at 9:59 am #15173
Andrew MisplonKeymasterIn Page Settings change the Page Layout to No Sidebar.
December 16, 2020 at 8:37 pm #15175
ememkParticipantThanks, 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!
December 16, 2020 at 8:59 pm #15176
ememkParticipantOne 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?
December 17, 2020 at 8:57 am #15186
Andrew MisplonKeymasterHi
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; } }
December 19, 2020 at 6:52 pm #15218
ememkParticipantThanks! That CSS resolved the issue above.
December 19, 2020 at 6:58 pm #15220
Andrew MisplonKeymasterSuper, glad that helped.
- AuthorPosts
You must be logged in to reply to this topic.