Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Resizing Code Blocks for Mobile


meganntab
Go to solution Solved by bangank36,

Question

Site URL: http://www.facilibuildhub.com/

How can I size a code block for mobile? The video on my site is embedded as a code - we didn't want the suggested videos to pop up at the end and I found a tutorial for getting rid of them, which involved embedding it as code. However, the video remains full size on the mobile version and throws off the entire site display. 

Any tips for how to fix this? 

Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Try this custom css @media screen and (max-width: 767px) { #block-yui_3_17_2_1_1614718295210_14318 { width: 100% !important; padding: 0 !important; } #block-yui_3_17_2_1_161471

Site URL: http://www.facilibuildhub.com/ How can I size a code block for mobile? The video on my site is embedded as a code - we didn't want the suggested videos to pop up at the end and I found a t

That worked, thanks!

Posted Images

3 answers to this question

Recommended Posts

  • 0
14 hours ago, meganntab said:

Site URL: http://www.facilibuildhub.com/

How can I size a code block for mobile? The video on my site is embedded as a code - we didn't want the suggested videos to pop up at the end and I found a tutorial for getting rid of them, which involved embedding it as code. However, the video remains full size on the mobile version and throws off the entire site display. 

Any tips for how to fix this? 

Try this custom css

@media screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1614718295210_14318 {
      width: 100% !important;
      padding: 0 !important;
  }  
  #block-yui_3_17_2_1_1614718295210_14318 .sqs-block-content {
       width: 100%;
      padding-top: 56%;
      height: 0;
  }  
  #block-yui_3_17_2_1_1614718295210_14318 .sqs-block-content iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100% !important;
      height: 100%;
  }  
}

image.png.b46a4b773b8cc2364caa261385cf0aac.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

Revisiting this conversation as I've run into a new problem - the code works great for changing the size of the video and doing what I need it to do, but I've now realized it's interfering with the site's responsive design. On this page, if you minimize the window, you'll notice that the code block runs into the side bar and everything is overlapping. 

Any idea how to fix this? 

FaciliBuild HUB — FaciliBuild 

image.png.109feb8ab612adcccfb176e6e06fe927.png

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...