Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hello,
My Shopify image banners look great on mobile and laptop, but when I open it on my desktop PC monitor (2560x1440 and 3840x2160), the banner images are zoomed in and look awful. I included a picture below that shows how it is cut off on the top and bottom. I am using the Dawn theme. I have tried other code solutions that people have offered and nothing seems to fix the problem. Just want it to look good on any device that someone may view it on. Any help is greatly appreciated.
Solved! Go to the solution
This is an accepted solution.
Hi @dproudfoot,
Have you tried this option?
It will help you display the image in the correct size and the image will always display well on devices.
Hi @dproudfoot 👋 For wide aspect ratios make sure the image itself has a wide aspect ratio.
Otherwise it can be a pain to get CSS to present it properly, often by cropping it in or need javascript
Who knows with nothing to inspect but an image.
Showing only a screenshot is like walking into a garage and showing a photo of car instead of bringing the car.
Without a public url for others to inspect your not gonna get very far.
Keep others in mind when looking for solutions to your problems.
Other people aren't mind readers or have access to what your working on unless you explicitly put in the effort to communicate.
READ: https://community.shopify.com/c/blog/how-to-get-support-from-the-community/ba-p/2254458
No effort in communication is a big indicator of future failure by wasting time and money don't make a habit of it.
Merchants that need this customization fixed can contact me for services.
Contact info in forum signature below ⬇ ⬇ ⬇.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
This is an accepted solution.
Hi @dproudfoot,
Have you tried this option?
It will help you display the image in the correct size and the image will always display well on devices.
Namphan, thank you for your reply. I chose adapt to first image but now my other slides are blank, not displaying my images anymore. Am I missing something? I am new to this to hopefully it isn't something simple that Im just not aware of.
EDIT: I figured it out! Just had to change the first image as it was still default. Thank you for your help!
Hi @dproudfoot,
It's my pleasure