David Schure
asked on
Making a Logo larger in Mobile Portrait Mode
I have alogo that looks fine and is big enough to read in all screen sizes except in portrait mode on a cell phone. How can I adjust the logo size to be bigger for the mobile portrait mode? Thank you.
<div class="logo"><a href="index.php"><img src="resources/images/Logos/Lowsun2.png" alt="Logo"></a></div>ASKER
Thank you. Tried this. Nothing changed.
.logo{
max-width: 200px;
width: 15%;
}
.logo img{
width: 100%;
}
@media (max-width: 365px) {
.logo{
max-width: 200px;
width: 15%;
}
.logo img{
width: 100%;
}
}
How can I adjust the logo size to be bigger for the mobile portrait mode?To further extend David's suggestion, you can set the specific size under orientation: portrait mode.
@media (orientation: portrait)
{
//your csss
}ASKER
Thank you. This is all very interesting. Tried it, nothing changed. I'm doing soething wrong!
@media (orientation: portrait) {
.logo{
max-width: 200px;
width: 15%;
}
.logo img{
width: 100%;
}
}ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you! It works!
Likely Fix: Change the CSS class of your logo to be separate from your menu items, then use different @media... screen size breaks... to adjust your logo font.