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

Embed Block not properly sizing on Mobile

Question

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

 

Share this post


Link to post

3 answers to this question

Recommended Posts

  • 0

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;
}
}

 


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

How to Setup Password & Share URL

 

Share this post


Link to post
  • 0
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

Share this post


Link to post
  • 0

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;
}
}

 


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

How to Setup Password & Share URL

 

Share this post


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