0

I am having an issue with my logo on the mobile screen. It's too big and doesn't fit properly inline. Please help. I have attached what it looks like now and what it should look like. You can check the website here.

Before/Now:

Text

After (how it should look):

Text

Mihail Minkov
  • 2,078
  • 2
  • 19
  • 32
Anthony Meszaros
  • 31
  • 4
  • https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container – Womble Feb 19 '20 at 00:05
  • 1
    Show your code please. – BugsArePeopleToo Feb 19 '20 at 01:01
  • You are required to post a [mcve] here, **within your question**, and [not a link to your site](https://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it) or any other third party site. – Rob Feb 19 '20 at 01:10

1 Answers1

1

You could play with the max-width parameter of the logo setting also height: auto that way you can control the maximum size of the logo.

I tried modifying your code and what worked for me was

@media only screen and (max-width: 640px) {
    #header .header-main .custom-html img {
        max-width: 45vw;
        height: auto;
    }
}

The vw units represent viewport width percentage, so it's a variable unit, based on the viewport width.

I would prefer fixing a size though to avoid it look strange on different cell phones.

Mihail Minkov
  • 2,078
  • 2
  • 19
  • 32