How do I make my images mobile responsive?

Solved

How do I make my images mobile responsive?

csmithco
Tourist
17 0 1

I have created a rough image blog page. It shows all images centred, rolling one after the other.

 

https://cncours.com/pages/parc-ferme-1


However in Mobile it stays small. I would like it to be small on desktop, but full bleed on Mobile.

How can I do this? Currently I am using this code on the page's custom css for desktop:

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 35%;
}
Accepted Solution (1)

Guleria
Shopify Partner
3186 620 891

This is an accepted solution.

Use this css to make image full-width on mobile 

@media screen and (max-width: 768px) {
.center { 
    width: 100%;
}
}

 

Thanks

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me. - Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
- Support me PayPal

View solution in original post

Replies 3 (3)

Guleria
Shopify Partner
3186 620 891

This is an accepted solution.

Use this css to make image full-width on mobile 

@media screen and (max-width: 768px) {
.center { 
    width: 100%;
}
}

 

Thanks

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me. - Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
- Support me PayPal
csmithco
Tourist
17 0 1

Amazing. Thank you!

CyberCraft_11
Shopify Partner
19 1 2

Hello @csmithco 

You just need to follow below steps:

1. Copy the below code and paste it below the code where you put the above mentioned css.

@media (max-width: 989px) {
  #shopify-section-template--21500548251944__a00bcc89-9c48-47b7-8b3c-6b1df8d17211 .center {
    width: 60%;
  }
}

@media (max-width: 768px) {
  #shopify-section-template--21500548251944__a00bcc89-9c48-47b7-8b3c-6b1df8d17211 .center {
    width: 90%;
  }
}

Don't forget to save the file after changes



If this solution helps you, then kindly like and accept the solution as solved.

Best regards

CyberCraft_11