Edit CSS

Thanks Tom!

That was really helpful! :)

No problem! :)

Hi Tom!

That was really helpful!

However on my mobile phone the logo is still below the header. Is there any way I can reduce the size of the logo (maybe to a thumbnail size) so that it can fit beside the header?

You can try something like this:

@media (max-width:768px) {
      .site-logo img {
            max-width: 100px;
      }
}

You can adjust the width as needed :)

Hi Tom,

Sorry for the confusion, I was referring to the mobile site :B I would like the logo on the desktop site to remain the same size.

Sorry about that - I adjusted my code above :)

Thanks Tom!

Now the logo is smaller but still at below the header - how do I shift the logo to the left of the header as per my desktop site?

Also, now that the header is a lot smaller, the page title is way too big in comparison. Is there any way to shrink the page title (only on the mobile site)?

Hmm, you can try this..

@media (max-width:768px) {
      .site-branding {
            display: inline-block;
            max-width: 70%;
      }
      .header-image {
            float:left;
            margin-right: 15px;
      }
      .main-title {
            font-size: 20px;
      }
}

Might need some tweaking, but it should get you on your way :)

Hi Tom,

Thanks for the suggestion! It was really helpful (I had zero knowledge of html coding before this). I ended up with this. Not sure if it's the best way to code - do you reckon it would look fine on all mobile devices?

@media (max-width:768px) {
.header-image {
float:left;
margin-top: -107px;
margin-left: -22px;
margin-right: 20px;
max-width: 75px;
}
.main-title {
float: right;
margin-right: -10px;
margin-top: -55px;
font-size: 22px;
max-width: 85%;
}
.site-description {
font-size: 14px;
margin-left: -20px;
margin-right: -20px;
}

Negative margins are usually best to avoid if possible, but I think that looks good for what you're trying to do.

You're missing a closing curly bracket though - your code should look like this:

@media (max-width:768px) {
      .header-image {
            float:left;
            margin-top: -107px;
            margin-left: -22px;
            margin-right: 20px;
            max-width: 75px;
      }
      .main-title {
            float: right;
            margin-right: -10px;
            margin-top: -55px;
            font-size: 22px;
            max-width: 85%;
      }
      .site-description {
            font-size: 14px;
            margin-left: -20px;
            margin-right: -20px;
      }
}

Oh yes...that. Thanks so much for all the advice! Appreciate it very much.

You're welcome :)