How to Center an object - custom code block

Site URL: http://hilarybeckwith.com/quiz

Hello- I pasted a code from Interact in order to embed a quiz into a Code Block.

The quiz appears to not be centered, I have played around with it quite a bit. 

How can I, either remove the space on the right of the object, or center the quiz so equalize the spacing?

Spacers are not cutting it, because the object itself has spacing on the right side.

1 hour ago, hilaryb said:

Site URL: http://hilarybeckwith.com/quiz

Hello- I pasted a code from Interact in order to embed a quiz into a Code Block.

The quiz appears to not be centered, I have played around with it quite a bit. 

How can I, either remove the space on the right of the object, or center the quiz so equalize the spacing?

Spacers are not cutting it, because the object itself has spacing on the right side.

Hey @hilaryb remove Your previous code and try this:

#block-yui_3_17_2_1_1639685235074_2121 iframe {
  margin: 0 auto !important;
}

I'm having the same problem with embed code blocks on this page of my website.
https://crimminsconstructiontx.com/monarch

I can't figure out how to center it as well I have no idea how to get it centered and working on mobile.

This is the code that I need to embed:
<iframe src="https://my.matterport.com/show/?m=sRLKgTfo3c5&mls=1" frameborder="0" width="853" height="480" allowfullscreen allow="xr-spatial-tracking"></iframe>

Any guidance would be so appreciated!!

On 6/10/2022 at 3:27 AM, janamcwms said:

I'm having the same problem with embed code blocks on this page of my website.
https://crimminsconstructiontx.com/monarch

I can't figure out how to center it as well I have no idea how to get it centered and working on mobile.

This is the code that I need to embed:
<iframe src="https://my.matterport.com/show/?m=sRLKgTfo3c5&mls=1" frameborder="0" width="853" height="480" allowfullscreen allow="xr-spatial-tracking"></iframe>

Any guidance would be so appreciated!!

 

Add to Design > Custom CSS

/* center embed block */
div#block-yui_3_17_2_1_1654802943766_7425 div {
    text-align: center;
}
/* mobile embed block */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1654802943766_7425 iframe {
    width: 100%;
}
}

On 6/11/2022 at 3:52 AM, tuanphan said:

Add to Design > Custom CSS

/* center embed block */
div#block-yui_3_17_2_1_1654802943766_7425 div {
    text-align: center;
}
/* mobile embed block */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1654802943766_7425 iframe {
    width: 100%;
}
}

 

Thank you so much! That worked. Appreciate the help.