Solved

How to resize custom liquid only on desktop?

vcockerham2002
Tourist
26 0 1

Hi There,

I made a catalog in Canva and inserted it into a custom liquid.  It is the perfect size on mobile, but WAY to big on the desktop.  I would like it to be about half the size so you can see the whole thing without scrolling.  How to I do this? Here is the page: https://appleblossomgiftbaskets.com/pages/real-estate-catalog?_pos=2&_psq=real&_ss=e&_v=1.0

Accepted Solution (1)

biznazz101
Shopify Partner
494 48 88

This is an accepted solution.

Try adding this to your Custom Liquid sections Custom CSS Settings:

{max-width: 588px;
max-height: 441px;
margin: auto;
margin-bottom: 80px;}

 

Result (Desktop/Mobile):

biznazz101_0-1709090743569.pngbiznazz101_1-1709090770045.png



Hope that helps!
@biznazz101 

Don't hesitate to reach out for more help with your store.
SEE OUR TASK STORE or check us out via our profile! FREE STORE AUDIT

View solution in original post

Replies 3 (3)

biznazz101
Shopify Partner
494 48 88

This is an accepted solution.

Try adding this to your Custom Liquid sections Custom CSS Settings:

{max-width: 588px;
max-height: 441px;
margin: auto;
margin-bottom: 80px;}

 

Result (Desktop/Mobile):

biznazz101_0-1709090743569.pngbiznazz101_1-1709090770045.png



Hope that helps!
@biznazz101 

Don't hesitate to reach out for more help with your store.
SEE OUR TASK STORE or check us out via our profile! FREE STORE AUDIT
vcockerham2002
Tourist
26 0 1

Thank you, where in the code should I insert this?  here is the code canva provided that i put into the custom liquid section:

 

<div style="position: relative; width: 100%; height: 0; padding-top: 75.0000%;
padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;
border-radius: 8px; will-change: transform;">
<iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;"
src="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAF9KX_2axY&#x2F;xMVxOp3Vn2zT6D-Aj1BSUQ&#x2F;view?embed" allowfullscreen="allowfullscreen" allow="fullscreen">
</iframe>
</div>
<a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAF9KX_2axY&#x2F;xMVxOp3Vn2zT6D-Aj1BSUQ&#x2F;view?utm_content=DAF9KX_..." target="_blank" rel="noopener">Real Estate Catalog</a> by veronica

vcockerham2002
Tourist
26 0 1

I just noticed the section you were talking about.  got it! thank you!