Reduce size of "click to enter" image on desktop only

Store Design
,

Topic summary

A user has a “click to enter” image on their homepage that displays well on mobile but appears too large on desktop. They want to reduce its size on desktop without making it smaller on mobile.

Solutions provided:

Multiple support teams (GemPages, PageFly, and Litos) offered CSS-based solutions:

  • Media query approach: Add @media screen and (min-width: 750px) targeting desktop devices specifically
  • Max-width property: Set max-width: 450px on the .enter-button img element
  • This allows the image to remain its current size on mobile while constraining it on larger screens

Outcome:

The user confirmed all suggested solutions worked successfully. They settled on a min-width value of 550px as their optimal size.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hello,

So I currently have a “click to enter” image as my homepage, it works well.

It exists with this code:

{% if template.name == 'index' %}
        
![Hennerton logo|1200x600](upload://oCaGp97ZCjd8qlGb3IlUQUIASzt.gif)

      {% endif %}

It is kept nice and central with this code:

{% if template contains 'index' %}

{% endif %}

It looks great on mobile but it is huge on desktop. Is there a way to get it a reasonable size on desktop without having it become tiny on mobile? I don’t want it any smaller than it already is on mobile.

Preview link for my site is: https://cztnwrh9s3509j7z-55043031221.shopifypreview.com

Thanks!

Elliott

2

Hello @Elliott94

It’s GemPages support team and glad to support you today.

You can change code from

GemPages_0-1676339002814.png
GemPages_0-1676339002814.png387×386 13.4 KB

to

GemPages_2-1676339367652.png
GemPages_2-1676339367652.png585×466 21 KB

{% if template contains 'index' %}

{% endif %}

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

3

Hi @Elliott94

You can change to from here

PageFlyVictor_0-1676339842676.png
PageFlyVictor_0-1676339842676.png790×406 16.7 KB

To

{% if template contains 'index' %}

{% endif %}

Hope this answer helps.

Best regards,

Victor | PageFly

4

Hi @Elliott94 ,

Please add code here:

Screenshot.png
Screenshot.png905×453 20.9 KB

@media screen and (min-width: 750px) {
  .enter-button img {
        max-width: 450px;
  }
}

it will help you to add code just for desktop.

Hope it helps!

5

Thank you @GemPages @Litos @PageFly-Victor all of these answers worked. My golden number ended up being min-width 550px.

Thank you all so much!