Header image affected by image gallery css Options

[nootkan]

Hi everyone, I need another set of eyes to help me figure out what is affecting my header image size. If I remove the width and height properties the image shows like it should but then doesn't pass the cls score in googles page speed test. When I add the width and height properties the image gets stretched somehow. I thought it had something to do with the image gallery css conflicting with the header img css but nothing I try seems to make a difference. If anyone can see what wrong please advise.

Thanks.

https://www.bassonhook.com/braggn/Braggn.html

[nootkan]

Hi Pandy, I had originally removed those instances of css but it makes the image look unprofessional because it won't center when viewed at a reduced resolution on smart phones.

The exact same css set up exists for the main pages without issues which is why I wanted to see what was causing it on my braggn/braggn.html and about.html pages.

I have removed the img css and related media queries until I can find another way to achieve what I want.

Thanks for all your help and direction.

[Christian J]

Hi Pandy, I had originally removed those instances of css but it makes the image look unprofessional because it won't center when viewed at a reduced resolution on smart phones.

How about using margin instead of padding for the centering? Margin shouldn't affect the box model regardless of box-sizing value. Or you could remove the extra box-sizing rule below.

The exact same css set up exists for the main pages without issues which is why I wanted to see what was causing it on my braggn/braggn.html and about.html pages.

No, https://www.bassonhook.com/braggn/css/bassonhook.css contains both

CODE

body {
    box-sizing: border-box;
}

and

CODE

* {
    box-sizing: border-box;
}

while https://www.bassonhook.com/css/bassonhook.css only contains

CODE

body {
    box-sizing: border-box;
}

The "box-sizing" property is not inherited, so the styling on the BODY element shouldn't affect the IMG element. See also https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

[nootkan]

Hi Pandy, I had originally removed those instances of css but it makes the image look unprofessional because it won't center when viewed at a reduced resolution on smart phones.

How about using margin instead of padding for the centering? Margin shouldn't affect the box model regardless of box-sizing value. Or you could remove the extra box-sizing rule below.

The exact same css set up exists for the main pages without issues which is why I wanted to see what was causing it on my braggn/braggn.html and about.html pages.

No, https://www.bassonhook.com/braggn/css/bassonhook.css contains both

CODE

body {
    box-sizing: border-box;
}

and

CODE

* {
    box-sizing: border-box;
}

while https://www.bassonhook.com/css/bassonhook.css only contains

CODE

body {
    box-sizing: border-box;
}

The "box-sizing" property is not inherited, so the styling on the BODY element shouldn't affect the IMG element. See also https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Christian, thanks for this. It turned out to be the padding for the about.html page and a combination of the border-sizing:border-box and padding for the braggn.html page. I removed the box sizing css from the body tag as it was required in the second instance for the gallery. Once I changed the padding to margin in both pages all is good again.

Much appreciated.

This thread is now resolved!