On http://www.quicklyweb.com the header top-nav menu (language,support,account,viewcart) looks extremely small on mobile phones. I ve been scratching minehead last 2 hours with no result. Where am I going wrong ?
Hi, for some reason you have set the font-size of the View cart to 40px and it stretches the page wide as the mobile viewport tries to accommodate the overflow thus making everything smaller apart from the cart.
It looks like you need to drop the view cart to another line at smaller screens and not increase its height.
This is rough but gives you the idea.
@media screen and (max-width: 500px) {
ul.top-nav {
font-size: 1rem;
}
}
@media screen and (max-width: 440px) {
ul.top-nav > li.primary-action {
padding-left: 0;
border-left: none;
}
}
@media screen and (max-width: 376px) {
ul.top-nav > li.primary-action {
display: table;
padding-left: 0;
margin: 0 0 0 auto;
}
}
1 Like
Thank you Paul. I did try your way moving .btmn to another line but still had the same problem. Just for the sake of it i have removed view cart button to see if outher link scale up but that didn’t makeany difference either
Can you provide a screenshot of the problem you see and explain what you would like to happen.
You have three other links in the header and you could increase there font size a little if you wanted. You can’t make them too big of course or they will be too wide.
I notice that you have now changed the design and that has resulted in the first link in the top bar (‘English’) being cut off and disappearing to the left of the viewport. The first item you see now is the one called ‘support’.
If indeed you are happy with hiding the language dropdown then you should remove it altogether and not just let it get pushed off to the left of the screen.
As I mentioned above this is a design question really and you can’t always fit x number of items in a row unless you make them very small (which is bad) so you need to adjust the design with media queries to make a better fit over 2 lines or indeed use some other method that suits the purpose and your design aesthetics.
I would try something like this which will allow the screen to go down to the smallest you need (320px iphone 4).
@media screen and (max-width: 400px) {
ul.top-nav > li.primary-action a.btn {
color: transparent;
width: 29px;
text-align: center;
padding: 5px;
font-size: 1.4rem;
}
ul.top-nav > li.primary-action a.btn i {
color: #fff;
}
ul.top-nav > li > a {
font-size: 1.4rem;
padding: 6px 0;
}
}
Screenshot with code added.
1 Like
Tjanks again Paul,
The view in normal samsung browser is fine but in chrome mobile i am getting completely different result. Really bizarre.
I started to think there is a problem with chrome browser in android
That well may be the case and I don’t have an actual android device to test. I only have access to a couple of iphones.
What I usually do in cases like these where there seems to be a bug is to extrapolate that section of code into a stand alone html file. i.e. I would create a static header only page using relevant code and then test that in isolation.
In that way you can see whether there is actually a bug or not. If the code renders fine then the problem is somewhere else. It could be something as simple as a missing bracket in the css as some browsers will error correct more efficiently than others. I have seen cases where one missing bracket corrupts the whole css file.
However in your custom css I only see one error that shouldn’t really affect anything. You have 7 characters instead of 6 here 4C5758F
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.