I’ve got my logo looking pretty good when viewed on desktops, but viewed on mobile devices, it’s not ideal. It’s skinny and seems as though it could be lined up better with the menu and search buttons to conserve space. Does anyone have any suggestions on how I can make it look better, mainly on mobile devices?
Site: http://aftercredits.com/
Hi,
You could try something like this: http://screencast.com/t/amQOYutU6
@media (max-width: 767px){
.header-style-3 .td-logo {
position: absolute;
right: 8px;
top: -3px;
z-index: 10000;
padding-top: 0px;
width: 310px;
height: 49px;
}
}
Hope this helps!
Thanks
Thanks! That helped. The logo looks better on mobile phones, but it’s still wonky on tablet sized devices. I wish I could specify logos in certain sizes instead of having to use just one for all devices.
But at least it’s better now for most devices. Thanks again!
Hi,
Glad you managed to get it done. You could use this css snippets to style the logo on each screen width:
/* responsive phone */
@media (max-width: 767px) {
}
/* responsive portrait tablet */
@media (min-width: 768px) and (max-width: 1018px) {
}
/* responsive landscape tablet */
@media (min-width: 1019px) and (max-width: 1200px) {
}
/* responsive monitor */
@media (min-width: 1201px) {
}
You can also chose a different header style and set a logo for mobiles but that way you wont have a full width logo anymore, unless you are fine with that.
Hope this helps!
Thanks
Thanks for all the help. I implemented your code, but to be honest, it’s still not to my liking. I tried to change to Style 8 – logo + menu on one line and it looks nice on the desktop, but not on the phone or tablet.
The biggest gripe I have is that when it’s in mobile/tablet mode, I’d like the logo and menu/search icons to be in one line. I can’t seem to get that working and not have the logo be really, really small in mobile mode.
If this is the way it is, I’ll live with it.
Hi,
Unfortunately this happens because of the width of the logo which you will need to adjust it on each screen via css.
Sorry for the inconvenience!
Thanks for the message!
