-
Posts
-
I’m sorry for cluttering the forum with yet another logo size question, but I can’t find the answer.
I’m trying to use a long logo with the fixed header bottom menu. I hacked some CSS to make it look almost OK on desktop, but it looks bad on phones. And it’s still not right, as I have to set the height to be 10px taller than the logo file or it squishes vertically (on desktops). On phones, its all distorted.
Here is the temporary work-in-progress site:
The CSS I altered (don’t laugh) is:
.fixed_header #main {
padding-top: 110px !important;
}
.bottom_nav_header.social_header #header_main .container{height:110px; line-height: 110px;}
.logo img {
width: 714px;height:110px;
.logo img {
max-width: 714px;max-height: 110px;
}.logo img {
max-width: 714px !important;
}
Can you suggest a solution for a logo that’s 100px tall (including white space) and 714px wide?
(for some reason, I have to set the CSS as 110px to get the 100px logo to not squish vertically.
thank you!
Hi,
Please try this on your custom.css or Quick CSS
/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */
@media only screen and (max-width: 767px) {
.logo img {
width: 268px !important;
height: auto !important;
max-height: 80px;
}
}Regards,
Ismael
Thank you for the code. It’s in place but you can see it did not change the smartphone logo scaling issue:
The image is distorted because the height is always 110px. Try to set it to “auto” with
.bottom_nav_header.social_header #header_main .container{height:110px; line-height: 110px;}
.logo img {
width: 714px; height:auto;
.logo img {
max-width: 714px;max-height: auto;
}.logo img {
max-width: 714px !important;
}
@media only screen and (max-width: 767px) {
.logo img {
width: 268px !important;
height: auto !important;
}
}
- The topic ‘Trying to use a big logo’ is closed to new replies.