making shopify site mobile friendly

chelseaj
New Member
5 0 0

I'm confused why every shopify isn't mobile friendly by default! My site the header image is not adapting to screen size. How can I fix?

 

https://hasaddates.in/

password: priska

0 Likes
Jason
Shopify Expert
10354 155 1990

The image becomes smaller on this side so what are you expecting to happen on mobile? Can you post a screenshot or mockup of that?

Generally you would not put text like that on image sections that scale based on screen size as they will be hard to read on smaller sizes. This is less about the responsive on mobile and more about the choice and style of image. I am interesting in what you want a customer to see as that will help drive the conversation forward.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
Ninthony
Shopify Partner
1897 285 745

This is a suuuuuper  common thing people are confused about. Your website is actually responsive, you see how your image gets smaller with your screen size? Well, that's a responsive image. It's adapting to the size of your screen. You just haven't thought about it enough. Like Jason asked, I'd be interested to know what you'd expect would happen? Usually, people are upset because the opposite is happening. Their image is being cropped off at the sides as opposed to the image scaling with the page. Here's an example of the problem:

https://codepen.io/ninthony/pen/oNboYoJ

The problem is just in the nature of the device dimensions. Desktop dimensions are wider than they are tall, and mobile is taller than wide. Your image is either going to get small, or get cropped. There's nothing you can really do about it, that's why Jason said you generally should not put text on an image. What you want to do is use an image and add the text on through code. Alternatively you can swap out a different image on a mobile size with a media query. 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Olivia
Shopify Staff
Shopify Staff
577 57 113

Hey, @chelseaj.

Welcome to Shopify Community. My name is Olivia and I work here.

Thank you so much for connecting with our network and sharing your concerns. To reiterate what @Jason and @Ninthony have shared, your theme is definitely responsive and mobile friendly. I also highly recommend that you refrain from using text in your image to ensure a better viewing experience across all devices.

Furthermore, it looks like you might be using a Shopify-developed theme? Here's an example of how your theme is supposed to respond in a mobile environment:

12-07-322qa-lliio

You will notice that the original image is re-sized to fit smaller screens, instead of being cropped as many other themes do. 

Please expand on what effect you were hoping for and we can explore if this is a customization our in-house devs can support. To be absolutely sure, connect with our 24/7 Support team directly and share your feedback for next potential steps.

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
chelseaj
New Member
5 0 0

Hi everyone. Thank you for your responses. When I took a look at my site on the mobile it was only cropping the image and not adjusting the size of the image to fit the screen.

I understand adding text on the image isn't preferred, but I could not find out how to move my text overlay how I wanted it. I also couldn't figure out how to move the shop now button. So I was left with this image as I don't have a designer on hand to implement anything different.

I hired a developer to make the banner image mobile responsive, before that it was just cutting off and not adapting the screen.

0 Likes
Olivia
Shopify Staff
Shopify Staff
577 57 113

Thanks for your response, @chelseaj.

I appreciate you following up with us and letting us know.

Are you currently working with a developer on your site at this point? Do you still have any questions or concerns our community can potentially address?

Warm regards,

Olivia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
chandrasekhar
Excursionist
32 0 3

Shopify is an excellent platform when it comes to providing a seamless mobile user experience. Every theme you'll find in the Shopify store is fully responsive, which means it adapts to the screen size of the device it's presented on. If you want to make your Shopify store truly mobile-friendly like Shopify mobile app, responsiveness alone isn't enough. To convert a mobile-friendly website into an application, you need to pay attention to many more things.

1. Make Your Website Responsive
2. Make Information People Look for Easier to Find
3. Don’t Use Flash
4. Simplify Your Navigation
5. Keep the Main Navigation Bar in Sight
6. Include the Viewport Meta Tag
7. Turn Autocorrect for Forms
8. Make Your Button Sizes Wide Enough to Work on Mobile
9. Use Large Font Sizes
10. Compress Your Images and CSS
12. Provide an Easy Way to Switch to Desktop View
10. Regularly Analysis Mobile Testing

0 Likes