Single Row – Center Columns in Full Width

  • Resolved pm1932

    (@pm1932)


    4 years, 3 months ago

    Is there a way to:

    1) use a single row
    2) have 2 columns centered to my a width specified in my css
    3) have a full width background color

    
|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx| 
|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx|
|xxxxxxx|     |x|      |xxxxxxx|         
|xxxxxxx|_____|x|______|xxxxxxx|
|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx|
|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx|

    If you try to do this with a single row block the columns spread out to 100%.

    I can achieve this layout if I use two rows. 1 row block that is a single column with the background and then a nested 2 column row block. this is just a little too confusing for the client and it would be nice if this was possible with a single row block.

    to me it seems to make more sense to add the background colors and images to wp-block-coblocks-row so you didn’t need to nest rows, but hey who am I.

    I could be missing something, any help would be appreciated.

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Milos Vlaisavljevic

    (@gdmilos)

    Hey @pm1932,

    Thanks for reaching out!

    Is this what you’d like to achieve?

    If so, and if the layout on your end is different than the one from the above video, it might be that your active theme prevents the layout to be displayed as expected, the theme might overwrite the default CoBlocks CSS.

    You can try to switch to one of the default WordPress themes in order to determine if the issue is theme-related.

    Feel free to provide me with the URL of the page that shows the issue. Or, at least provide me with the name of the active theme and I will check the issue for you further.

    Kind Regards,
    Milos

    Thread Starter pm1932

    (@pm1932)

    Hi Milos,
    Thanks for your reply and video. Ultimately yes, the layout you have at the end is what I’d like to achieve but I’d like to do it without nesting blocks. Some of our clients are not very technical so we need to make things as easy as possible. Which is why we love coblocks and why we also try to avoid nesting blocks as much as possible.

    At the :08 second mark in your video, instead of selecting “100”, I’d like to select “50/50”.

    once 50/50 is selected you can fill in the content in your columns and add a background color and everything works fine. but if you click on the wordpress block alignment to make the block go full width the columns also go full width. Now, I understand this is probably smart for coblocks because there are probably some times where you might want columns that go full width.

    …but if the background images or color was attached to wp-block-coblocks-row instead of wp-block-coblocks-row__inner I could use wp-block-coblocks-row__inner to assign a max-width and center that div (centering my columns on the page). or probably more backwards compatible if you added an additional wrapper inside wp-block-coblocks-row__inner that I could set a mx-width and center to I could get around the block nesting.

    patterns are making this less of an issue. but I thought I would ask just in case I was missing something.

    Thanks again

    Plugin Support Milos Vlaisavljevic

    (@gdmilos)

    Hey @pm1932,

    Thanks for your reply.

    In order to achieve the desired look of your columns, you can try to define margins by increasing margin-left for the left column and margin-right for the right one. The values should be the same and they can be set here.

    As you can see from the above screenshot, there are various value units as well as a possibility to set different values for different devices.

    I hope I helped you a bit. ??

    Kind Regards,
    Milos | GoDaddy

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Single Row – Center Columns in Full Width’ is closed to new replies.