Archived topic
Mobile Header alignment issue
6 replies · Started by Juned on October 6, 2021
Hi,
I followed the settings of Prime Theme and used same CSS as mentioned there.
My site header is set good for Desktop, but the Mobile header needs some CSS. Kindly help me with CSS for mobile header so that my logo at header and the search bar looks properly aligned.
I want to improve the mobile header - the logo and search bar alignment from all sides. The Mobile logo is looking too small.
(It's a live site)
Hi,
I have managed to set the correct alignment, but the logo size at Header, in Mobile View, is too small. Please help to show it correctly.
Hi there,
theres not a lot of room for the logo and search field on mobile devices. Maybe its better to stack the logo and search. Give this CSS a shot and see what you think:
@media (max-width: 420px) {
.inside-header {
flex-wrap: wrap;
justify-content: center;
}
.inside-header .woo-search {
margin-left: 0;
}
}Hello,
Thank you for your kind support.
This is not looking that better. I wish to try 02 options:
1. If I have to use above CSS, then is it possible to reduce mobile logo (via css)? Because desktop view is OK.
2. If I don't use above CSS, then the changing of logo dimension (height) may work. What could be the recommended logo dimension?
Thanks in advance.
1. You can update the CSS to this:
@media (max-width: 420px) {
.inside-header {
flex-wrap: wrap;
justify-content: center;
}
.inside-header .woo-search {
margin-left: 0;
}
.inside-header .site-logo {
max-width: 200px; /* set max size of logo */
margin-bottom: 10px;
}
}I have commented the line where you can set the max-width of the logo.
#2 - problem on small mobiles you only have 330px of available space for the logo and the search. Which would mean reducing the search to a smaller size that makes it difficult to use.
You people are amazing.
It's a perfect solution.
Glad we can be of help!
