I have a form on this page of a WordPress site: http://mainemusicmakers.com/booking-info/
The form works well - except when viewed on smaller devices, the full form is not showing, it has a scroll bar on the right.
Here is the code on the page to display the form:
<p><iframe id="fb_iframe" style="border: none; background: transparent; overflow: hidden; width: 100%;" src="http://www.mainemusicmakers.com/MMMBookingForm1/MMMBookingForm1.html" width="300" height="1287"></iframe></p>
What can I do to get the entire form to display on smaller screens?
Eric Normand
Registered User
32 posts
Eric Rohloff
Senior Advisor
20,271 posts
Try removing it from between the <p> and <div>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Eric Normand
Registered User
32 posts
No change.
Steve
Senior Advisor
3,121 posts
Online Now
Hi Eric,
Are you using a responsive theme for your form?
Are you using a responsive theme for your form?
Taking over the world one website at a time!
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Steve Kolish
www.misterwebguy.com
YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Jo Rice
Senior Advisor
10,951 posts
I haven't checked on my phone, but on my iPad the form not only doesn't show the whole form, it doesn't have any scroll bar either so you cannot even see the whole form at all. I tried both vertical and horizontal positioning of the screen, but no scroll bar either way and there needs to be.
Eric Rohloff
Senior Advisor
20,271 posts
Most of the issue is the styling being applied to the class="art-responsive-embed"
Try removing that class from the div.
Try removing that class from the div.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Eric Normand
Registered User
32 posts
How do I remove that class from the div? This is all that I have on that page for that form (I do not have a div at all):
<h2>Book Your Event Here!</h2>
<p>Please fill out the form below, and one of our representatives will get back to you shortly with pricing and availability.</p>
<p> </p>
<p>
<iframe id="fb_iframe" style="border: none; background: transparent; overflow: hidden; width: 100%;" src="http://www.mainemusicmakers.com/MMMBookingForm1/MMMBookingForm1.html" width="300" height="1287"></iframe>
<h2>Book Your Event Here!</h2>
<p>Please fill out the form below, and one of our representatives will get back to you shortly with pricing and availability.</p>
<p> </p>
<p>
<iframe id="fb_iframe" style="border: none; background: transparent; overflow: hidden; width: 100%;" src="http://www.mainemusicmakers.com/MMMBookingForm1/MMMBookingForm1.html" width="300" height="1287"></iframe>
Eric Normand
Registered User
32 posts
This is the css:
.responsive .art-responsive-embed
{
height: 0;
padding-bottom: 56.25%;
/* 16:9 */
position: relative;
}
.responsive .art-responsive-embed iframe,
.responsive .art-responsive-embed object,
.responsive .art-responsive-embed embed
{
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.responsive .art-responsive-embed
{
height: 0;
padding-bottom: 56.25%;
/* 16:9 */
position: relative;
}
.responsive .art-responsive-embed iframe,
.responsive .art-responsive-embed object,
.responsive .art-responsive-embed embed
{
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
Eric Rohloff
Senior Advisor
20,271 posts
Your form is within a div
<div class="art-responsive-embed"><iframe width="300" height="1287" src="http://www.mainemusicmakers.com/MMMBookingForm1/MMMBookingForm1.html" style="border: none; background: transparent; overflow: hidden; width: 100%;" id="fb_iframe"></iframe></div>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Eric Normand
Registered User
32 posts
I'm not sure where you are seeing that because this is all I have on that page:
<h2>Book Your Event Here!</h2>
<p>Please fill out the form below, and one of our representatives will get back to you shortly with pricing and availability.</p>
<p> </p>
<p>
<iframe id="fb_iframe" style="border: none; background: transparent; overflow: hidden; width: 100%;" src="http://www.mainemusicmakers.com/MMMBookingForm1/MMMBookingForm1.html" width="300" height="1287"></iframe>
<h2>Book Your Event Here!</h2>
<p>Please fill out the form below, and one of our representatives will get back to you shortly with pricing and availability.</p>
<p> </p>
<p>
<iframe id="fb_iframe" style="border: none; background: transparent; overflow: hidden; width: 100%;" src="http://www.mainemusicmakers.com/MMMBookingForm1/MMMBookingForm1.html" width="300" height="1287"></iframe>
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
