I'm a bit lost with CSS handling in order to manage stylesheet about screen size. I'm developing a Django website project and I'm confronting to a very delicate situation.
My project is developped on a very good screen (Retina screen) with a very high resolution. But, when I'm watching my project on a very bad screen resolution, some elements are not situated where it should be.
I put for example part from a .css file corresponding to HTML base template :
/* ############################################# */
/* CSS File about Home application properties */
/* ############################################# */
#import url("http://bootswatch.com/flatly/bootstrap.min.css");
/* If screen less than 1440px */
#media screen and (max-width: 1440px) {
.navbar-right {
/*padding-left: 250px;*/
position:absolute;
right:2%;
}
}
/* If screen bigger than 1440px */
#media screen and (min-width: 1450px) {
.navbar-right {
/*padding-left: 400px;*/
position:absolute;
right:2%;
}
}
/* Define background color from upper navbar */
.navbar-inverse {
background-color: #007A5E !important;
}
/* DatasystemsEC tab */
.navbar-inverse .container-fluid .navbar-header .navbar-brand {
color : white;
}
/* Tab properties from navbar */
.navbar .nav > li > a {
color: white;
}
footer {
text-align: center;
margin-top: 35%;
}
How I can handle CSS stylesheet in order to adapt the file to screens resolution ?
Can you tell me what is right or wrong in following ideas :
I have to write only % and not px in order to take account screen resolution
I have to write CSS file firstly for screen resolution between a and b, then between b and c, ...
For example, the main content in my Django website corresponding to the class = "col-sm-8". I added margin-top = -68% in order to situate the content exactly where I want. But with my friend's screen, the same block is not where it should be.
I'm really new with CSS (and Django too) because I'm learning at the same time I'm coding in order to realize my project.
Thank you if you could help me on this subject.
Current consensus is to approach web development "mobile first". That means start from the smallest screen size and work up to the largest. Bootstrap does exactly that.
In order to decide what are the best suited media queries for your project see this tutorial and this documentation on MDN. Since you are using Bootstrap, I would suggest following the same breakpoins to avoid inconsistencies.
Also, consider using vw and vh instead of percents, when appropriate (I believe this might be part of that margin-top problem). Percents are relative to a container's dimensions. vw and vh are relative to the width and height of the viewport (see in MDN).
Related
I installed a plug-in called Display-listings-shortcode, and added the columns-extension to allow for columns the blogs halfway down the homepage at RitaNaomi.com will be horizontally displayed on a web browser. It looked whacky at first with titles being scrunched beside and underneath the image, but eventually i figured out how to edit the .display-posts-listing class to change the display
.display-posts-listing .listing-item {padding-bottom:30;}
.listing-item
{
float:left;
width:22%;
margin: 40px
}
But when I look at it on a mobile device, they're all scrunched together as if it was still being displayed on a laptop. I want to have it listed vertically and not horizontally, because thats the way it would fit best.
I tried (and it didn't work) to use #media to change it through the css, but it didn't work.
#media handheld {
.display-posts-listing .listing-item {
clear: both;
display: block;
}
.display-posts-listing img {
float: left;
margin: 0 10px 10px 0;
}
}
You shouldn't be using #media handheld {} since it's been deprecated according to MDN.
You're better off targeting pixel-width values. You may need a couple queries, and some of the oldschool standards were 1023px, 767px. Feel free to replace the 900px below with whatever works for you.
#media only screen and ( max-width: 900px ){
.display-posts-listing .listing-item {
/* CSS Here */
}
}
Removed the custom CSS that was already added from the original theme. It was interfering with the Columns display.
Not using #media handheld {} because it was deprecated (thanks to xhynk for the response), and instead used the command (max-width: 768) , the point at which the title and image css look funky.
To make the title display on its own line on a bigger screen, i added this to my CSS:
.display-posts-listing .listing-item .title { display: block; }
And now i'm using the above media query to figure out how to style it on smaller devices.
Complete CSS: https://gist.github.com/billerickson/17149d6e77b139c868640a0ed3c73b3a
I have a Chrome-only problem with my Bootstrap (v3.3.5) layout css at exactly 767px where the layout styles simply aren't being applied.
Here's the behaviour after experimenting with the console on 3 browsers...
Chrome
-window.innerWidth of <= 766 - correctly shows mobile layout
-window.innerWidth of == 767 - incorrectly applies no layout styles
-window.innerWidth of >= 768 - correctly shows full screen layout
Firefox
-window.innerWidth of <=766 and ==767 - correctly shows mobile layout
-window.innerWidth of >=768 - correctly shows full screen layout
Safari
-behaves fine although window.innerWidth doesn't correctly correspond to the breakpoints (perhaps something to do with Safari not accounting for scrollbars in the same way)
All my media queries have been created as follows...
#media (max-width: 767px) {
/*small view*/
}
#media (min-width: 768px) {
/*full view*/
}
I've experimented changing these values so there's an overlap (e.g. a min-width of 767px) but it has no effect.
Apologies if this is a little vague, but I don't really know where to go from here in investigating the problem and have found only one report of similar behaviour from a previous version of bootstrap (https://github.com/twbs/bootstrap/issues/1531).
Does anyone know of any possible reason that I'd be seeing this on Chrome only? Either way, any advice on an appropriate way to investigate would be very much appreciated.
-- EDIT --
After hours of research I tested this simple file...
<html>
<head>
<style>
#media (max-width: 767px) {
.headlineText {
font-size: 10px;
color: red;
}
}
#media (min-width: 768px) {
.headlineText {
font-size: 10px;
color: green;
}
}
</style>
</head>
<body>
<h1 class="headlineText">this is a headline</h1>
</body>
</html>
On Chrome only - at 767px the text is neither green or red - it's black, Times New Roman, and considerably bigger than 10px. Of course I can't replicate this by uploading to a fiddle/codepen - so it must be something to do with the fact I'm running on a localhost (via MAMP). Absolutely zero ideas why that would be the case, but at least it doesn't seem to be something that will affect me in a live environment
Chrome (for me version 89.0.4389.82 on Win10) seems to work with fraction of pixels. Hence, increasing all lower breakpoint thresholds by .9px solved the issue for me. So for example
max-width :767px needs to become max-width :767.9px
Make this full screen and resize your window. It works for me in Chrome and has no display of "does not work" in between.
.works {
display: none;
}
.does-not-work {
display: block;
}
#media(max-width:767px){
.works {
display: block;
}
.works::before {
content: 'max-width: 767px | ';
}
.does-not-work {
display: none;
}
}
#media(min-width:768px){
.works {
display: block;
}
.works::before {
content: 'min-width: 768px | ';
}
.does-not-work {
display: none;
}
}
<span class="works">works</span>
<span class="does-not-work">does not work</span>
Side note, based on comments: About a year ago I had the same issue with a huge website. Result of a team of 6's work of nearly two years. Bits of code pouring in from all sides. I was the one gluing front-end together, making sure it all worked. You can imagine #media queries were a mess. I only got rid of the bug by refactoring all queries using mobile first principle - I grouped all #media's using Bootstrap's exact order. Fixed it for me. To this day I don't know what caused it. It was (slightly) broken on (exactly) 768px and 992px before.
Created a responsive site in Dreamweaver CS6 using the Fluid Grid system. All break points initially worked fine, and I had 3 separate layouts for desktop, tablet, and mobile; with different resolutions, each Fluid Grid Layout Div Tag would rearrange on the page into different columns. Every div on the page is set up with width: __%; in the CSS so that they expand and contract with the browser size.
Everything is responsive on the page and works correctly; however, somewhere during development I lost the Tablet break point, in a sense. When the browser reaches the 768px width which should break the page into the Tablet layout, it instead jumps straight to the mobile formatting, which should not happen until 480px.
In Dreamweaver, I can view the formatting I have set for the Tablet layout, in Design mode it will show me the correct layout of columns of DIVs and content; however, once I place DW in Live mode, or preview in a browser, it no longer has the Tablet functionality, just Desktop and Mobile formatting.
I will post the CSS code for the #media queries and the subsequent .gridContainer code - trying to see if a solution could be found without having to post the entire CSS code, as there's quite alot. Please let me know if I need to edit my question and include more code - perhaps the truncated code of a few DIVs and their responsive values for each layout? I'd be happy to post any more information if it will help resolve this issue.
Thank you in advance for any support or advice!
CSS:
/* Mobile Layout: 480px and below. */
.gridContainer:before, .container:after {
display:table;
content:"";
zoom:1 /* ie fix */;
}
.gridContainer:after {
clear:both;
}
.gridContainer {
width: 96%;
padding-left: 1.5%;
padding-right: 1.5%;
border:1px solid #00133e;
background: #004aa1;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer:before, .container:after {
display:table;
content:"";
zoom:1 /* ie fix */;
}
.gridContainer:after {
clear:both;
}
.gridContainer {
width: 96%;
padding-left: 1.5%;
padding-right: 1.5%;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
.gridContainer:before, .container:after {
display:table;
content:"";
zoom:1 /* ie fix */;
}
.gridContainer:after {
clear:both;
}
.gridContainer {
width: 96%;
padding-left: 1.5%;
padding-right: 1.5%;
}
}
Found the solution:
Near the end of my mobile layout CSS style code, there was an extra curly brace. Removed the brace, responsiveness returns.
Very simple solution; thanks to #MrRO for pointing me in the right direction to look!
Assuming, this is copy paste of actual code. In the given CSS, I believe you have have missed one curly braces, which was suppose to close the style for <480 width devices.
background: #004aa1;
} <-- Here one more "}" needed
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer:before, .container:after {
I am new to learning responsive design. What I have noticed on my journey is that when I put media queries at the bottom of the stylesheet, everything works flawlessly in regards to breakpoints. If I put the media queries at the top of the stylesheet, nothing works, and only recently I found out that I need to add !important and max-DEVICE-width ( as opposed to max-width) to the css that is being changed.
Why is this? Why do the media queries work on both desktop and mobile when put at the bottom of the stylesheet.
Why is it that when I put media queries on the top of the stylesheet I need to add !important and also max-DEVICE-width in order for the breakpoints to work on desktop and mobile?
Because css is read from top to bottom. The rule that is set last, is the one that will be executed.
Translating, it is like this:
#media (max-width: 600px) { //If my screen fits this size
.text {
color: red; //Paint it red
}
}
.text {
color: yellow; //Now, forget about everything and paint it yellow!
}
When you add !important is like saying:
#media (max-width: 600px) { //If my screen fits this size
.text {
color: red !important; //Paint it red, and don't change it ever!!!
}
}
.text {
color: yellow; //Ok, I'm not going to paint it yellow....
}
CSS is read from top to bottom.
Everything that is below some other css will overwrite what's on top of it.
It is possible however to use !important at the end of a CSS parameter to make it overwrite everything else
body{
background-color: black !important;
}
body{
background-color: pink;
}
The background-color will be black.
If you remove the !important, it will be pink.
Media queries cascade with the rest of the stylesheet. You can intersperse media queries within your stylesheet, and so you can also cascade styles as needed.
For example:
.my-class {
color: red;
}
.my-class--modifier {
color: blue;
}
#media screen and (min-width: 760px) {
.my-class--modifier {
color: green;
}
}
.some-other-class {
width: 200px;
}
#media screen and (min-width: 760px) {
.some-other-class {
width: 700px;
background-color: gray;
}
.some-other-class .my-class {
border: 2px solid red;
border-radius: 4pt;
}
}
This works precisely due to CSS's cascading nature. You can organize media queries as required based on sections, individual selectors and more.
Basically you are using media queries when you want to apply CSS styles depending on a device's general type (such as print vs. screen), specific characteristics (such as the width of the browser viewport, or environment (such as ambient light conditions).
When you started designing, you generally started doing it for one device of known specifications. So you design it according to you current device and then apply it for other screen sizes.
Hence the order goes like this: Make complete design --> Add the media query to fit for desired screen sizes at the bottom.
It is preferrable to write the query at the bottom became of precedence. That will save you from stress of using important! everytime.
I'm creating a responsive design so my website is viewed well on both Desktop and Mobile devices. On my website I have a pretty large background image on one of my divs.
Now what I have been wondering is: Does the background image on my div load if it is replaced by a color in a media query?
Example:
div {
background: url(img/large-image.jpg);
}
#media screen and (min-width: 240px) and (max-width:830px) {
div {
background: #000;
}
}
No it wouldn't as you're completely overriding the background property*.
For reference, however, if you wish to keep your image and add in a colour, rather than using the background property, use the individual background-image and background-color properties:
div {
background-image: url(img/large-image.jpg);
}
#media screen and (min-width: 240px) and (max-width:830px) {
div {
background-color: #000;
}
}
* Note that this is browser-specific; to save time the majority of browsers will only load resources when they're required. See also: Are unused CSS images downloaded?
Your images are still loaded by browser, as long as they are in your CSS. You can check it by using Chrome Debugger Tool > Network.
There is a interesting article about image load & performance in responsive design:
http://mobile.smashingmagazine.com/2013/09/16/responsive-images-performance-problem-case-study/