Background not covering

Hello,

My website is memedawar.com

Ok the section with the 3 videos I have a semi-transparent black background. However, since the row is divided into 3 equal parts it seems that the black background has breaks in between each section…but only on mobile (iPhone 6, at least).

I have a screen shot, but can’t attach it here and am not sure how else to provide it for you to see.

Please let me know if you can help me get the background to cover the whole row without the breaks in between sections (i.e., each video panel).

Thanks!

Hi,

There was a margin-bottom on each video wrapper that cause it.
you can try to remove the margin bottom using this code:

@media (max-width: 780px){
#pgc-400-2-0, #pgc-400-2-1 {
    margin-bottom: 30px;
}
}

Hi Awan,

Thanks for your reply! That code did not work, so I made a slight modification to it and this one seems to work:

@media screen and (max-width: 780px) {
#pgc-400-2-0, #pgc-400-2-1 {
margin-bottom: 0px !important;
}
}

However, I still see one issue on my iPhone 6. When I view that same video section in landscape there are large spaces between each video, which stretched the entire row to be too high. Therefore, the background image runs out and there is just a gray background on the bottom portion of that row…

How can I decrease the spacing between each video so that row is smaller in landscape mode?

Gratefully,

Tyler

I see, try this code:

@media screen and (max-width: 1024px){
  #pg-400-2 .panel-row-style {
    background-size: 250% 100% !important;
  }

  #panel-400-2 .panel.widget, .so-panel.widget {
    padding-bottom: 0;
  }

  #pg-400-2 .fluid-width-video-wrapper {
    padding-top: 0 !important;
    padding-bottom: 53% !important;
  }
}

Thanks, Awan. That worked well once I decreased the size of the iframes on mobile to 80%.

The last issue I have with this section is that on my laptop, the semi-transparent background for video 2 and 3 are not completely covering. There is a small sliver that is not covered at the bottom of each…how do I increase the size of the semi-transparent background for those sections?

Best,

Tyler

Hmm… I don’t know what exactly cause it, but hope this code can fix the issue:

.fluid-width-video-wrapper {
    padding-top: 298px !important;
}

Alas, that did not correct the issue :confused:

Here is all of the custom CSS I have created so far…perhaps I have something in here that is causing the 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;
}

.fluid-width-video-wrapper {
padding-top: 298px !important;
}

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

#pgc-400-2-0, #pgc-400-2-1, #pgc-400-2-2 {
background-color: rgba(0, 0, 0, 0.60) !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;
}

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

/* CTA frontpage */

#call-to-action {
color: white !important;
background-color: rgb(255, 0, 29) !important;
}
.action-area {
padding-top: 20px !important;
padding-bottom: 20px !important;
font-size: 14px !important;
}
section .action-text {
margin-bottom: 20px;
font-size: 18px;
}
.action-area .widget-title {
margin-bottom: 30px;
}

.call-to-action {
background-color: rgb(0, 0, 0);
color: white;
border: 1px solid black;
border-radius: 5px;
box-shadow: none;
padding: 10px !important;
font-family: Source Sans Pro !important;
font-weight: 700 !important;
font-size: 16px !important;
text-decoration: none;
}
.call-to-action:hover {
background-color: rgba(255, 255, 255, .9) !important;
color: black !important;
border: 1px solid black;
border-radius: 5px;
}

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

/* contact form frontpage */

#pgc-400-5-0 {
background-color: rgba(0, 0, 0, .8);
}
.wpcf7-submit {
background-color: rgb(255, 0, 29) !important;
color: white !important;
box-shadow: none !important;
padding: 10px !important;
font-family: Source Sans Pro !important;
font-weight: 700 !important;
font-size: 16px !important;
text-decoration: none;

}
.wpcf7-submit:hover {
background-color: rgba(0, 0, 0, .6) !important;
color: white;
border: 1px solid red;
border-radius: 5px;
}

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

/* Mobile CSS */

@media screen and (max-width: 1024px){
.panel-row-style {
background-size: 250% 100% !important;
}

#panel-400-2 .panel.widget, .so-panel.widget {
padding-bottom: 0;
}

#pg-400-2 .fluid-width-video-wrapper {
padding-top: 0 !important;
padding-bottom: 53% !important;
}
}

@media screen and (max-width: 780px) {
#pgc-400-2-0, #pgc-400-2-1 {
margin-bottom: 0px !important;
}
}

@media screen and (max-width: 780px) {
#pg-400-2 iframe {
width: 80% !important;
height: 80% !important;
left: 9% !important;
}
}

Thanks so much for you help!

Awan,

I removed the following code and it seems to have fixed the issue!

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