- Posts
Hi,
I am struggling with headers on my Crio site. I set up the header with a logo and a menu. It looks fine – see ‘Original’ image.
But on any different screen – my smaller monitor, or a phone, or even if I inset the viewing window on my larger monitor, the logo gets huge and the menu drops onto a second line – see ‘Inset’ image.
As far as I can see, the menu gets so long it has to go on a second row and the logo then fills the width of the screen. How do I stop the logo doing that, i.e., how do I keep the logo at a reasonable size even if it has to go on a second row?
Thanks,
Andy
Hi Andy,
Thanks for reaching out with your Crio WordPress Theme questions. I’m sorry but it seems your screenshots did not transfer over correctly, here’s a guide on sending screenshots to our forum using snipboard.io. It would also be a great help if you could link us to your site directly so we can inspect the logo using our browser tools.
My guess is if you’re using Crio you can use a media query like the one below to adjust the logo dimensions for smaller screen sizes.
@media only screen and (max-width: 600px) { .custom-logo-link:not(.bgc_logo) { width: 280px !important; height: 80px !important; } }You would add this bit of CSS directly to your WordPress customizer CSS/JS Editor section, but we’d need to inspect the site logo just to be sure the CSS matches up correctly.
Thanks Andy, we’re looking forward to assisting you further with this!
Brandon,
Sorry about the images. Trying again because I couldn’t get your CSS code to work.
I set up the header as I want it when the window is full screen:
https://snipboard.io/U0vhSy.jpgBut on any different screen – my smaller monitor, or a phone, or even if I inset the viewing window on my larger monitor, the logo gets huge and the menu drops onto a second line:
https://snipboard.io/q07DuB.jpgThanks,
Andy
Thanks Andy!
We were able to view the screenshots this time but I couldn’t quite make out your website URL. Can you send that over as well so that we can inspect the site using our browser tools?
Hey Andy!
Thanks for sending over the URL. I checked on my end and it seems like the logo is responding properly to each screen size when checking using my browser tools. Did you manage to resolve this on your end?
Brandon,
Any more avenues to pursue as I am still struggling with this? The header logo is fine on my wide landscape monitor but if I narrow it down or use my portrait monitor I am still getting the same huge logo.
When the window is full screen, the log is approximately 25% of the screen width:
https://snipboard.io/U0vhSy.jpgBut on any narrower screen, the logo gets huge and is about 90% of the screen width.
https://snipboard.io/q07DuB.jpgHow do I keep the logo from getting so big?
Thanks,
Andy
Hey Andy,
I tried inspecting your URL again to see if we could provide a CSS fix but the site looks like it may have been removed. The best way to incorporate the correct dimensions for your image is to adjust the image before uploading it to your website. The logo looks to be really big in its original format and that’s why it’s displaying as such on screen-sizes that don’t fit your CSS break points.
You can use free software like pixlr.com to adjust your image dimensions and that will prevent it from appearing so large.
I really hope this helps! Let us know if we can answer anything else for you.
Brandon,
Making the image smaller worked like a charm.
Thanks for the help,
Andy
Awesome to hear Andy!
I’m happy resizing your logo worked for you. It’s much better to optimize images off site before adding them to WordPress. In my opinion they’re way easier to work with this way.
Thanks Andy, please let us know if there’s anything else we can answer for you we’re always here to help!
- The topic ‘Responsive Header Images Displays Differently On Smaller Screens’ is closed to new replies.
