Tablet rotation distorts logo in header Topic is solved

[mikewitherell]

I have recently migrated from 3 to 4. I like it. My template called Flex looks nice, but when I rotate to portrait mode on an iPad tablet, the header logo image gets distorted and it is stretched horizontally across to meet the hamburger menu. Same distortion on smartphone. I tested in Chrome and Safari. Same distortion of the brand logo graphic.

[Pavel-ww]

Hi. Explore this through the dev tools of your browser and make adjustments to CSS

[mikewitherell]

Hmmmm. I wish I wasn’t such a newbie so that I could dev the css. But I’m a newb.

[Pavel-ww]

Hmmmm. I wish I wasn’t such a newbie so that I could dev the css. But I’m a newb.

Hi. In this case, always provide a link to your site. Nobody has a magic ball here to see your problem

[mikewitherell]

trainingonsite.com

[Pavel-ww]

trainingonsite.com

Try this code

Code: Select all

@media (max-width: 991.98px) {
    #sp-logo .sp-default-logo,
    #sp-logo .sp-retina-logo {
        width: inherit;
    }
}

[mikewitherell]

Thank you for the CSS code, Pavel.
Would you also give me a hint where to paste this code? I have never done that before.

[Pavel-ww]

Thank you for the CSS code, Pavel.
Would you also give me a hint where to paste this code? I have never done that before.

Hi. Add it to custom.css file. Your template is based on Helix 3. Read Helix 3 documentation about custom.css file

[mikewitherell]

Thank you Pavel! That works fine. I pasted your css code into the 3rd box labeled Custom CSS. I am new to J4 and had not seen that tab before. Easier than J3. Why the highly-specific number 991.98px?

[Pavel-ww]

Why the highly-specific number 991.98px?

Hi. For accurate operation on high -resolution devices. It is bootstrap 5 breakpoint. https://getbootstrap.com/docs/5.2/layout/breakpoints/

Your site uses bootstrap

[mikewitherell]

Fascinating! Thanks for the interesting reading and for the CSS code!

[Pavel-ww]

You are welcome