How to make image smaller while its responsive? codepen link inside

Hi everyone, I started learning front-end web development as a hobby. So i’m practising now with html-css-bootstrap 4. This is my exercise. I like the responsiveness while at small screen size but i want to make the image a little bit smaller on desktop. When i try it, i can make it smaller but non-responsive. When i set a height on it i cant center it anymore text-center didnt work. Any suggestions?

https://codepen.io/anarkinarsil/full/KvZeeW/

You can use the Boostrap 4 breakpoints. With media queries you can style your elements only for certain resolutions.

An example for your image:

@media (min-width: 992px) {
  img {
    width:800px;
  }
}

That makes it so the image will be 800px large until the screen reaches 992px. Past that resolution, the image will go back to be his original styles. You can then add a “text-center” class to the div containing the image, to have it always centered.

1 Like

thanks for such a good explanation :smiley:

it worked,thanks :smiley: