How can I resize the main image in Debut Theme for mobile view?

How can I resize the main image in Debut Theme for mobile view?

RMLifeGoods
Tourist
5 0 1

Hello!

 

I'm having trouble with my Debut Theme's main image. It shows great on a computer however for mobile view it's too large. How do I change it for mobile only?

 

I've been researching for two days and have seen in the shopify discussion people asking the same question the only problem is the Debut theme does not have the assets/theme.scss.liquid file and I cannot add the code

 

@media only screen and (max-width: 749px){ a.site-header__logo-image img { max-width: 50px !important; } .main-content{ padding-top: 13px !important; } }

 

I even tried adding the above code to layout/theme.liquid or assets/theme.js and it doesn't work.

 

Any other suggestions? I'd greatly appreciate it! My website is: www.rmlifegoods.com

Replies 4 (4)

diego_ezfy
Shopify Partner
2971 571 922

@RMLifeGoods 

I believe this tutorial solves your exact problem. Let me know if you need any further assistance.

Kind regards,
Diego

RMLifeGoods
Tourist
5 0 1

Hello!

 

Thank you for the reply. I don't think that is what I am looking for it seems to be directed towards the logo. On the Debut theme you have a main image on the website (rmlifegoods.com) <-- if you take a look at our site on your mobile device you will see it's cut off which is typical of the Debut theme... I just want that image to be resized to fit mobile view. I do not want it to change for computer, just mobile. Any suggestions on that?

 

*I included a screenshot of our website on my mobile device. The image is cut off on the left and right sides.

 

@diego_ezfy 

RMLifeGoods
Tourist
5 0 1

I'm all set I figured it out it was soooooo simple just a click of a button - thank you though!!!

dh0909
Visitor
1 0 0

may i know how you fixed it?