I built this very simple site for work and I found an issue related to the top navigation bar when resizing on mobile (please note there is no mobile version of the site, nor will be).
When resizing on mobile screens, the navigation bar remains fixed, while the content can be moved. This means that, while the navigation bar stays stuck at the top left corner and partially blocks the screen, the text moves freely under it. Please refer to the screenshots below:
Mobile: Example 1
If you check the source code, the top navigation bar is set to fixed. If I remove this line, resizing on mobile works fine, but the top margin specified for the content (so that it doesn't overlap with the navigation bar) becomes huge.
Changing this margin, however, affects the navigation bar when resizing the window on a computer, as you can see below:
Desktop: Example 1
It's been many years since I last worked with html and css, so please excuse me if I'm missing the obvious.
How can I find a solution to this?
This is happening because you given width and max-width 100% to your top class, If you want to fix this in mobile devices you need to write media query
Try below code to your css
#media (max-width: 500px){
div.top{
width: auto;
max-width: none;
}}
if you want to show navigation in mobile view then use below code.
#media (max-width: 500px){
div.top{
position: relative;
}
div.normal{
margin-top:200px;
}
ul.menu li{
float: none;
}}
Related
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.
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 am using Foundation. The top-bar (navigation) break out on some 787x676 resolution while resizing the window. I have cut/paste the code but issue was still there. Then i checked on foundation official website top-bar breaks on there website website too. I think there is some bug in foundation. Here is the link/screenshot. Is there any fix to this?
Depends on what you mean with fixing, it breaks when the size gets too small to hold all the content, so one could add a min-width to make sure it doesn't get smaller than that.
Example:
.top-bar {
min-width: 800px;
}
Or you could have it overflow, and just grow in height as content gets dropped below. To do so start with removing:
.top-bar {
height: 47px !important;
}
That line makes the black bar stay as high as it is.
To swap to the mobile bar sooner, look for bits similar to #media only screen and (max-width: 767px) and increase the size to just above where it breaks, example (max-width: 780px)