I'm using Bootstrap to build a webpage. The page looks as it should on desktops and laptops. However, when viewed on mobile phones, the bottom half of the page's content is cutoff. This happens only on mobile phones or windows resized smaller than 991px wide.
I tried sifting through the included Bootstrap CSS file but couldn't find any style rules dictating any behaviors like the one I describe.
I've attached two screenshots: Fig. 1 is the intended behavior--the content ends with the embedded contact form. Fig. 2 is the puzzling behavior--the page just ends in the middle of the pricing table.
The site is grillemasters.info
[Fig. 1] http://i.stack.imgur.com/uH7MB.png
[Fig. 2] http://i.stack.imgur.com/h2190.png
Without seeing more information (e.g. try to post the minimum amount of HTML that still exhibits this error) it's hard to prescribe a solution. But here are three possible things to check out:
Mismatched (Incomplete) DOM
If you have an open-element (e.g. <div>) without its close (</div>), HTML behaves in mysterious and often irreproducible ways. This often includes mis-styling all elements after the mismatch.
Bad Character or Incomplete File
If you are uploading via FTP and the connection is interrupted, you may only be looking at a fragment of the file. Try deleting and re-uploading. The same thing would happen if the browser or FTP client encountered a character that made it stop reading the file — both of which might lead to a mismatched DOM.
Unnecessary body CSS
Make sure you don't specify the height of body or html anywhere (or any other global, all-containing elements). The page should flow naturally, without you specifying a height: 100%.
[EDIT] I looked at your site (which redirects to http://www.supsean.com/grillemasters/, in case others are interested in debugging outside a frame). Look at the top of your page when you resize the screen to such a small size; there are quite pervasive CSS issues, likely caused by position: fixed or absolutes where they needn't be.
Try resolving that, and I suspect you'll stumble across the solution to this question as well.
Related
I have an issue on my company's ecommerce site. On non-widescreen monitors, if you one of our pages while the browser is zoomed to 110% or higher, the layout gets messed up (specifically, the right side Div, which comprises 80% of the page (roughly) gets pushed below the left side div).
The site is built with the Smarty templating engine and uses pinnacle cart, but both have been heavily modified by the previous developer and myself. What can be done to improve the site's versatility with browser zoom? It wouldn't be an issue, except my boss alway has her browser zoomed to 110%.
Example page: http://www.buynowornever.com/handbags/ (but any page with the filters on the left side will do it).
There's obviously something wrong with the spacing on the page, such that when the browser attempts to reformat it in the zoom, the right div gets too large and overflows. I've tried correcting this with various overflow tricks, but have been unsuccessful.
I've looked through several answers here (including How to prevent the floating layout wrapping when firefox zoom is reduced) and on other sites and have not been able to make them work for my situation. My CSS and Web Design skills are not very strong.
The issue was bad data. Some of the category headers that I was using had close divs hidden in them. This caused layout issues on some pages, but because of the hierarchy, was not utterly fatal (and chrome handles some of these problems pretty gracefully). I cleared up the data issue and the pages all work as intended.....
I really should remember GIGO in these situations.
I have recently taken control of a large website. My problem is that sometimes, on some browsers/ computers, when you navigate between pages (or hit refresh) the entire content loads slightly to the right, then half a second later, jumps back to the left where it should be. The distance is only around 5mm, over the course of a second, but it is noticeable.
Things that are useful to know:
It is a wordpress site, but has only basic functions- The menu contains jQuery but there's little other javascript to prevent loading.
All content is wrapped within a container that is centred using
{margin: 0 auto;}
There are several CSS style sheets, and some major tags such as the container have been defined several times- i even found a discrepancy between the width between two of these, but when fixed everything still jumps.
There are no images on the side that are causing it to jump by being slow to load.
The content only jumps if the content is greater than the screen height- that is, it goes off screen.
Content will jump with my old computer, but will not jump with my new computer, on the same network and connection.
On an older computer content will jump with IE 10, but not when you put IE10 into compatibility mode.
I'm afraid that i don't have the permission to put a link to the website, so i've tried to put everything i know about it here. I know that makes it more difficult, but any pointers to put me in the right direction will help a lot!
Update!
The scroll bars were the problem- I used the answer from this thread: Making the main scrollbar always visible
and all jumping has stopped!
You should simplify the problem removing 'things' until you isolate it.
If you don't have a preproduction or development environment to test make a copy of the page where the problem still exists. Then start removing things. If any div needs some content so the layout is stable replace anything dynamic or complex with simple text or images.
If the problem seems fixed removing something don't think you got it, undo what you just did so it still fails and keep on removing parts or functions that definitely have nothing to do with the problem.
When you have a minimal example that is still failing it will be much easier to figure out what the problem is or if not post the example here so we can help.
Problem:
When I load a website that I designed, the layout is wonky for a brief moment while the page loads, then snaps into the correct place. This behavior occurs in at least Safari and Chrome.
How to I keep everything in the proper, final place while the page loads?
Code:
HTML in question on codepad (with details changed for privacy reasons): http://codepad.org/GSGHYF0N
Stylesheet: http://codepad.org/Yr4ULwi0
Additional Info:
The most obvious thing that is out of place is the
<h2>Location</h2>.
Images are all the size indicated in the HTML and CSS.
This is not the problem where the entire layout shifts as one because a scroll-bar appears.
Resources
Information on Google Developers have been useful, but haven't indicated how to fix my particular problem. However, StackOverflow won't let me post these links because of spam-prevention.
http://jsfiddle.net/QHeG8/
I can't replicate the issue but it could be caused by the webfonts loading and rendering.
That would explain why <h2>Location</h2> moves - because it's position relies on the width of the <h3>Tagline</h3>
You could try using standard system fonts to see if that resolves it.
Also if you have Dev Tools open that'll slow down page rendering and also disable your cache (if you have that option ticked)
Hello good people of Stack Overflow, I am having great troubles with designing a website. I have pretty much finished the first page except for a bit of content, but that's not the question. I am using a PHP include to include a menu on top of each page, to keep it uniform. However, when I resize the window, in any browser, the links will begin wrapping. I think it is an issue with my CSS, or it could be a problem caused by my lack of PHP knowledge.
The link to my website is, builtbyhabel.net63.net. The code should be able to be seen on the developer tools for whichever browser you are using.
Sounds like you have your links inside a container without a fixed width.
<div><a><a><a></div> <-- this one will contract with the width of your browser
vs
<div><a><a><a></div> <-- CSS div { width:978px; }
In our current project, we have one particular page where, when viewed in IE7 or IE8, fonts seem .1 or .2 em larger than they should be. Having inspected the code and css, I cannot see where this is coming from. This issue affects ONLY ONE PAGE which is to all intents and purposes exactly the same as many others in the site, which display as expected.
Some things I have ruled out:
Text-size settings (it's not that, set to medium, and anyway if so why one page only)
DPI settings (same reason as above)
Browser zooming (it's set to 100% - the problem scales with the zoom setting, btw)
Browser-specific CSS (no browser specific rules are applied to the elements in question)
Stray font-size setting code in the markup (I've been through and eliminated this)
Voodoo (okay I haven't ruled this out - as my frustration increases I'm starting to think it might be this though)
The page displays as expected in Firefox. This is not a live site yet so unfortunately I can't point you at the URL.
Has anyone come across something similar and, if so, what was it?
Many thanks,
G
Without showing us or replicating it at least, asking is pretty much near useless but I suspect it's probably just a tag that wasn't closed on an element with an above average font size.
I'd recommend validating the HTML. If it's good, then it's hard to say without looking at the code/page.