mikevatech Posted November 22, 2021 Share Posted November 22, 2021 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; } } Link to comment
mikevatech Posted November 22, 2021 Author Share Posted November 22, 2021 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. Link to comment
mikevatech Posted November 22, 2021 Author Share Posted November 22, 2021 Tuan, The URL to the page is https://www.blueridgeresearch.com/nepa-ea-eis. Thank you for looking at this. Link to comment
mikevatech Posted November 23, 2021 Author Share Posted November 23, 2021 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; } } tuanphan 1 Link to comment
tuanphan Posted November 26, 2021 Share Posted November 26, 2021 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment