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>
Last Comment
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
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Thank you! It works!
HTML
HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.
62K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
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.