Tagged: , ,

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • April 22, 2018 at 5:59 am #945015
    tdproperty

    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, 8 months ago by tdproperty.
    April 23, 2018 at 5:23 am #945231
    Nikko

    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

    April 25, 2018 at 8:06 pm #946820
    tdproperty

    Nikko,

    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 #947033
    Nikko

    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

    April 26, 2018 at 5:18 am #947072
    tdproperty

    Is 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 #947087
    tdproperty

    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;
}
    April 28, 2018 at 12:04 pm #948326
    Vinay

    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

    May 2, 2018 at 12:46 am #949749
    tdproperty

    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, 7 months ago by tdproperty.
    May 3, 2018 at 4:13 pm #950896
    Nikko

    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

    May 12, 2018 at 6:20 pm #955810
    tdproperty

    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.

    May 12, 2018 at 6:26 pm #955812
    Guenni007

    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?

    May 12, 2018 at 6:30 pm #955813
    tdproperty

    Guenni007,

    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 #955817
    Guenni007

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

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

    May 12, 2018 at 7:18 pm #955820
    Guenni007

    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%;
  }
}
    May 13, 2018 at 7:34 am #955964
    Rikard

    Hi,

    Thanks for sharing @guenni007, much appreciated :-)

    Best regards,
    Rikard

    May 19, 2018 at 8:55 am #958968
    tdproperty

    Still 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 #959318
    Rikard

    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

    March 20, 2019 at 3:25 am #1080628
    tdproperty

    Perfect 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 #1080868
    Nikko

    Hi tdproperty,

    Try adding this css code as well:

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

    Best regards,
    Nikko

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