I really can't explain why this is happening but I am building a WP theme in BS3, for some reason, on the tablet viewport (768 to 991px) my links stop working. They are not clickable, tappable, tab-able, etc.
What causes this strange phenomena? How do I even diagnose when my site is W3C Compliant?
Ugh... the horror!
I really don't have code to support this, but I could paste my entire page on here. I will do that on request, or my CSS file, etc.
When using bootstrap .col-* DIVs should reside in .row DIVs and in turn .container DIVs. I can see in your html that you have 2 top level DIVs with a class of .col-*, and they have different screen sizes associated with them. Your footer DIV has a class of 'col-lg-12 footer area' which means when it gets below 991px it will stop floating, while the rest of your content floats, which is whats causing the issue.
If you change the footer class to: 'col-sm-12 footer area' - this will solve the issue.
But what you ideally need to do is remove the col-sm-12 from your footer and page-wrap altogether and replace it with 'container' so they look like: <div class="container footer area">
Related
Please see this fiddle. I have a main content div and a sidebar, which I want affixed to the top of the page as the user scrolls. Everything works fine, except for when viewed in mobile:
Without the affix stuff, the columns behave as Bootstrap columns should and the sidebar falls into place directly below the main div. But with affix, the div simply disappears.
I have sort of fixed this using a media query:
//Override affix on small screens:
#media (max-width: 750px) {
.affix {
position: static;
}
}
This puts the div where it should be on small screens and reverts to the affix layout on Desktops. However, there is a void in the middle where it just disapears. As you drag the window in, around halfway it disapears, then repeareas in the correct position as the window is dragged smaller still. I've tried adjusting the 750px value, but haven't been able to come up with a figure which actually works.
How can I reconcile the grid layout and the affix switch on/off? How do I know where the breakpoint will be - should I avoid using a specific number of PX and take another approach to this issue?
My current Bootstrap layout is (I've added the height:500px so you can see the scroll behaviour in JS Fiddle - it is not present in my actual code):
<div class="container-fluid">
<div class="row" id="content">
<div class="col-md-8" style="height:500px">
Main content
</div>
<div class="col-md-4">
<div class="affix" data-spy="affix" data-offset-top="0">
Side content
</div>
</div>
</div>
</div>
Many thanks
I'm not clear on where you would like the Affix to be on mobile, either to the right of the content or beneath it, but I'll try to help:
In your Fiddle I am not seeing a point where the Affix momentarily disappears, but I do see it react as expected with the grid system classes. Ie: the col-md-* divs expand to 100% width at 992px.
The Media Query breakpoint for col-md-* is 992px. (Unless you have reset it in your copy of Bootstrap.)
If you would like to maintain the same width ratio that you have on desktop, I would suggest swapping out your classes from .col-md-* to .col-xs-*
So .col-md-8 becomes .col-xs-8 and .col-md-4 becomes .col-xs-4 -- but then your main content would be quite narrow on mobile.
Not sure if that's what you are going for?
Ok, i will try my best to explain what i am trying to achieve since i am not allowed to add images here on stack, so here it is:
I have a design for tablets. The whole content takes up the 100% height of the design with just 15px of padding on top and bottom.
So, i have to make the design fit to all the apps available in the market, without having vertical scroll.
I have tried many solutions like using bootstrap with
HTML
<html>
<body>
<div class="main-content">
</div>
</body>
</html>
CSS
html, body, main-content {
height:100%;
overflow:hidden;
}
also, i have tried reducing the size of elements in the page using media queries just to fit the screen vertically for different tablets.
The problem is, there are like 80 pages in the design and i believe this is not the best solution for this amount of pages and to add media queries for every single page. ( the page designs are different from each other, so common classes cannot be used )
Would like to know is there any other solution to fit the height of the page for tablets with no scroll.
Any help, suggestion will be appreciated.
Try this,
html, body, main-content {
height:100vh;
overflow:hidden;
}
I've got a problem in my html code: http://www.playground.obuh.by/ (Bootstrap with disabled responsive) on small resolutions. the problem is that on some resolutions webpage is looking “smaller” in width so that it had a white area on the right side, for example, look on this screenshot:http://joxi.ru/-3_fU4wyTJDIAupGS2Q or this: http://joxi.ru/mtoNVP3JTJCSfN_a8a0
I looked into your website. The white gap that comes in some of your sections is, because you use the .container class on them. They therefore have a fixed width. Give them the .container-fluid class instead and everything should look fine.
On this template I've built using Foundation, everything looks correct and responsive except for both navigation bars. They're both on their own <div class="row">, yet they overlap eachother on window resize.
(There is a #media only screen and (max-width: 767px) that is supposed to make it look even cleaner, if it helps at all).
Actually if you open the page on chrome with the developer tools or in firefox with firebug, you can see that when you make the page smaller than 767px width, is when the problems enters, due your #media only screen and (max-width: 767px). i would recommend to check that css cause if you removed it from the html you get a better result, so you may check what attributes inside that css are making your div crazy.
try adding foundation.css (around line 148) .row class height to 140px and moving main-links somewhere inside top of the main-content? That code seriously need either playing around with heights/margin or div blocks imo :)
Edit: roughly editing foundation.css lines is not what you need, make separate css class for that specific height setting and trigger usage of it with correct media query (width which causes problem to occur). That way you can tune any classes you like around the top navigation, its not pretty but it gets things work.
As Jorge Aguilar said, the problem lied in a float: none that was applied to every <li>. Furthermore, I used a width: 100% property to stretch the elements across the entire screen (like it originally was with the floats, but without the overlapping)
Is there a way to make a sidebar collapse to the bottom of the page without any JavaScript when the browser reaches a certain size.
I'm creating a responsive theme that can be seen at http://flexibletheme.tumblr.com/. By resizing your browser window to below 600px, the theme goes into a linear version (just resize your browser smaller until it changes to this).
At the top the sidebar changes into a full menu, and this is the part which I want to go to the bottom instead of staying at the top.
The relevant parts of the CSS code are #media screen and (max-width: 600px) [this tells the browser to use the specified CSS when the browser is less than 600px], the sidebar using the HTML 5 element called , and each post is wrapped in .
Have you tried moving the entire aside block underneath the container? I'm still learning responsive web design myself, but my understanding is that if you structure your html for the smallest size you want to accommodate, you will have a cleaner layout with less hacks.
Place your sidebar inside your #container div and float your section left and your sidebar right.