For me HTML + CSS is quite complex. HTML + CSS + #media is nightmare. Now my HTML + CCS looks like spagetti. Pls help me with questions:
How should I organize my SCSS includes: by function (header/footer)
or by dimension (0_480)?
How should I use #media limits:
max-width only: 0-420, 0-870, no limit
min-width + max-width: 0-420, 421-870, 871+
min-width only: 870+, 420+, 0+
To test site for Adaptability can be easily and quickly!
http://plastilin5.com/tools/
here's a good example (check in the lower part of the site)
http://m.alistapart.com/articles/responsive-web-design/
you can place all your stylesheet imports in the header.
On how to use #media max and min widths, some developers would argue strongly for “mobile first”, e.g. focus on styles for small screens first, and then override those styles for larger screens.
http://stuffandnonsense.co.uk/blog/about/320_and_up/
I think that would match most closely with your “max-width only: 0-420, 0-870, no limit” option.
Here is what I do:
write CSS for maximum size only
at the end of the CSS file (or as #import if the project is to big) add "#media screen and (max-width: 1700px)" and write all the changes for that resolution
repeat previous step for every needed resolution
The main reason I think this is the best approach is that for the smaller screens you can (and most probably will) decide not to show some of the elements, and you'll be able to do that by simply adding display:none; to those elements on the first (biggest) resolution they are to be hidden on. While when you're building your CSS the other way around, adding elements becomes a bit harder to follow.
Sass has what they call "media query bubbling", which means that no matter what nesting level your media queries are placed at, they will bubble up to the top. This is both a good thing and a bad thing if you aren't using it responsibly (good that you can keep your media queries grouped with related styles, bad if used excessively since you end up with 100s of media queries all over the place).
What I've found that works for my workflow is to group together media queries as much as possible with the block of content that its for. Each major block of styles is broken up into its own file (master layout, image gallery, clients, etc), and each file will have as few numbers of media queries as possible (typically only 1 or 2, 3 or more for more complex blocks).
$x-small-device: 25em; // smallest
$small-device: 35em; // larger mobile
$medium-device: 55em; // tablet or really small desktop
.clients {
// no matter what resolution, these styles are always applied
#media (min-width: $small-device) {
// have our clients display in a 2-col layout
}
#media (min-width: $medium-device) {
// have our clients display in a 3-col layout
}
}
If you try to break it up based on the width of the device you're targeting, it is more difficult to find where the styles are located when it comes time to change it.
Ok, first of all I think that you should read more about CSS architecture. The first question is kinda complex and involves different concepts. I'll suggest to check OOCSS, SMACSS or Atomic design. There are some really great ideas. What I usually do is to use a mixture between all those things. I guess that you will find what it fits in your project.
Media queries should not be based on the devices or on some popular resolutions. You should set your break points based on the content that you have. Try to follow the Mobile First concept and see where the content needs updating. Very often the different break points are related to different parts of your site. I mean one media query may refer only the header of the application. Another only the footer and so on. I'll also suggest to use media queries bubbling. I.e. to place those parts inside the container that you want to change, not in a separate file or at the end of the current one.
Related
I simply want to reduce desktop view width slightly but can't get it to work with media query. My latest attempt is
#media (min-width: 992px) and (max-width: 1199.98px) {
html, body {
max-width: 80%;
}
}
but it has no affect. I don't think I want to mess with container b/c that would leave out the navbar. Using my own stylesheet (added below bootstrap cdn stuff) rather than using the media queries directly in template.html but I don't know if that makes any difference. Am I trying to do this the right way or am I completely missing something?
You don't want go banging around on high-level elements when using a layout library. This limits what you and others can do in the page later (say you want a full-width banner somewhere). You also probably don't want to casually override all instances of a Bootstrap class.
In this case, look at adding a custom class to the .container or .container-fluid element, limiting its width:
.container.narrow {
max-width: 80%;
}
Use that for any containers where you want a narrower width, and use containers without that class for wider content.
<div class="container narrow"> ... </div>
Whether you apply this in a media query is probably immaterial.
I was strugglng to find the answer to my screen not working correctly for the mobile and below answer from you worked like a charm. Thanks so much for your answer. I removed the meta-name line and it worked like a charm.
Mohan
#Beanic
I presume that you have added the viewport tag for that() –
Jan 22, 2020 at 12:50
Does anyone know why my media queries code doesn't work?Thanks!
#media only screen and (min-width:450px){
.dark-blue{
width: 25%;
}
.blue{
width: 75%;
}
}
More details in my github https://github.com/kmfb/udacityProjects/tree/master/column%20drop
Just move the #media to the bottom of the css page.
Check working example.
Cheers,
https://jsfiddle.net/frc7r123/
It mostly depends on your project because at the end of the day it is all about maintenance and adding more stuff to it easily.
So, if you are working on a project which only has a few media queries I would suggest leaving them all at the bottom of your stylesheet but putting comments on top of it to make it explicit and also easier for you to find it later.
However, if you know you are going to have a lot of properties meticulously defined in your media queries and also have various devices defined then I would suggest separating them out just for readability/maintenance reasons.
It works, but you need to place your media query below your other CSS. Otherwise it won't overwrite anything.
I'm working on a site which has to be compatible with many kind of devices, so I've chosen to use Bootstrap. My problem is that while I have a nice responsive grid layout, I don't see an out-of-the-box solution for making other visual parts of my site responsive. I mean for example font sizes, form field sizes, button sizes, etc.
What I want for example is to have normal button sizes for desktop, and large button sizes (.btn-lg class) for mobile. Similarly with form inputs. Is there a nice, global level solution for this way of responsiveness?
Thank for the answers.
EDIT: I would like to reuse the existing bootstrap classes as much as possible, with minimal added media-query or other code. I'm looking for something like "conditional classes" on elements based on resolution, like the following: if there is "sm" or smaller screen, add "btn-lg" to "btn"-s. If there is "md" or bigger, don't add anything, just use pure "btn". And something similar with form inputs.
Font-sizes and paddings are more simple with simple media-queries of course. My problems are mostly with form fields and buttons, just as I note in the corrected title.
I would like to avoid copying and duplicating more complex (like buttons and form fields) Bootstrap CSS code into my css
They are responsive to some extent. To add this level of responsiveness you must write your own media queries.
It's very easy. It's even easier if you are using SASS or Less.
See starting at line 260 in the variables file. Here's an excerpt.
#screen-xs: 480px;
#screen-xs-min: #screen-xs;
#screen-phone: #screen-xs-min;
A phone example:
#media (max-width: $screen-xs) {
// Change h1 size
h1 {
font-size: 20px;
}
// Change .btn font size.
.btn {
font-size: 10px;
}
}
If you are not using Sass or Less, just swap the variable $screen-xs with the value that you want--480px, for example.
use % rather than px.
Or use media queries within your css
I'm searching for a effective way to customize bootstrap layouts.
Currently i use layoutit.com to get the basic layout and then the software Brackets to edit.
I make changes to the less for customization.
But it is very complicated that way...my problems are:
-Layoutit is great but places some containers very oddly so you have to change that manually
-Brackets only shows you what css rules are used for specific html (just like firefox) but it cant show what less rules apply and it can handle the minified css stuff (whats that by the way) so you cant really make changes that way in a fast and effective way
-Editing within firefox works great, but it only edits css and can't save the changes.
So what can I do to layout fast and customize effective?
Any help?
Customising it in SASS and LESS is very easy, and also the most effective way--since that's your question. Take a look at the source, specifically in the variables.less file starting at line 240.
// Number of columns in the grid system
#grid-columns: 12;
// Padding, to be divided by two and applied to the left and right of all columns
#grid-gutter-width: 30px;
Change those two values to the values you want, and you are essentially done.
If you are using containers, you will also want to look at the bottom of that file.
/ Small screen / tablet
#container-tablet: ((720px + #grid-gutter-width));
#container-sm: #container-tablet;
// Medium screen / desktop
#container-desktop: ((940px + #grid-gutter-width));
#container-md: #container-desktop;
// Large screen / wide desktop
#container-large-desktop: ((1140px + #grid-gutter-width));
#container-lg: #container-large-desktop;
Here you can customise the size of your containers.
Bootstrap also comes with mixins, so you can create your own grid with semantic names. The following example would provide a centred column with a width of 50% of your container size.
.post {
#include make-lg-column(6);
#include center-block;
}
I am building a website and I need it to behave so that if the window is fullscreen (or any size where width > X px) - it should show the sidebar. If the user resizes the window's width below a certain amount, the sidebar should disappear (display:none).
A prime example to look at is google's news page (news.google.com) - there is a right sidebar which is only visible when the width of the page is above a certain threshold.
I'm usually pretty good in searching google/stack exchange and finding the answer I need, but in this case, maybe it's because of the use of the word 'dynamic' but I can't think of any other way to phrase it, i'm getting a lot of hits which are not what I need.
If I were to think of a solution on my own, I would perhaps add a javascript listener which constantly monitors the x value of the 'viewable area' and have a function constantly running that would do something like, if viewable area X value is lower than my threshold, change the style of my sidbar div to display:none. I think that would work, but I don't know if it's the best way to do this.
Thank you.
What about max-width Media Queries?
#media screen and ( max-width: 768px ) {
/* When the viewport is 768px or less,
hide #sidebar */
#sidebar {
display: none;
}
}
Demo: http://jsfiddle.net/jonathansampson/6Pvyt/show/
For IE6-8, https://github.com/scottjehl/Respond
I believe CSS Media Queries is the best solution as answered already by Jonathan Sampson,
but as youve hinted at it in your question about using a javascript listener I thought I best explain a better (IMO) JS solution using jQuery's on event.
e.g.
jQuery(window).on({
"resize": function(){
if(jQuery(window).width() > 750) {
//code to show sidebar
jQuery(#sidebar).removeclass("hidden");
} else {
//code to hide sidebar e.g.
jQuery(#sidebar).addclass("hidden");
}
}
};
});
What you need is CSS Media queries. http://www.w3.org/TR/css3-mediaqueries/
I use Twitter's bootstrap framework which includes a whole slew of responsive screen functionality.