Adjust custom image size on login page on mobile vs desktop

Store Design
,

Topic summary

A Dawn theme user needed help adjusting a custom image on their login page to maintain consistent width across devices. The image appeared too large on desktop, correctly sized at half-screen, and too small on mobile.

Solution provided:

  • Add CSS code to Assets > base.css
  • Set desktop image width to a fixed pixel value (suggestions included 650px or 40%)
  • Use media query for mobile (max-width: 660px or 750px) to set width to 100%
  • Apply to .image_login img class

Outcome:
The issue was resolved successfully. The user confirmed the CSS solution worked perfectly, allowing the image to match the login box width across all screen sizes.

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

Hello,

This is my first question on the Shopify community and I’ll start with saying I’m very new to code. I’m using the Dawn Theme. I have added an image to my customer log in page and figured out how to center it, but on desktop the image looks too big, when the desktop if half screen it looks just right, and on mobile it looks too small. I’d like for the image to stay the same width as the login boxes on all devices. Can someone help with figure out which code to change to make this happen? Thank you in advance!

https://wesellcandles.com/account/login

thumbnail_sc.jpg
thumbnail_sc.jpg739×1280 50.2 KB

Screenshot 2022-12-02 114802.jpg
Screenshot 2022-12-02 114802.jpg1915×738 62.6 KB

Screenshot 2022-12-02 114742.jpg
Screenshot 2022-12-02 114742.jpg922×713 32.4 KB

2

@OpenBoxOutlet
Hello,

.image_login img {
	width: 650px;
}
@media only screen and (max-width: 660px) {
.image_login img {
	width: 100% !important;
}
}

Add this CSS at the bottom of Online Store-> Theme->Edit code->Assets->base.scss.liquid

Like This

oscprofessional_0-1670052700079.png
oscprofessional_0-1670052700079.png1181×772 36.5 KB

1 Like
3

Hi @OpenBoxOutlet ,

Go to Assets > base.css and paste this at the bottom of the file:

.image_login img {
	width: 40% !important;
}
@media screen and (max-width: 750px) {
	.image_login img {
		width: 100% !important;
	}
}

Hope it helps!

4

Thank you so much! This worked perfectly!