CSS to resize video inside Summary block in mobile view

Site URL: https://www.blueridgeresearch.com/nepa-ea-eis

I have a video inside a Summary block that looks fine in the computer view but is tiny in the mobile view. I tried it with the Youtube embed code and also with the simple Youtube URL. Either way, it will not appear full width in mobile view (while inside the Summary block). I searched this help section and tried modifying different bits of CSS but nothing worked. The URL to the page in question is - https://www.blueridgeresearch.com/nepa-ea-eis. Again, it looks fine on the computer, but not in mobile view (see screen shot below). Tuan recently gave me some CSS to make the Summary block wrap correctly in mobile view and that is working fine. Is there something I can add to that code to make the video full width? Here is the CSS I'm using to control the Summary block in mobile view.

I struggled with this for hours today. It seems like it should be a simple fix but I'm just not smart enough to figure it out. Please help me if you can. Thank you all for your expertise. Us regular people truly appreciate you!

// Summary block wrap on device //
@media screen and (max-width:640px) {
.sqs-gallery-design-list .sqs-gallery-design-list-slide:not(.no-image) .sqs-gallery-meta-container {
  width: 100% !important;
  margin-top: 15px;
  top: 0 !important;
}
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container {
    float: none !important;
    width: 100% !important;
}
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
  }
}

13 hours ago, mikevatech said:

Site URL: https://www.blueridgeresearch.com/nepa-ea-eis

I have a video inside a Summary block that looks fine in the computer view but is tiny in the mobile view. I tried it with the Youtube embed code and also with the simple Youtube URL. Either way, it will not appear full width in mobile view (while inside the Summary block). I searched this help section and tried modifying different bits of CSS but nothing worked. The URL to the page in question is - https://www.blueridgeresearch.com/nepa-ea-eis. Again, it looks fine on the computer, but not in mobile view (see screen shot below). Tuan recently gave me some CSS to make the Summary block wrap correctly in mobile view and that is working fine. Is there something I can add to that code to make the video full width? Here is the CSS I'm using to control the Summary block in mobile view.

I struggled with this for hours today. It seems like it should be a simple fix but I'm just not smart enough to figure it out. Please help me if you can. Thank you all for your expertise. Us regular people truly appreciate you!

// Summary block wrap on device //
@media screen and (max-width:640px) {
.sqs-gallery-design-list .sqs-gallery-design-list-slide:not(.no-image) .sqs-gallery-meta-container {
  width: 100% !important;
  margin-top: 15px;
  top: 0 !important;
}
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container {
    float: none !important;
    width: 100% !important;
}
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
  }
}

 

Tuan,

The URL to the page is https://www.blueridgeresearch.com/nepa-ea-eis.
Thank you for looking at this.

Tuan,
The URL to the page is https://www.blueridgeresearch.com/nepa-ea-eis.
Thank you for looking at this.

Just in case someone else has this same question, this is what Tuan sent to me. Worked perfectly!

On 11/23/2021 at 7:53 PM, mikevatech said:

Just in case someone else has this same question, this is what Tuan sent to me. Worked perfectly!

Add to Design > Custom CSS > Then save & reload the site

/* Increase video size */

@media screen and (max-width:767px) {

div#block-yui_3_17_2_1_1637432174041_10451 .summary-thumbnail-container {
    width: 100% !important;
}

}

Use this tool to find block id (div#block....10451) https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en