Jump to content

Help with embed being too large on mobile

Go to solution Solved by tuanphan,

Recommended Posts

Hi,

I tried looking for a solution elsewhere but couldn't find one that worked for me.

I have these amazing maps embedded on my new/work in progress website, however on mobile they run over the edge of the window. If there a way to force these embeds into the screen on mobile?

I've attached a mobile and desktop screenshot below for comparison.

Thanks in advance :)

image.thumb.png.523913e4c2762e27bd86c4be2d250921.pngimage.thumb.png.80c9e04d521768c9b5a6245db7192b4f.png

Link to comment
  • Replies 8
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution
On 4/26/2023 at 8:33 AM, tuanphan said:

Add to Design > Custom CSS

/* Map on mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1679354939610_11121 div {
    width: 100% !important;
}
}

 

You can repeat the code, use this tool to find block id

(div#bloc.....11121 is block id)

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

If you still can't solve it, let me know, we will give the full code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
  • 10 months later...

Hello, I'm having a very similar problem at tomfryercounselling.com,

I have a really nice Google Maps embedded on my website, and it looks lovely on the Desktop, but on the Mobile view it stretches too far to the right, which messes up the whole page.

I've tried inserting the above code in Design > Custom CSS but it hasn't seemed to work.

Screen Shot 2024-04-05 at 17.22.57.png

Screen Shot 2024-04-05 at 17.22.26.png

Link to comment
On 4/5/2024 at 11:23 PM, Tom_Fryer_Counselling said:

Hello, I'm having a very similar problem at tomfryercounselling.com,

I have a really nice Google Maps embedded on my website, and it looks lovely on the Desktop, but on the Mobile view it stretches too far to the right, which messes up the whole page.

I've tried inserting the above code in Design > Custom CSS but it hasn't seemed to work.

Screen Shot 2024-04-05 at 17.22.57.png

Screen Shot 2024-04-05 at 17.22.26.png

You can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
iframe[src*="google.com/maps"] {
    width: 100% !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.