Changing the color background separately for two cells in the same row

Hello,

I would like to replicate the List and Skills row of the demo. So the left cell in background red and the right cell of the same row in grey color. I really can’t find how to do it
This is my page: http://gisz.ucddorcas.click/?page_id=59
As you can see, at the bottom of the page, I have two cells in the same row. A video on the left and Skills on the right. I just want the cells’ background to be different for each of them

Also, I was wondering how to scale down the size of the video preview. At the moment it seems to be a bit too big

Could you help me please?

Thanks!

Jack

Hello Jack,

Edit your row, and then define a custom class name in the Row Styles > Attributes > Row class; example: my-row-background

Then select background color in the Design options.

To create the second cell background color, add the following CSS code into Appearance > Customize > Additional CSS.


.my-row-background {
  display: table;
  position: relative;
}

.my-row-background:after {
  content: '';
  display: block;
  position: absolute;
  width: 50%;
  height: 100%;  
  top: 0;
  right: 0;
  z-index: 2;
  background-color: #ff0000; /* Second cell background color */ 
}  

.my-row-background .panel-grid-cell:last-child {
  position: relative;
  z-index: 3;
}

To limit your YouTube video, use Text widget instead of Sydney video. Wrap your video URL with a DIV tag and set its maximum width. In the text box, you will insert something like this:


<div style="max-width:300px;">
[video src="https://www.youtube.com/watch?v=sqDK2Rhpb3g"]
</div>

I hope this reply helps.

Regards,
Kharis

Thank you very much Kharis!

The video re-size is perfectly working!
Instead, I have some problems with the row color. As you can see http://gisz.ucddorcas.click/?page_id=59 the row was divided into two cells of different colors, which is grand, but it is not full width anymore. It occupies only a portion of the screen.
Could you help further please?

Thanks a mil!

Jack

Hello there,

Try to replace this


.my-row-background {
  display: table;
  position: relative;
}

to


.my-row-background {
  display: table;
  position: relative;
  width: 100%;
}

Let me know how it goes.

Regards,
Kharis