December 9, 2013 at 7:28 pm #77934
I’m working with this theme currently, & I know there are quite possibly a number of ways to go about the above – but I was just wondering if anyone could recommend the best way to go about this.
Is it simply to load a different logo depending upon @media queries?
Or is there a smarter way – specifically with regards to this theme.
I would prefer to retain the home link ability of the standard text based header – with logo image replacement.
Thanks in advance,
JasDecember 10, 2013 at 1:01 am #77999December 10, 2013 at 2:42 pm #78144
Hey @nutsandbolts – thanks for the reply.
It’s actually being developed locally – so the best I can do are the attached screenshots – hope that is of some help?
As you can see, I’m loading a completely different logo should the screen size be max-width: 768px – not ideal.
I’m also keen to have the logo retain it’s ahref to home, I’m guessing I’m applying the styles in the wrong place & I should know better, but I’m trying to do too many things at once (it’s that time of year)December 10, 2013 at 2:44 pm #78146
Usually if you’re adding the logo manually in the stylesheet, you can add
background-size: contain !important;to the CSS to have the image resize for all screens. It’s hard to tell you exactly how that needs to work without being able to see the live site.
December 10, 2013 at 2:51 pm #78151
Now that’s a css rule I’ve not come across before – I’ll give that a go & see how I get on.
ThanksDecember 15, 2013 at 4:17 pm #79295
Hi @nutsandbolts, I used
background-size: contain !important;& that worked a treat.
Thank you, I’d never come across that css rule before – very handy.December 15, 2013 at 5:18 pm #79298
Glad I was able to help! If you ever have other CSS rules that should work but don’t, try adding !important before the semicolon. Many times that will force it to override whatever is keeping the rule from working.
You must be logged in to reply to this topic.