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,
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)
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.
Now that’s a css rule I’ve not come across before – I’ll give that a go & see how I get on.
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.
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.
Are you a blogger, web designer, developer, or website owner looking to generate more income?
Promote products for the largest and fastest growing online website platform as part of our affiliate program.