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
Try to apply the
width property to that image in CSS to be equal to
If you provide us a codepen.io link to your code it will be easier to help you.
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
Try making your logo and buttons in a single div container and make your image as background to this container.
If I understand correct, you would like to achieve the following once you resize the browser’s window (make it smaller for example):
- You want those two buttons to be on the same line
- You want text to be not messed
- You want that image (jeans on legs) not be a stick like it is here:
Am I correct?
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
thank you oussama that was a good idea.
You are welcome Camper