interforo Active member Oct 26, 2020 #1 How can I make logo bigger and on its own line on mobile only?
Solution Brad Padgett Oct 26, 2020 CSS: @media screen and (max-width: 768px) { .p-nav-smallLogo { max-width: 200px !important; } .p-nav-smallLogo img { max-height: 100px !important; } } That's what did it for me. Feel free to assume there's a better way but this is what I did and works just fine.
CSS: @media screen and (max-width: 768px) { .p-nav-smallLogo { max-width: 200px !important; } .p-nav-smallLogo img { max-height: 100px !important; } } That's what did it for me. Feel free to assume there's a better way but this is what I did and works just fine.
beerForo Well-known member Oct 26, 2020 #2 This is what I did Code: /* mobile logo large */ .p-nav-smallLogo { display: none !important; } .p-header-logo { max-width: none !important; } .has-js .p-header { display: block; } Upvote 0 Downvote
This is what I did Code: /* mobile logo large */ .p-nav-smallLogo { display: none !important; } .p-header-logo { max-width: none !important; } .has-js .p-header { display: block; }
interforo Active member Oct 26, 2020 #3 beerForo said: This is what I did Code: /* mobile logo large */ .p-nav-smallLogo { display: none !important; } .p-header-logo { max-width: none !important; } .has-js .p-header { display: block; } Click to expand... thanks but now my logo disappeared www.interfans.org/forum Click to expand... Upvote 0 Downvote
beerForo said: This is what I did Code: /* mobile logo large */ .p-nav-smallLogo { display: none !important; } .p-header-logo { max-width: none !important; } .has-js .p-header { display: block; } Click to expand... thanks but now my logo disappeared www.interfans.org/forum Click to expand...
interforo Active member Oct 26, 2020 #5 beerForo said: I see it. Click to expand... I see this Upvote 0 Downvote
Brad Padgett Well-known member Oct 26, 2020 #7 CSS: @media screen and (max-width: 768px) { .p-nav-smallLogo { max-width: 200px !important; } .p-nav-smallLogo img { max-height: 100px !important; } } That's what did it for me. Feel free to assume there's a better way but this is what I did and works just fine. Upvote 1 Downvote Solution
CSS: @media screen and (max-width: 768px) { .p-nav-smallLogo { max-width: 200px !important; } .p-nav-smallLogo img { max-height: 100px !important; } } That's what did it for me. Feel free to assume there's a better way but this is what I did and works just fine.
interforo Active member Oct 26, 2020 #8 beerForo said: Maybe clear your cache, but I see it. Click to expand... I did but can't see it can you post a screenshot of what you see please? Upvote 0 Downvote
beerForo said: Maybe clear your cache, but I see it. Click to expand... I did but can't see it can you post a screenshot of what you see please?
interforo Active member Oct 26, 2020 #10 beerForo said: View attachment 238460 Click to expand... oh that's not the forum! the link is www.interfans.org/forum Upvote 0 Downvote
beerForo said: View attachment 238460 Click to expand... oh that's not the forum! the link is www.interfans.org/forum
interforo Active member Oct 27, 2020 #12 beerForo said: Yes, it disappeared. Click to expand... Must be because of the theme I use Can you help with a customized code for it please? Upvote 0 Downvote
beerForo said: Yes, it disappeared. Click to expand... Must be because of the theme I use Can you help with a customized code for it please?
Ozzy47 Well-known member Oct 27, 2020 #13 Ask your style developer for the correct code . Upvote 0 Downvote
rosal Active member Jun 24, 2021 #15 Brad Padgett said: CSS: @media screen and (max-width: 768px) { .p-nav-smallLogo { max-width: 200px !important; } .p-nav-smallLogo img { max-height: 100px !important; } } That's what did it for me. Feel free to assume there's a better way but this is what I did and works just fine. Click to expand... Thanks after many hours trying to fix the mobile logo fixed "height" default, i found your post and fixed my issue. Xenforo have to check this and implemented by default i think, Regards Upvote 0 Downvote
Brad Padgett said: CSS: @media screen and (max-width: 768px) { .p-nav-smallLogo { max-width: 200px !important; } .p-nav-smallLogo img { max-height: 100px !important; } } That's what did it for me. Feel free to assume there's a better way but this is what I did and works just fine. Click to expand... Thanks after many hours trying to fix the mobile logo fixed "height" default, i found your post and fixed my issue. Xenforo have to check this and implemented by default i think, Regards