Tagged: IDX, iframe, real estate
-
AuthorPosts
-
April 22, 2018 at 5:59 am #945015
Kriesi,
I am trying to add in an iframe on my real estate web site which will allow customers to search properties. The issue that I am running into is that my code for my iframe is not fully filling up my page. I have read through the articles and cannot find a solution. My iframe code:
`<iframe src=”https://kriesi.at” width=”100%” height=”100%” frameborder=”0″ marginwidth=”0″ marginheight=”0″></iframe>’
I have provided my page URL in the private content area.Ultimately I would like for the iframe to be fully responsive and still to include the header and photo however to just show up in the main section of the page. Your help is greatly appreciated.
- This topic was modified 6 years, 6 months ago by tdproperty.
April 23, 2018 at 5:23 am #945231Hey Michael,
Thanks for giving us the link to your site as well as the iframe code, can you try to replace this part of your iframe code:
height=”100%”
to:
height="800"
then try adding this css code in Quick CSS (located in Enfold > General Styling):
.page-id-6249 #main .container_wrap_first .container { padding: 0; width: 100%; max-width: 100%; } .page-id-6249 #main .container_wrap_first .container .content { padding: 0; }
Hope this helps :)
Best regards,
NikkoApril 25, 2018 at 8:06 pm #946820Nikko,
Awesome that worked great! Is there also a way to make the header auto hide exclusively on this page?
April 26, 2018 at 4:08 am #947033Hi tdproperty,
Yes, can you try adding this css code as well:
.page-id-6249 #header { display: none; } .page-id-6249 #main { padding-top: 0 !important; } .page-id-6249 #main .entry-content p { margin: 0 !important; }
Best regards,
NikkoApril 26, 2018 at 5:18 am #947072Is there a way to make the page shrink instead of not show up at all depending on the page?
April 26, 2018 at 6:32 am #947087Currently, I am using the following code which is working great however when in mobile view there is a large padding being added to the right and left hand sides of the screen. Can you please help resolve this issues?
/*ABOR MLS Page Updates*/ .page-id-6249 #main .container_wrap_first .container { padding: 0; width: 100%; max-width: 100%; } .page-id-6249 #main .container_wrap_first .container .content { padding: 0; } .page-id-6249 #main .entry-content p { margin: 0 !important; }
April 28, 2018 at 12:04 pm #948326Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
.modal-dialog { margin: 0!important; }
Best regards,
VinayMay 2, 2018 at 12:46 am #949749Vinay,
Thank you for the update however the above listed code did not solve my issue’s:
Issue #1 ~ In google chrome the iframe applies a large border of white space both on the right and left hand side when i reach a width of 767 pixels. The same issue happens in IE however I did not measure the pixel width in IE.
Issue #2 ~ The vertical height is not responsive.
Issue #3 – Is their a way to make the header only on this page a small header without the phone number at the top?
Current page code:
<iframe src="https://websiteaddresslistedinprivate.com" width="100%" height="650" frameborder="0" marginwidth="0" marginheight="0"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>
My current custom CSS code is as followed:
.page-id-6249 #main .container_wrap_first .container { padding: 0; width: 100%; max-width: 100%; } .page-id-6249 #main .container_wrap_first .container .content { padding: 0; } .page-id-6249 #main .entry-content p { margin: 0 !important; } .modal-dialog { margin: 0!important; }
- This reply was modified 6 years, 6 months ago by tdproperty.
May 3, 2018 at 4:13 pm #950896Hi tdproperty,
Can you try adding this css code as well:
.page-id-6249 #main .container_wrap_first .container { width: 100% !important; max-width: 100% !important; }
Let us know if this helps :)
Best regards,
NikkoMay 12, 2018 at 6:20 pm #955810Thanks for the update, however, I am still getting the same issue. I have included my login details in private for your review. I greatly appreciate the help.
May 12, 2018 at 6:26 pm #955812what do you mean by full ? without your header/ logo / navigation – blank page as if visitors see the real source site without knowing it that they were on a different page?
May 12, 2018 at 6:30 pm #955813Guenni007,
By full I mean the full width of the container everything else is working except the width once the site hits 767 pixels
May 12, 2018 at 7:04 pm #955817this isn’t what you mean ( i take a page whis stretched layout for better seeing what happens):
May 12, 2018 at 7:18 pm #955820you have to adjust this to your page which it concerns
@media only screen and (max-width: 767px) { .responsive #top.page-id-32166 #wrap_all .container { width: 100%; max-width: 100%; } }
May 13, 2018 at 7:34 am #955964May 19, 2018 at 8:55 am #958968Still can’t get the iframe to expand fully on the screen something is holding it together when expanding the screen on desktop view?
May 20, 2018 at 6:35 am #959318Hi,
Please try this instead:
.page-id-6249 #main .container_wrap_first .container { width: 100% !important; max-width: 100% !important; padding: 0 !important; }
Best regards,
RikardMarch 20, 2019 at 3:25 am #1080628Perfect this fixed the issue on the width! How do I remove the white spacing and/or gap between the bottom?
March 20, 2019 at 3:40 pm #1080868Hi tdproperty,
Try adding this css code as well:
.page-id-6249 #main .entry-content p { line-height: 0 !important; }
Best regards,
Nikko -
AuthorPosts
- You must be logged in to reply to this topic.