Search code examples
htmlcssiframe

Embedding and centring iframe while responsive in landing page builder

I am using Sendinblue and want to embed forms in the page.

However the page looks odd: https://page.nusaconsult.com/

I've used:

<iframe width="350" height="600" src="https://www.chatsurvey.io/embed/i4r" frameborder="0"></iframe>

With no success. I've tried the solutions from the site like W3schools and even SO but still it didn't work.

Thanks in advance.

Solution

  • I'm not sure what exactly your desired outcome is. But if you use css to give a set height and width to the iframe:

    iframe {
    height: 500px;
    width: 300px;
}

    And then center the iframe with the wrapper div:

    div#c4ad4a16-0e59-47da-86d9-586edca070b4 {
    text-align: center;
}

    You will get something that looks like this on desktop:

    enter image description here

    And on mobile:

    enter image description here