We're having an issue with the mobile menu on our Wordpress driven website.
Problem:
In small viewport sizes, the carats used to expand the submenus don't show. The carats appear to be there and based on the styles are white but don't show through background. I've tried a variety of different fixes including adding "!important" to various styles without success.
Here's a screencast repro'ing the problem.
https://www.screencast.com/t/ZbZXTegLCWa
You can also repro it by viewing the site in a browser and adjusting viewport size to 440px.
https://www.windworkssailing.com
Thank you for your input!
You have multiple viewports where these menu-arrows are not visible, because the navigation menu's width is to large.
Following viewports are affected:
max-width: 1000px
max-width: 768px
max-width: 600px
Search for those media queries and for the following css element nav.mobile_menu > ul
Changing the width property to auto should fix the problem.
example:
#media only screen and (max-width:768px) {
nav.mobile_menu > ul {
width: auto;
}
}
But keep in mind, that you have to change the css code at three positions since three viewports are affected.
Related
I have a navigation bar, an example of which is available here: http://fiddle.jshell.net/4uq6y5fa.
This displays as expected when all the elements fit on the screen, but if I resize the window, bits of the menu start disappearing. How do I fix this?
Use CSS media queries:
#media only screen (//defined for particular width)
{
//code of nav bar and search box
}
e.g.
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
Alternatively, you can define widths and heights in percentages(relatively), using em instead of pixels.
I don't really get what your point is, do you want to make the menu responsive or do you want to know what the problem is?
As for making it responsive, use media queries.
W3schools, The #media rule is used to define different style rules for different media types/devices.
So for example you make your width 100% for the screen size of 1920x1080 and 50% for the size of 1024x720. So your nav will "jump" to the 50% when someone resizes the website.
On mobile (or scroll the browser to 320px) I'm getting a horizontal scroll, this appears to be assioated with the navigation on mobile as it disappears when the nav is collapsed. Does anybody have any idea what this issue may be?
The live link to my portfolio where the issue is located here
As you said, it's related to your navigation.
You have CSS that specifies a width of 100% (which you then offset, causing the overflow).
If you update your media query and specifically this line:
#media only screen and (max-width: 767px)
.nav-collapse, .nav-collapse ul {
width: 100%;
}
}
From 100% to say 90% (just a magic number, which worked for me - you'll probably want to add a new rule that targets mobile devices) and then test, you'll see it removes the overflow on mobile devices.
Use 1.000em value instead of 320pxl
My designer just gave me website which I need to use different images with z-index on them on both side of website. The image that I used on the left side is fine but the one on the right side shows a scroll bar on the bottom when opened on smaller screen resolution (below 1920 width).
So How can I get it right?
Take a look http://whitepixelstesting.com/sunexim/
You should have used background image, it would have been simpler.
But it this case, I would recommend you to use a CSS Media Query.
By adding overflow: hidden to your #main_wrapper, you solve the problem for screens between 1920px and 990px. If you keep the hidden overflow, you will hide your content for those below this screen width. That's why you should add this at the end of your Style Sheet:
#media all and (max-width: 991px) {
#main_wrapper {overflow: visible;}
.right_bg {display: none;}
}
I am using Gridset to create a dynamic website. So far, things are going great. When I hit my breakpoint, it gracefully transitions to its mobile counterpart. However, I noticed that when I tested this on my phone, the site was way larger then the viewing area of my phone, even though it was using the correct mobile grid.
Here are two screen shots of the layouts in both forms, viewed from my desktop
Desktop
Mobile
However, when I view on my phone, you have to scroll horizontally to view the whole thing. I tried to fix this by using
<meta name="viewport" content="width=device-width, initial-scale=1">
This did what I wanted it too. And I thought I fixed my issue. Until I viewed it on my phone in horizontal mode. It cuts off the last navigation option 'contact'
Here is a screenshot from my phone
phone Screenshot
It looks fine on any tablet in any orientation. Phones work when in landscape mode.
So what my question ultimately is, how can I prevent my ul navigation from being cut off when viewed on phones in horizontal mode.
Here is a link to the website if you want to view the source
link
Edit*
Because i want to center the log in and inquire icons I had to remove the float. This prevents them from being on the same line though.
/*center icons on mobile*/
#media all and (min-width: 0px) and (max-width: 989px){
#headerIcons img{
display:block;
float:none;
margin-left:auto;
margin-right:auto;
}
}
Is there a better way to do this? Or is there a different way to make sure the images stay on the same line?
Remove the height: 60px from #navigation ...
... and it's fixed. The LI elements inside are floating, so they drop down to another row when there's not enough width to display all on one. The problem was the fixed height: the container (#navigation) was unable to expand to contain them when they drop down.
EDIT
If you want the nav items to all fit on one line, you'll need to use media queries to adjust the layout. For example, add this to your stylesheet:
#media screen and (max-width: 320px) { /* increase this width until you see the desired results */
#navigationPages li {
font-size: 1em;
}
#navigationPages li a {
padding: 0.75em 0.6em;
}
}
This media query reduces the font size and link padding for windows that are 320px wide or less. You can adjust that width as needed. If you are new to media queries, it would be a good idea to google about them. They are instrumental in mobile responsive website development.
I'm testing out my CSS at http://flexibletheme.tumblr.com/ and trying to make the website responsive to a small screen size.
Only problem is, I can't get the padding to work on aside element. To reproduce the problem resize your browser window till the sidebar stops floating to the right (this will appear at the bottom, once the screen size is below width of 600px.
All the CSS is inline for now, to view the css. Part relevant to the resizing starts at:
#media screen and (max-width: 600px) {
Edit: This image shows the padding in purple (via Firebug) not displaying properly:
What about the padding isn’t working? Chrome’s web inspector seems to confirm that the padding is there as declared.
I do notice that your <aside> element ends up positioned outside the left edge of your layout, but that’s because it’s floated right and has width: 100%; assigned to it.
from reading your code in Chrome's Inspector, I can see that the following rule is applied when you minimize the screen
#media screen and (max-width: 600px) {
#content {
width: 100%;
}
aside, #title, #menu, .photo img, .asker {
width: 100%;
}
}
This is why you are having the problem. Find your media query in your CSS and sort it out there. :)