Panel background colors

Hello,

I’ve been playing with my CSS in the simple custom css plugin and have been generally having success changing specific panels’ background colors and transparencies. However, if you look at my front page at memedawar.com you will see the section containing 3 videos has a chunk on the lower left of the section that isn’t covering.

I’m using this code:

#pgc-400-2-0, #pgc-400-2-1, #pgc-400-2-2, #pgc-400-2-3 {
background-color: rgba(0, 0, 0, 0.70) !important;
}

I couldn’t figure out if there was a way to set the background for that entire row/panel since I have it separated into 3 columns in the page editor. Can you help me figure out what that chunk in the lower left that isn’t covered by the black transparent background is?

Thanks!

Hi again,

I think the problem is because the videos has different height. you can use this code to trigger the video to have same height (not sure if it’s working, but you need to try it :stuck_out_tongue: )

#pg-400-2 iframe {
    height: 300px;
}

and this is for the background:

#pg-400-2 .panel-grid-cell {
    background-color: rgba(0, 0, 0, 0.70) !important;
}

Hi again, Awan :slight_smile:

The iframe code worked well, thanks!

The background is still not covering that chunk, however…

Here is my entire custom css (is there anything in here that may be causing this issue?):

/* WHY section CSS */
#pgc-400-0-0 {
background-color: rgba(0, 0, 0, 0.60) !important;
}

/* Video Widget CSS /
.widget_moesia_video_widget .widget-title {
display: none
}
#pg-400-2 .panel-grid-cell {
background-color: rgba(0, 0, 0, 0.70) !important;
}
#pg-400-2 iframe {
height: 300px;
}
/
Widgets CSS */
section .widget-title:after,
.so-panel.widget .widget-title:after {
border-bottom: 6px double #FFFFFF;
}

.panel-widget-style {
background-color: transparent;
}
.overlay {
max-height: 600px;
}

.widget-title {
color: #FFFFFF;
text-shadow: 1px 2px 3px rgba(0,0,0,0.6)
}

/* Pages CSS */
.page .entry-header {
display: none;
}

/* Projects CSS */
#projects .all-news {
background-color: rgb(0, 0, 0);
color: white;
border-color: black;
}
.all-news:hover {
background-color: rgba(255, 0, 29, .9) !important;
}
#projects {
background-color: rgba(189, 101, 111, 0.60);
}
.projects-area .container {
background-color: transparent;
}

Awan,

I think I figured it out, but I’d still like to know why it was like that in the first place.

By using Chrome dev tools Inspect Element, I noticed that the padding-top was 75% on the second two videos and only like 56% on the first one. I added the following CSS and it seems to have worked:

#pgc-400-2-0 .fluid-width-video-wrapper {
padding-top: 75% !important;
}

Can you help me understand why that top padding was smaller in the first place? Also, do you think my solution will hold up or will it falter in the future for some reason?

Thanks for your support!