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

Resizing To Look Better On Larger Desktop Screen

Solved

Resizing To Look Better On Larger Desktop Screen

dproudfoot
Visitor
2 0 1

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. 

 

cap image.JPG

 

Accepted Solution (1)

namphan
Shopify Partner
2777 358 407

This is an accepted solution.

Hi @dproudfoot,

Have you tried this option?

Screenshot.png

It will help you display the image in the correct size and the image will always display well on devices.

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

View solution in original post

Replies 4 (4)

PaulNewton
Shopify Partner
8031 688 1649

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


namphan
Shopify Partner
2777 358 407

This is an accepted solution.

Hi @dproudfoot,

Have you tried this option?

Screenshot.png

It will help you display the image in the correct size and the image will always display well on devices.

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
dproudfoot
Visitor
2 0 1

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!

namphan
Shopify Partner
2777 358 407

Hi @dproudfoot,

It's my pleasure

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com