mobile view, content overlaps

niceeee
Shopify Partner
298 4 22
 

Screenshot 2024-04-22 102220.png

url: makerlab-electronics.com

Anyone knows how to fix this one?

Replies 4 (4)

Dan-From-Ryviu
Shopify Partner
7726 1506 1514

Hi @niceeee 

You embedded the video with a fixed width; please make it responsive to solve the issue. 

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

PageFly-Noah
Astronaut
1119 201 220

This is Noah from PageFly - Shopify Page Builder App

 

Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

 

<style>
 @media screen and (max-width: 767px){
  main{
   overflow-x: hidden !important;  
}
}

</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

tim
Shopify Expert
3466 280 1286

@Dan-From-Ryviu is right, you need to make the iframe responsive.

 

You can do it by pasting the following code to the sections "Custom CSS" setting:

 

p:has(iframe) {
  position:relative;
  padding: 0;
  line-height: 0;
}

p:has(iframe):before {
  content: "";
  display: block;
  padding-top: 56.25%;
  width: 0px;
}
p iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

 

Screenshot 2024-04-22 at 12.56.20 pm.png Screenshot 2024-04-22 at 12.58.59 pm.png

 

Solution with overflow-x: hidden will crop out about a third of your video

Also, editing the theme code will make updating the theme difficult/impossible -- that's why I recommend using 'Custom CSS' setting.

 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

swym
Explorer
41 2 17

Hello @niceeee,

 

It's good practice to create a copy of your theme and work on that to preview the changes before applying, especially if you are editing the raw code. Alternatively, you can also use the Shopify theme editor’s versions to revert to previous versions, but it is not recommended if you are making multiple changes.

 

Now, to address your specific question about fixing the YouTube iframe from taking more space than available, you can follow the steps below:

 

1. Open the code editor, as shown in the screenshot below. 

 

swym_0-1713763699744.png

 

2. Create a snippet called ‘custom-iframe-styles’ and add the below code:

 

 

<style>
     @media only screen and (max-width: 767px){
       .tabcontent-cus iframe {
          width: 100%;
        }
    }
  </style>

 

 

3. Include the ‘custom-iframe-styles.liquid’ file in your “theme.liquid” file.
    Add the following include code to your theme.liquid file.

 

{% render 'custom-iframe-styles' %}

 

It would look something like below:

swym_1-1713763699716.png

 

Done? Now save the file, and try previewing to confirm if the changes work for you.  In the reference above, it looks something like below:

swym_2-1713763699679.png

I hope this helps!

Regards,
Abhishek from Swym