- This topic has 26 replies, 3 voices, and was last updated 8 years, 8 months ago by Tom.
-
AuthorPosts
-
August 3, 2015 at 12:04 am #125877SSYH
Thanks Tom!
That was really helpful! π
August 3, 2015 at 9:40 am #125993TomLead DeveloperLead DeveloperNo problem! π
August 5, 2015 at 7:39 pm #126965SSYHHi 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?
August 6, 2015 at 12:08 am #126995TomLead DeveloperLead DeveloperYou can try something like this:
@media (max-width:768px) { .site-logo img { max-width: 100px; } }
You can adjust the width as needed π
August 6, 2015 at 2:08 am #127017SSYHHi 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.
August 6, 2015 at 9:12 am #127099TomLead DeveloperLead DeveloperSorry about that – I adjusted my code above π
August 11, 2015 at 1:57 am #128344SSYHThanks 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)?
August 11, 2015 at 4:14 pm #128474TomLead DeveloperLead DeveloperHmm, 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 π
August 12, 2015 at 8:53 pm #128838SSYHHi 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;
}August 13, 2015 at 12:20 am #128860TomLead DeveloperLead DeveloperNegative 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; } }
August 17, 2015 at 2:22 am #129876SSYHOh yes…that. Thanks so much for all the advice! Appreciate it very much.
August 17, 2015 at 8:54 am #129944TomLead DeveloperLead DeveloperYou’re welcome π
-
AuthorPosts
- You must be logged in to reply to this topic.