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.
Related
I'm new to using #media but i am trying to get a webpage to respond centered for smaller devices only. while the larger width display can remain normal.
my webpage is mastercontrolunit.com and seems to appear fine on desktop view. but on phone for example the view starts all the way to the left, when i would prefer it to start centered.
Thanks!
You can set a media query for this, like below:
#media only screen and (max-width: 600px) {
body {
text-align: center;
}
.centered-el {
margin: 0 auto;
}
}
Change 600px to be the width of the screen you want everything to start being centered at.
Within this media query, you write your CSS to make things be centered.
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.
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;
}}
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
One of the major problems I have when designing websites are the variety of screen resolutions. First, I design on my 1366 x 768 computer and it looks perfect! Then on a 27" Mac it has so much space that the height could use in the content. It's like as the screen resolution is smaller, you have to worry about the width, and as it gets larger, the height. So, my question is what is the underlying factor to solving screen resolutions and space? I've heard percentages, separate media style sheets, and responsive will do the deal, but are those really a problem solver? Does it cause any other design conflicts?
I think the changes need to be made in the following places although I'm not sure:
section > div{
font-weight:bold;
font-size:30px;
color:#000000;
display:inline; /*fixed size based only what is in the element*/
width:30%; /*restrict the width size, default with inline property is 100%*/
/*max-height:85%;*/ /*restrict height size*/
padding:5px; /*a little pad from the edges are good*/
margin-top:10px; /*align the same as the other elements*/
margin-bottom:100px;
margin-left:100px;
margin-right:100px;
}
#message{ /*move element freely inside section; placed where desired*/
position: absolute;
top:120px;
left:-75px;
right:100px;
min-height:310px; /*same height across all content pages*/
min-width:550px; /*same width across all content pages*/
font-size:20px;
}
Just in case, my full css code in jsfiddle: JS Fiddle
I want to reach most target audiences with my website and right now, it's only good for 1024 x 768 and some tablets but definitely not mobile devices or large computer screens.
My website: Website Project on SmartPhone Photography
You see how the content aligns with the background image. The camera is to the right and the content to the left, not touching or closing in on the camera part of the background as does on mobile devices. Another thing, is on large computer screens, there's too much space on the top and bottom of the content, it's like as if it's in the middle with fixed height. As the screen's height grows larger I want the content to have a lesser vertical scroll button and fill the space needed as it looks on a 1024 x 768.
I would really appreciate an answer to this problem and something to be used for future reference on how to solve screen resolutions across all media. This website is fantastic for testing multiple screen resolutions. ViewLike.US
Sounds like you should go responsive. Then you can adjust for your viewport. Use a media query or if use an option like Bootstrap . Here's a media query example:
/***************
TABLET */
#media (min-width: 768px) {
body{
/*Put all your secific styles here*/
}
}
/***************
DESKTOP NORMAL*/
#media (min-width: 992px) {
body{
/*Put all your secific styles here*/
}
Unfortunately it is not as easy as writing one line and fixes all independently.
NOTE: If responive, use em's for Fonts, % for widths. Doesn't mean you shouldn't use pixels, remember the query is specific so for 992px Desktop, you could put width:20px; or whatever.
Hope this helps.