Change the width of blocks on a page

lreadshaw · Member · May 7, 2020 at 10:01 am
Copy link

Add topic to favorites
My website is currently set to have a cover block as a solid colour, and column blocks within this for the content, but I was hoping to change the width of the colour blocks so they take up the whole width of the page (the same as the featured image), but no idea what custom CSS to input, or where.

Can I also change the width of each column within the cover, so this takes up the whole page width too?

The website I need help with is readshawpa.com

Thanks!

The blog I need help with is: (visible only to logged in users)
lreadshaw · Member · May 7, 2020 at 10:19 am
Copy link
Apologies, I think I’ve managed to change the width, but theres still some white space either side. If i increase the width to 110%, it disappears off the right edge but there is still space on the left hand side, can I move these to the left?
tarasdashkevych · Theme Author · May 7, 2020 at 3:21 pm
Copy link
Hello,

I am happy to help you to resolve this problem. Currently, the theme does not have a full integration for the Block editor (due to the theme initial design which was presented before the Block editor) but we are working to fix it.

—

“If i increase the width to 110%…”
– Please remove that custom CSS because it causes overflow issues on your site.

Once that custom CSS is removed from your site, please add this one instead:
```
.home.page-template-full-width-page .page-header + .container {
  width: 100%;
  padding: 0;
}
```
This custom CSS will change the width of the container located on your home page.

Please let me know if you have any additional questions.

Kind regards,
Taras
lreadshaw · Member · May 15, 2020 at 11:24 am
Copy link
Thanks for this Taras, this worked!

Out of interest, how do I apply this to all the other pages on my site?

I tried to look up the CSS selector for my contact page, which I thought was .page-template-full-width-page but this doesn’t seem to work?
tarasdashkevych · Theme Author · May 15, 2020 at 4:39 pm
Copy link
Laura,

If you want to apply this change to all the pages that have the Full Width template, please try this custom CSS:
```
.page-template-full-width-page .page-header + .container {
  width: 100%;
  padding: 0;
}
```
If this custom CSS does not work, please keep it on your site and send me a link to the page, so I can inspect the issue.

Thank you,
Taras

No items found.