How do I make my images mobile responsive?

Store Design
,

Topic summary

A user created an image blog page with centered images that display correctly on desktop but remain small on mobile devices. They shared their current CSS code, which centers images on desktop using:

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 53%;
}

Solution provided:
Another user suggested adding a media query to make images full-width on mobile:

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

This CSS targets screens 768px or smaller and sets image width to 100%, allowing them to fill the mobile viewport. The original poster confirmed this solution worked successfully.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
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%;
}
2

Use this css to make image full-width on mobile

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

Thanks

1 Like
3

Amazing. Thank you!