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.
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:
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.
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:
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.
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.
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?
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