Responsive logo

Try adding the following:

.logo {
  max-width: 100% !important;
}

This will change the logo’s maximum width to 100% of the container it’s in which will limit it from stretching outside the width of the screen at any size.

Ok so it works fine on mobile screen now but it’s made it too small on my comp screen?

Do I also need to make the container 100% of the screen size?

Okay try the following instead:

@media all and (max-width: 600px) {

  .logo {
    max-width: 100% !important;
  }
}

This will have the same effect, but only on screens that are 600px or smaller. This way, the logo won’t be as restricted on larger screens. You can change the “600px” value as you see fit.

Ok that kind of works, but I’m now using this

@media all and (min-width: 800px) {

.site-title .logo {
max-width: 9999px;
max-height: 9999px;
}

so that my logo expands to full size on a big screen. I t looks great on the computer.

Then when I view it on my mobile its way too small. I’d ideally like it to scale and fill the mobile screen as big as possible side to side, as well, like it does on my computer, but instead it stays really tiny. It is also (on mobile) right up top against the nav menu. There is no space there between top of logo and nav menu and it looks wrong.

I’ll leave my site off construction mode so you can see it what I mean as its hard to explain.

https://www.brokendownhq.co.uk

Any ideas ?

Thanks Ben

Just to clarify, i’d like the logo (Broken Down) to be as wide as the mobile div container, whatever the screen size. I know that width and height rely on each other. is there a way of setting the height and width to auto? hmmm

Thanks for the link. Here’s the complete CSS to do that:

.site-title .logo {
  max-width: 100%;
  max-height: 100%;
}
@media all and (min-width: 800px) {

  .site-title .logo {
    max-width: none;
    max-height: none;
  }
}

The difference now is that the logo will fill the screen up without overflowing until 800px where the container becomes more restricting. At that point, the logo’s size restrictions will be removed and it can then be wider than the container.

Ben that is awesome. Perfect!

The website is pretty much complete now ??

I notice the top of the logo still sits quite close to the top nav menu on mobile. Anyway to increase this space a little for aesthetic purposes?

Thanks

Gwil

Great!

You can give the logo a little more space up top like this:

.site-title .logo {
  margin-top: 12px;
}