Logo at small mobile size
Permalink Browser Info Environment
Hello
I have tried to fix this myself but I am stumped. I have a relatively large logo on the site which is fine until you go to very small mobile phone size (iphone 5 for example) when the logo pops out of the header and sits underneath looking very messy. This happened after I modified the search bar to make the icon open an email address therefore there was less room on the header. I think this would happen on your Modena theme too if your logo was bigger as the navigation pops out of the header there too. Also the dropdown search box (now an email button) jumps quite far down the page.
However as soon as you start scrolling, the logo resizes as specified in the theme options and it looks perfect and the search box sits nicely underneath the header. I tried to make the smallest breakpoint load the resized logo before scrolling (ie when you first load the page) but I'm afraid I am completely stuck. Do you have a better idea? Or point me in the right direction?
I hope I have explained myself!
The site is here:
https://www.hereisyoursite.co.uk/icmi/...
Thank you!
Lucy
I have tried to fix this myself but I am stumped. I have a relatively large logo on the site which is fine until you go to very small mobile phone size (iphone 5 for example) when the logo pops out of the header and sits underneath looking very messy. This happened after I modified the search bar to make the icon open an email address therefore there was less room on the header. I think this would happen on your Modena theme too if your logo was bigger as the navigation pops out of the header there too. Also the dropdown search box (now an email button) jumps quite far down the page.
However as soon as you start scrolling, the logo resizes as specified in the theme options and it looks perfect and the search box sits nicely underneath the header. I tried to make the smallest breakpoint load the resized logo before scrolling (ie when you first load the page) but I'm afraid I am completely stuck. Do you have a better idea? Or point me in the right direction?
I hope I have explained myself!
The site is here:
https://www.hereisyoursite.co.uk/icmi/...
Thank you!
Lucy
| Type: | Pre-Sale |
|---|---|
| Status: | Resolved |
Hi David
Thanks for your reply. I managed to get the logo to resize at smaller screen sizes by adding this code in the Custom Css (in case it helps anyone else):
@media only screen and (max-width: 415px){
.ccm-page .primary-header img { max-width: 170px;
max-height: 69px;
margin-top: 10px; }
}
It took a bit of jiggery pokery to get there but now everything fits nicely at small screen sizes.
Thanks again
Lucy
Thanks for your reply. I managed to get the logo to resize at smaller screen sizes by adding this code in the Custom Css (in case it helps anyone else):
@media only screen and (max-width: 415px){
.ccm-page .primary-header img { max-width: 170px;
max-height: 69px;
margin-top: 10px; }
}
It took a bit of jiggery pokery to get there but now everything fits nicely at small screen sizes.
Thanks again
Lucy
Hi Lucy,
Thanks for letting me know, and thanks for sharing the code snippet, I am sure someone will find that of use.
Best regards
David
Thanks for letting me know, and thanks for sharing the code snippet, I am sure someone will find that of use.
Best regards
David
Sorry for the delay getting back to you.
Unfortunately, there is not a huge amount you can do about this, to get the resizing of the logo on scroll to work you cannot constrain the dimensions of the image, so if you use a larger logo on a very small screen it won't shrink enough to fit. a few things to have a look at if you haven't already:
The email icon looks like it has some extra padding on the left at mobile sizes, it might be an idea to remove that it could give you some pixels back.
You could look into writing a media query to fix the logo to a certain size at say under 320px screen width, it may look a bit odd as it won't resize when scrolled but should look a bit more sane, I have an agency partner who had a similar requirement you may be able to figure out the CSS from here:http://adtech.co.uk/
Sorry I can't be of more help, if anything springs to mind I will be sure to let you know.
Best regards
David