Unable to adjust the width of owl image

HTML & CSS
1

NewZip.zip (3.5 MB) @PaulOB @Erik_J. Thank you soo much for your help on my last project. I tried to adjust the width on the image on the home page slider but it wont change. I was able to adjust the height, position the text, change the white space gap, but for some reason i cant change the width. I will attach the whole project.

2

here is the css.

.hr-img img {
    height: 200px;
	width: 200px;
	display: block;
	position: relative;
	left: -34px;
	top: 50px;
	opacity: 0;

Preformatted text

3

i was able to solve by playing around with some image css…

.hr-img img {
	max-width: 200px;
    height: 200px;
	position: relative;
	left: -34px;
	top: 50px;
	opacity: 0;
4

If you adjust the width of the image but not the height, it will distort the image dimensions. Maybe that doesn’t matter to you, but it’s usually better to set height to auto, to let it respond with the width.

4 Likes
5

You actually right the image is distrorted.

7

The issue you’re going to run into is using max-width, which is fluid/responsive and height, which is fixed. Try removing the height, and change the max-width to a percentage of the container - that may give you the results you are looking for while maintaining responsiveness over various sizes.

3 Likes
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.