Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #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&#8221; 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.
    #945231

    Hey 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,
    Nikko

    #946820

    Nikko,

    Awesome that worked great! Is there also a way to make the header auto hide exclusively on this page?

    #947033

    Hi 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,
    Nikko

    #947072

    Is there a way to make the page shrink instead of not show up at all depending on the page?

    #947087

    Currently, 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;
    }
    #948326

    Hi,

    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,
    Vinay

    #949749

    Vinay,

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

    Hi 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,
    Nikko

    #955810

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

    #955812

    what 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?

    #955813

    Guenni007,

    By full I mean the full width of the container everything else is working except the width once the site hits 767 pixels

    #955817

    this isn’t what you mean ( i take a page whis stretched layout for better seeing what happens):

    https://webers-testseite.de/kriesi/

    #955820

    you 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%;
      }
    }
    #955964

    Hi,

    Thanks for sharing @guenni007, much appreciated :-)

    Best regards,
    Rikard

    #958968

    Still can’t get the iframe to expand fully on the screen something is holding it together when expanding the screen on desktop view?

    #959318

    Hi,

    Please try this instead:

    .page-id-6249 #main .container_wrap_first .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    Best regards,
    Rikard

    #1080628

    Perfect this fixed the issue on the width! How do I remove the white spacing and/or gap between the bottom?

    #1080868

    Hi tdproperty,

    Try adding this css code as well:

    .page-id-6249 #main .entry-content p {
        line-height: 0 !important;
    }

    Best regards,
    Nikko

Viewing 19 posts - 1 through 19 (of 19 total)
  • You must be logged in to reply to this topic.