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
  • Views 367
  • Created
  • Last Reply

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.

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.