I'm relatively new to bootstrap and doing my best to get up to speed. I understand that rather than edit that 6700 line bootstrap.css file, it makes more sense to create your own css file of changes and put that under the main bootstrap.css file, overriding what was in the main one.
However, I have an issue with media queries. For example, I want the menu to collapse at a larger resolution than what is specified in bootstrap.css, which includes something like this:
#media (min-width: 767px) {
[ lots of things to collapse the menu ]
}
So in my changes css file, I copied the same code, but changed the min-width to 992px. The problem is that this doesn't cancel out the directives made in the bootstrap.css file. It just does them again at a different resolution.
The only thing I can think of to resolve this is to copy that code from the original file, leave the min-width resolution at 767, and then for each instruction through the entire block of code, determine what the default property should be and set it back to that. This would be a ton of work, and could be very prone to mistakes.
My only solution was to edit the main bootstrap.css file and comment out that code. I didn't like editing it, but I don't see any other way around this. IS there another way? I'm not looking for help specifically on collapsing the menu. I'm more looking for css concept help.
If you really want to override Bootstrap style, you'll have to override also what is specified by Bootstrap CSS file for a width between 767px and 992px.
#media (min-width: 767px) and (max-width: 991px){
/* Undo here what was specified by Bootstrap file for screens larger than 767px and you don't want to apply */
}
Related
I have recently started learning how to use CSS media queries to develop websites that are responsive / mobile friendly however, I am not familiar with the best practices associated with determining which width ranges to develop designs for.
For example, I normally use three sets of CSS rules. One for a small width (mobile) , one for a medium width (tablet or small laptop screen) and one for a large width (desktop).
This is what it looks like in code:
#media screen and (min-width: 1495px) {
//CSS RULES HERE
}
#media screen and (max-width: 1494px) and (min-width: 1245px) {
//CSS RULES HERE
}
#media screen and (max-width: 1244px) and (min-width: 751px) {
//CSS RULES HERE
}
My sizing conventions (min width & max width) are completely arbitrary and I determine whether it works from trial and error. Often This doesn't work very well and I can't get the design to look good on all difference screen resolutions.
First of all.... Is there a best practice for the most ideal width ranges to use?
Secondly, is there a framework or template that will make all of this easier?
(That is not Bootstrap).
FYI: I use Foundation 6 to as a grid system but I haven't really found information much on responsive sites in Foundation 6.
Seems rare to me that you haven't found information about responsive sites on Foundation, this framework has been responsive from the beginning, and have wired cool stuff to help you on that matter. Just want to make clear I'm talking here about the Float Grid which isn't default anymore since 6.4 (but you can customize or switch up the grid in SASS settings).
Foundation grid has 3 default expected sizes: small (mobiles), medium (tablets) and large (desktop), in Float Grid you can use this way:
<div class="column small-12 medium-6 large-4></div>
This column will be full width on mobile, 1/2 width on tablet and 1/3 width on desktop; you can even ditch the small-12 because every column has full width (12 columns) by default.
That's the way you approach it from the grid... if you use the SASS version of the framework, you have another powerful tool, a mixing to set code for a specific breakpoint... let's say you want to apply some styling for medium size (and up), you just need to use this in your .scss file:
#include breakpoint(medium) {
// Your SASS/CSS code here
}
Please notice I said "medium and up", that's because Foundation is mobile-first, so everything you put in a smaller breakpoint, will be available on following sizes (unless you override them), if that philosophy is kinda awkward to you, and you need to put some code for only the medium breakpoint, you just need to put the code this way:
#include breakpoint(medium only) {
// Your SASS/CSS code here
}
That's a quite fast way to handle mediaqueries inside your code, totally aligned with Foundation code... the best part?, if you change breakpoint sizes at mid-development, you just need to change the sizes on the _settings.scss file and all code will update on the next build.
As you tagged this question on "Foundation" and mentioned on the question body, I did my answer deliberately Foundation-centric. Hope this helps.
I usually go for a single breakpoint at 768px.
With that I go for three queries (and they worked out pretty well so far) :
desktop (min-width is 768) [sheet #1]
mobile (max-width is 768) [sheet #2]
portrait (according to orientation) [sheet #2]
I don't think there's really a strict and fixed set of breakpoints that everyone should be using, I feel like it's more depending on what you need for your website.
Although, if you still wanna have a look at a set of breakpoints, I have bookmarked this a long time ago : ResponsiveDesign.is - breakpoints
You can use js to calculate the value of the font size in the HTML, then use a framework such as CSS to do the calculations dynamically
My site(www.acweb.com.cy) is having a problem showing the navbar on the top right of the screen. When its resized on at the width of 768px its displaying both the "js-fh5co-nav-toggle fh5co-nav-toggle" and the regular navigation bar which is the horizontal for the bigger screens. So when its open on my small ipad is showing both the navbars.
Second off all i dont know much of sass and am using the koala program to edit the templates scss files. Additionally i removed all _(underscore) from the scss filenames cause koala wouldnt read the files. At last when am loading the site and opening the developer inspector within firefox the navbar is read as _navbar.scss instead of navbar.scss as i renamed it.
Thanks for the help!!
Your responsive media query codes are colliding at some places, you need to correct that. That's the reason both navbar are visible from 768px to 765px.
This is what your max-width and min-width are at present as below,
#media screen and (min-width: 768px){
.......
.....
}
#media screen and (max-width: 768px){
.......
.....
}
You need to either increase or decrease any one of there width. You can make changes as below,
#media screen and (min-width: 769px){
.......
.....
}
#media screen and (max-width: 768px){
.......
.....
}
So when its open on my small ipad is showing both the navbars.
iPads have a different pixel density than your normal computer monitor, this may be confusing when using css media queries and might even fool your css into thinking it's in a totally different media query.
I suggest checking out this site to get an idea of why your iPad is showing such a different website than your desktop/laptop:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
For more information about pixel density and specifically Apple's Retina display, this is where you need to be: https://en.wikipedia.org/wiki/Retina_Display
Quick workaround (not the best possible solution)
At the bottom of your main.js file, add this line after all the other methods:
$('.js-fh5co-nav-toggle').removeClass('.fh5co-nav-toggle');
So that your function will be:
// Document on load.
$(function(){
parallax();
burgerMenu();
clickMenu();
windowScroll();
navigationSection();
goToTop();
// Animations
homeAnimate();
introAnimate();
workAnimate();
testimonialAnimate();
servicesAnimate();
aboutAnimate();
countersAnimate();
contactAnimate();
$('.js-fh5co-nav-toggle').removeClass('.fh5co-nav-toggle');
});
This will remove the general class when both of them are used for the navigation.
I am developing a page using CSS3 media queries using the mobile first approach, meaning I start small and work my way up.
But now I am encountering a problem: How to deal with 'style bleeding' for visibility classes?
Let me explain what I mean – when my first media query looks like this:
#media only screen and (min-width: 20em) {
// Styles here
}
These styles don't get applied to screens smaller than 20em. This actually is no problem because the styles that are not wrapped up in a media query are basically the first media query (I hope you get what I mean).
But now I want to introduce visibility classes to hide elements for certain screen sizes. The problem is, that these styles basically get inherited. See:
#media only screen and (min-width: 20em) {
.hidden-first {
display: none;
}
}
Any element with the class hidden-first gets hidden as soon as the screen is 20em wide or wider. But I only want to hide the element as long as the media query is active.
How do I do that – is there a way around resetting the style inside another media query?
I suggest you create a class like hide-for-mediumand create rule for it display:none !important;
Take a look at the Foundation framework and see how the do it. I guess it's the best way to deal with this situation.
To make this short and simple, I have a <div> in which I wish to be hidden if the user's resolution is 1024x768.
So if I have a separate CSS file for the css left_bar, then the template with <div id='left_bar'> how would I go about having the resolution check query?
#media all and (width:1024px) and (height:768px) {
/* CSS rules here */
}
Although, that's awfully specific. Usually you use media queries with min-width or similar.
I'm building my first site with Twitter Bootstrap and experimenting with fluid layouts. I've set my container to be fluid, now the content inside takes up the full page width and adapts as I resize the browser.
The design I'm working on was created for a maximum width of ~950px.
I've checked variables.less and responsive.less, and the Bootstrap documentation; I can't quite work out how to make this happen.
I also tried adding the following to my style.css:
body {
max-width: 950px;
}
You don't have to modify bootstrap-responsive by removing #media (max-width:1200px) ...
My application has a max-width of 1600px. Here's how it worked for me:
Create bootstrap-custom.css - As much as possible, I don't want to override my original bootstrap css.
Inside bootstrap-custom.css, override the container-fluid by including this code:
Like this:
/* set a max-width for horizontal fluid layout and make it centered */
.container-fluid {
margin-right: auto;
margin-left: auto;
max-width: 1600px; /* or 950px */
}
Edit
A better way to do this is:
Create your own .less file as a main .less file ( like bootstrap.less ).
Import all bootstrap .less files you need. (in this case, you just need to Import all responsive .less files but responsive-1200px-min.less)
If you need to modify anything in original bootstrap .less file, you just need to write your own .less to overwrite bootstrap's .less code. (Just remember to put your .less code/file after #import { /* bootstrap's .less file */ };).
Original
I have the same problem. This is how I fixed it.
Find the media query:
#media (max-width:1200px) ...
Remove it. (I mean the whole thing , not just #media (max-width:1200px))
Since the default width of Bootstrap is 940px, you don't need to do anything.
If you want to have your own max-width, just modify the css rule in the media query that matches your desired width.
In responsive.less, you can comment out the line that imports responsive-1200px-min.less.
// Large desktops
#import "responsive-1200px-min.less";
Like so:
// Large desktops
// #import "responsive-1200px-min.less";
Unfortunately none of the above solved the problem for me.
I didn't want to edit the bootstrap-responsive.css so I went the easy way:
Create a css with priority over bootstrap-responsive.css
Copy all the content of the #media (min-width: 768px) and (max-width: 979px) (line 461 with latest bootstrap version 2.3.1 as of today)
Paste it in your high priority css
In your css, put #media (min-width: 979px) in the place where it said #media (min-width: 768px) and (max-width: 979px) before. This sets the from 768 to 979 style to everything above 768.
That's it. It's not optimal, you will have duplicated css, but it works 100% perfect!
I don't know if this was pointed out here. The settings for .container width have to be set on the Bootstrap website. I personally did not have to edit or touch anything within CSS files to tune my .container size which is 1600px. Under Customize tab, there are three sections responsible for media and the responsiveness of the web:
Media queries breakpoints
Grid system
Container sizes
Besides Media queries breakpoints, which I believe most people refer to, I've also changed #container-desktop to (1130px + #grid-gutter-width) and #container-large-desktop to (1530px + #grid-gutter-width). Now, the .container changes its width if my browser is scaled up to ~1600px and ~1200px. Hope it can help.