Jump to content

Code Block Impacting Responsive Design

Recommended Posts

Site URL: http://www.facilibuildhub.com/tech-platform

I'm using a code block for this video so it doesn't show related videos at the end. I also added a CSS code to the block so it resizes properly for mobile. However, I've now discovered that the code is impacting the website's responsive design. If I minimize the tab I have it open in, the video block runs into the side bar and everything is overlapping. 

Any idea how to fix this?


Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Remove, make a copy somewhere, any CSS you have used to manipulate the code block

Add the following CSS.

/* begin make YouTube video responsive */

  #block-yui_3_17_2_1_1614718916914_14873 .sqs-block-content {
    position : relative;
    overflow : hidden;
    width : 100%;
  #block-yui_3_17_2_1_1614718916914_14873 .sqs-block-content::after {
    content : '';
    display : block;
    padding-top : 56.250%;
  #block-yui_3_17_2_1_1614718916914_14873 .sqs-block-content iframe {
    height : 100%;
    left : 0;
    position : absolute;
    top : 0;
    width : 100%;
  /* end make YouTube video responsive */

Based on code from How to Make YouTube Video Embeds Responsive With CSS.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.