Embed Block not properly sizing on Mobile

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

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

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!

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