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)
Related
On our website: https://dev.shiftdivorceguide.com/ everything looks great on desktop.
When I switch to smaller screens like tablets I get a padding to the right of the screen. When I go even smaller (smartphones) I get an even larger padded area to the right of the screen.
I am unsure if the Panic Button bar at the top may be interfering with the code of the page (.panic-button-container). I have already tried altering the CSS in the media queries. To reduce the size of the white area on tablets I changed the code below concerning the logo and navigation widths.
I changed:
#media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 40%;
float: right;
}
}
to:
#media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 80%;
float: right;
}
}
This helped a little with the layout but I still get a white bar on smaller screens. The smart phones are the worst. Any possible solutions would be appreciated.
Stop using floats. Use Flexbox. Too many clearfix divs in the way.
Obviously the footer is extending past the site content body as well as some other elements.
If you really want to narrow it down set this style:
* { outline: 1px solid red }
That way you see what container is over-extending and then set it's width to 100% instead of a fixed width.
EDIT 2:
Using my technique I have narrowed down the problems:
.footer-menu
remove width: 500px;
.lp-section-content row
remove all negative margin
.vc_column-inner vc_custom_1548439628787
remove all padding
A bit of background: I am a student who has volunteered to redesign a website that is used by my extra curricular robotics team. This is my first time creating and working with Bootstrap and responsive design in general and, in my opinion, everything has gone very smoothly up until I uploaded the website to a test domain and viewed it on a mobile device.
The issue I am facing deals with the width of the navbar and content on the website depending on the orientation of the device. While the device is in portrait mode (vertical), the navbar and content don't have enough space in the text, and as a result, make the page extremely long and take up a lot of space. On the other hand, when the device is landscape (on its side), the website is, at least what I would consider, completely fine:
http://imgur.com/gallery/toZYt (album because I cannot post more than two links right now, shows pictures of the issue in greater (visual) detail )
I've experimented with the viewport/initial scale of the webpage, and while that does change the navbar and content width, the navigation bar text/logo is squished in, and also looks relatively low quality. Changing the min/max-width of the media does not seem to do anything. I'm stuck as to how to fix this, and whether or not it is a #media issue or if has to do with my CSS for menu/content. I have a 125px margin for the content in my CSS main CSS, mainly for the desktop site to look nice, so maybe that has to do with something?
I tried to research this problem earlier on other posts and other websites, but I couldn't find anything that seemed to relate to my issue, and any suggestions didn't really fix/affect the website in a major way. I'm hoping that there is someway to fix this without affecting the other forms of the website (Landscape/Desktop), as well as the margin of the text/content.
I found that the problem persists on other phones (tested on a OnePlus X, iPod 5th Generation, and iPhone 6) but haven't been able to test it on tablets. If anyone has any suggestions for me that will solve this issue on the website, It will be greatly appreciated. Thanks for reading!
You need to look into CSS media queries.
There are a couple of things you should fix, including the 125px margin.
For example, that margin is way too big for a mobile device, so what you should do is:
.element {
margin: 0 15px; /* Default margin */
}
#media only screen and (min-width: 1024px) {
.element {
margin: 0 125px; /* Margin for displays > 1024px */
}
}
You can set multiple media queries that affect the same element. To build on the example above, you can have one more query # 1280px:
/* ... */
#media only screen and (min-width: 1024px) {
.element {
margin: 0 125px; /* Margin for displays > 1024px */
}
}
#media only screen and (min-width: 1280px) {
.element {
margin: 0 200px; /* Margin for displays > 1280px */
}
}
A good way to debug layouts at lower resolution is using your browser's built-in responsive view.
You can do that in all major browsers now, for example in Chrome you need to open up dev tools (Ctrl + Shift + I or Cmd + Opt + I) and click on the phone + tablet icon on the top left.
After I took a closer look at your website, I found some fixes you can apply to it in order to make it look better on smaller viewports:
1: (first remove .navbar-brand > img inline style (max-width and margin-top)
.navbar-brand img {
max-width: 200px;
margin-top: 14px;
}
#media only screen and (min-width: 440px) {
.navbar-brand img {
max-width: 350px;
margin-top: 7px;
}
}
2: Adjust border-control padding for smaller screens
.border-control {
padding-left: 15px;
padding-right: 15px;
}
#media only screen and (min-width: 768px) {
.border-control {
padding-left: 125px;
padding-right: 125px;
}
}
If this still doesn't make a lot of sense, I suggest you read up on media queries here and figure out how they work in depth.
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
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.