I was working on my website last night just fine. This morning when I resumed editing, dragging/resizing columns no longer works. In addition, content has moved on its own – hence why I wanted to fix it by dragging and resizing. This seems to be an issue even when adding new blocks. The line simply goes red and will not move. I have not amended any plugins and have already tried to close everything out and re-open it.

In general, is there documentation for accessing PODs elements via CSS?

I am building a website using the Kadence theme.

in the header, I am wanting to color one column dark brown, like in the following website:https://gracethemesdemo.com/psyclone/ So the text box has a background color.

I am using the following code:

.site-header-top-section-right.site-header-section.site-header-section-right {    background-color: green;}

Unfortunately this code colors the column, but there is padding to the right of it?

If I changes the top row width to full width, Is there a way of controlling the width of each of the 2 columns so that it matches the website in the link?

Would be most greatful for some help with this tricky header!

Many thanks

I am building a website using the Kadence theme.

in the header, I am wanting to color one column dark brown, like in the following website:https://gracethemesdemo.com/psyclone/ So the text box has a background color.

I am using the following code:

.site-header-top-section-right.site-header-section.site-header-section-right {
    background-color: green;
}

Unfortunately this code colors the column, but there is padding to the right of it?

If I changes the top row width to full width, Is there a way of controlling the width of each of the 2 columns so that it matches the website in the link?

Would be most greatful for some help with this tricky header!

Many thanks

Another issue I’m having is that the colours I’m adding aren’t appearing on the preview page as well.

I’ve been setting everything on all setting I could find and saving multiple times before previewing but nothing I’ve done is working.

However, I am finding a problem with columns in the masonry grid. It appears I can only have two columns, but I would like more, as in the theme preview image, where four of them are shown. When I try to add more columns, the grid won’t adjust.

This is also causing my web not to be responsive. I have moved the header to the side to imitate a side bar, and now on mobile the two columns show as one and the header occupies half of the screen space. Is there or could there be an option to make this header responsive so on pc it appears on the side but on the phone it adjusts to the top? Most themes also allow you to create different web structures for each device, that would be appreciated.

Thank you for your work.

Also the Cross-Sell block and the Up-Sell block are underneath and showing just one product in a pretty narrow column (instead of full width) Cross-Sells Columns-Count is =1 ( Customize/WooCommerce/Cart).
Looking at the page in general I wonder about the width of the Cart. It could be wider (full width, no sidebars). Where can all this be adjusted?

I can’t align multiple columns of different widths, and I’d like to achieve this without using any additional plugins.

I have created a test site using only the default Twenty Twenty-Four theme, with no modifications to block spacing or other settings. You can see the issue on this test site: https://cheerleader-hamerkop-a59644.instawp.xyz/

The difficulty is aligning columns with different widths, both in a two-column layout next to a three-column layout, and vice versa. As you can see in the test site, none of the columns seem to align properly. I’ve tried various approaches like converting columns to rows or stacks, but haven’t been successful.

I’m hoping I’m missing something fundamental? Any advice would be greatly appreciated!