How to make hero image reponsive

hi i have been recently working on a page with html and css as i’m new to this field and i was trying to create a hero image which have a button and a hover logo in the same line the problem is when i resize the browser the image completely shrink and it messes up the text a little bit as it shown in that picture

Hi,

Try to apply the width property to that image in CSS to be equal to 100%.

If you provide us a codepen.io link to your code it will be easier to help you.

1 Like

hello,
i have set the width to 50% to it because i don’t want it to take the full width as you can see i have another cover behind it
here’s how it look like full size

Hello
Try making your logo and buttons in a single div container and make your image as background to this container.

1 Like

If I understand correct, you would like to achieve the following once you resize the browser’s window (make it smaller for example):

  1. You want those two buttons to be on the same line
  2. You want text to be not messed
  3. You want that image (jeans on legs) not be a stick like it is here:

Am I correct?

1 Like

yes you are somewhat correct i want the hero text to not mess up as well as the hero image the button look okay and i added another cover to the hero section too make it display on the right and the left of the hero section
one more thing how do it upload images on codepen.io website
https://codepen.io/aminedz24/pen/pozdPQL

thank you oussama that was a good idea.

You are welcome Camper