How do i make a image separate sizes on web & mobile

Store Design
1

image0 (5).jpeg
image0 (5).jpeg960×546 21.5 KB

mf help.PNG
mf help.PNG1388×678 194 KB

we are needing the image highlighted in attachments separate sizes on web/mobile, currently the web size of the image is perfect but the mobile size is to small. this is our code..

<img style=“display: block; margin-left: auto; margin-right: auto; width: 5%” <a src=https://cdn.shopify.com/s/files/1/0697/4593/4649/files/My_project-1_64.png? v=1674482069

https://munnafashion.com/ - We highlyappreciate if you could help. :black_heart:

2

@munfas_uk - add this css to the very end of your base.css file and check, adjust numbers as per the need. The internal css width:5% is making image smaller on mobile by making image 5% of the smaller screen,

this is for that particular image using class selector

@media screen and (max-width:749px){
.section-template--17636956832057__4f933533-6c94-4fc8-8544-43e7e289fdf5-padding img{
width: 70%;    max-width: 70%;}
}

suyash1_0-1674491988438.png
suyash1_0-1674491988438.png1366×768 117 KB

3

this didn’t seem to work, we are using a custom liquid. we added the code to base.css but nothing seemed to happened? this is our current code in our custom liquid :

<img style=“display: block; margin-left: auto; margin-right: auto; width: 5%” <a src=https://cdn.shopify.com/s/files/1/0697/4593/4649/files/My_project-1_64.png? v=1674482069

thank you.

4

this didn’t seem to work, we are using a custom liquid. we added the code to base.css but nothing seemed to happened? this is our current code in our custom liquid :

<img style=“display: block; margin-left: auto; margin-right: auto; width: 5%” <a src=https://cdn.shopify.com/s/files/1/0697/4593/4649/files/My_project-1_64.png? v=1674482069

thank you.

5

@munfas_uk - add !important and check

@media screen and (max-width:749px){
.section-template--17636956832057__4f933533-6c94-4fc8-8544-43e7e289fdf5-padding img{
width: 70% !important;    max-width: 70%;}
}
6

Perfect! That worked! Thanks for your rapid response time. We appreciate it :black_heart:

7

@munfas_uk - welcome, do let me know if you need any more updates.

8

Thank you! Do you know to add a link to this exact code?