How to resize custom liquid only on desktop?

Shopify Discussion

Topic summary

A user embedded a Canva catalog into Shopify using custom liquid code. The catalog displays correctly on mobile but appears too large on desktop, requiring scrolling to view the full content.

Solution Provided:
Another user suggested adding CSS to control the desktop display size:

  • max-width: 588px
  • max-height: 441px
  • margin: auto and margin-bottom: 80px

The solution included before/after screenshots showing the improved desktop and mobile layouts.

Implementation:
The original poster initially asked where to insert the CSS within their existing Canva-provided iframe code. After clarification about the Custom CSS Settings location, they confirmed the solution worked successfully.

Status: Resolved - the catalog now displays at an appropriate size on desktop while maintaining mobile compatibility.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
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

2

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.png
biznazz101_0-1709090743569.png2703×1525 252 KB

biznazz101_1-1709090770045.png
biznazz101_1-1709090770045.png1177×1364 163 KB

Hope that helps!
@biznazz101

1 Like
3

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

Real Estate Catalog by veronica
4

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