How can I successfully embed a full screen on my store page?

Store Design
1

Hi!

I am looking to embed this into one of my store pages so that it appears full screen:

When I try doing this (by going to “pages” then “show html” then pasting the code), the survey that I am embedding appears smooshed rather than full-screen.

Any and all help would be much appreciated. Thanks in advance!

2

@EMSC - can you please share the page where you have this screen?

3

Hi @suyash1 , thank you for your response. You can access the page by clicking this link, then clicking “Start Trial.”

https://de7bpa9kerpfpm4z-63986630870.shopifypreview.com

Thank you in advance for your help!

4

@EMSC - please add the give css to the very end of your base.css file and check, should be like the screenshot below. This is for desktop only and you can adjust numbers below.

@media screen and (min-width:990px){
#shopify-section-template--16008552513750__main .page-width
{width: 100%;    max-width: 90%;}

#shopify-section-template--16008552513750__main .tf-v1-widget iframe 
{width: 100%;    height: 300px;}
}

suyash1_0-1651141177341.png
suyash1_0-1651141177341.png1366×768 91.6 KB

5

@suyash1 thank you! Is there a way to add code (or adjust the current code) to account for mobile viewing?

Thank again!

6

@EMSC - use the same code with different media query and adjust as per the need

@media screen and (max-width:749px){
#shopify-section-template--16008552513750__main .page-width
{width: 100%;    max-width: 90%;}

#shopify-section-template--16008552513750__main .tf-v1-widget iframe 
{width: 100%;    height: 300px;}
}
7

@suyash1 This worked wonderfully, thank you so much! I seriously cannot thank you enough!