Jump to content

Embed Block not properly sizing on Mobile

Recommended Posts

Site URL: https://www.follow-our-steps.com/book-your-trip-1

Hello,

I have put a widget up on my website that doesn't respond accordingly to the changes in window size. So full screen on the website it works great, but on mobile it makes the page all sorts of messed up. I have two questions - 

1. Is it possible to just exclude this widget on mobile? So it shows up on desktop but not on mobile

2. Change the code so that it adapts to window and browser size like my other widgets?

 

Here is the code:

<div>

  <div>

    <iframe border="0" frameborder="0" width="450px" height="100" src="https://co2offset.atmosfair.de/co2offset?p=1000201243#/flight?locale=en">
 

I have changed the width and height but it doesn't really look good on mobile. I think I would prefer to somehow exclude this and its title from mobile, but don't know if that is possible or worth it. 

Here is one example of where it is: https://www.follow-our-steps.com/book-your-trip-1

 

Thank you!

Chris

 

Link to comment
  • Replies 3
  • Created
  • Last Reply

1. Is it possible to just exclude this widget on mobile? So it shows up on desktop but not on mobile

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1580549706840_5276 {
	display: none !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
28 minutes ago, tuanphan said:

1. Is it possible to just exclude this widget on mobile? So it shows up on desktop but not on mobile

Add to Home > Design > Custom CSS


@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1580549706840_5276 {
	display: none !important;
}
}

 

Thank you! I tried this though and it is still showing up on mobile. Did I miss something? Thank you!

Screen Shot 2020-02-07 at 1.16.16 PM.png

Link to comment

my bad, the above code for Flight form, this code for both flight form

@media screen and (max-width:640px) {
/* Accommodation form */
div#block-yui_3_17_2_1_1580549706840_5276 {
	display: none !important;
}
/* Flight Form */
div#block-yui_3_17_2_1_1580549706840_9941 {
	display: none !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

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.