I have a css code like this:
#charset "utf-8";
/* long code just an example of top */
.show_hide_top a.showLink { /* small red link */
left: 39% !important;
padding-left: 8px;
top: 15% ;
}
#media only screen and (min-width: 1300px) and (max-width:1500px) {
/* long code for these devices ex: */
.show_hide_top a.showLink {
left: 39% !important;
padding-left: 8px;
top: 18% ;
}
}
#media only screen and (min-width: 769px) and (max-width:1299px) {
code for these devices
}
#media only screen and (min-width:481px) and (max-width: 768px) {
code for these devices
}
However, my computer (1600) picks up the media code for the 1300-1500.
Something (probably silly) is wrong.
Thank you so much for your opinion.
Media queries like this don't target devices, they target the width of the browser viewport in pixels. #media only screen and (min-width: 1300px) and (max-width:1500px) was being picked up because your browser's viewport was in between 1300 pixels wide and 1500 pixels wide.
To demonstrate this idea better, try resizing your browser window and watch the different media queries being applied and removed.
When I was using media query, firefox was not recognizing a generic id like #upper.
Example:
<div id="container">
<div id='left"> content here </div>
<div id="center">
<div id="upper"> content here </div>
...
</div>
<div id="right">content here </div>
</div>
As soon as target #center #upper in the CSS, the media query worked ONLY for the target media and not as a generic rule.
Only #upper? Nope... It was reading and applying the media query for all devices, overwriting the generic CSS.
At first, toggling between min-devide-width and min-width seemed to work, but the problem persisted. So this is the permanent fix.
Make sure to use both full path in the generic CSS and in the media query.
Related
my website use bootstrap 4 and a css file i made.
in the bottom of this css file, i put some media queries:
#media (max-width: 575px) {
.address .contact {
text-align: center;
}
}
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
}
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) { }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) { }
#media screen and (min-width:768px) and (max-width:992px){
.left{
margin-left: 0;
width: 100%;
}
.picto{
width: 40%;
}
}
And here is a part of code:
<section id="section_address" class="container">
<div class="row">
<div class="col-12 col-sm-6">
<div class="address">
<h5>ADDRESS</h5>
1 street,<br>
75000, PARIS
</div>
</div>
<div class="col-12 col-sm-6">
<div class="contact">
<h5>MYCOMPANY</h5>
01 11 22 33 44<br>
contact#mycompany.com<br>
http://mycompany.com
</div>
</div>
</div>
</section>
But my media queries are not working, except when i add !important to each line. But i can't do that for each line and i already use media queries and i never had to do that.
Bootstrap css file should be referenced before your custom css file in your html page. If not bootstrap css will Cascade or overwrite your rules.
Make sure your custom CSS added after all other CSS. Because your custom CSS should be added after all other CSS files. whereby your custom CSS will override other CSS.
Because CSS applies "top to bottom".
Thank you!!!
Most likely, the elements to which you applied your own CSS classes also have Bootstrap classes applied to them (like .row, column, col-12 and many others), and the Bootstrap CSS rules (especially those which combine several classes) have a higher specifity, which overrules your own classes.
To get the result you want, use the browser tools / inspector on those elements and look which CSS class / CSS rule / selector is applied. Then create a rule which uses the same selector (combination of classes) PLUS your own class, which will result in a higher specifity and therefore overrule the original Bootstrap rule.
Firstly, avoid using !important unless you absolutely have to, it's a maintenance hazard.
Instead, look at how you could make your rules more specific than the bootstrap ones. Inspect the DOM and look at the problematic rules, then update your selectors with reference to the specificity rules so that they take precedence.
Regarding your newly-added code:
#media (max-width: 575px) {
.address .contact {
text-align: center;
}
}
This selects for all .contact class elements as descendants of `.address' elements. This hierarchy isn't present in the pasted code.
If you want to select them both then you need a comma:
#media (max-width: 575px) {
.address, .contact {
text-align: center;
}
}
If that isn't specific enough then this almost certainly will be:
#media (max-width: 575px) {
#section_address .address, #section_address .contact {
text-align: center;
}
}
Other than that, I can't see .left or .picto anywhere.
I have a website that I developed, but I just got a screenshot from someone who was looking at it on a 2560 x 1600 monitor and it looks kind of ridiculous. What is a reasonable upper limit for screen resolutions to support? I'm concerned about negatively impacting load time by adding a huge image. How can I deal with this properly?
Solution 1: Maximum width
Use a container div with the following CSS:
#innerbody {
width: 100%;
max-width: 2000px;
margin: 0 auto;
}
Put all HTML in this container (wrap the container around all HTML), like this:
<body>
<div id="innerbody">
... your page ...
</div>
</body>
I would also add a nice subtle background color to the body, to mark where the 'page' ends, like this:
body {background: #eee;}
#innerbody {background: #fff;}
Solution 2: Mask the quality
If you are only worried about the (poor) image quality, you can add the container div (from solution 1) and use this CSS to overlay a hatch (diagonal lines). This is trick is often used for low quality full-screen video, but also works for background images.
#innerbody {
width: 100%;
background: url(/hatch.png);
}
Solution 3: Media queries
Got a big screen? Thou shall get a big image. Got a small screen? Thou shall get a small image. Sounds logical, right? You can achieve this by using media queries. This works like this:
#media screen and (max-width: 500px) {
body {
background: url(small_image.jpg);
}
}
#media screen and (max-width: 1000px) and (min-width: 501px) {
body {
background: url(medium_image.jpg);
}
}
#media screen and (max-width: 2000px) and (min-width: 1001px) {
body {
background: url(big_image.jpg);
}
}
#media screen and (min-width: 2001px) {
body {
background: url(really_big_image.jpg);
}
}
For each screen size ONE of these media queries will be true. That image wil be served.
To address your load time concern, one option is to use media queries so you can control the background image based on visitor viewport size. e.g.
#media (max-width: 800px) {
.div-with-background{
background-image: url("background-sm.jpg");
}
}
#media (max-width: 1200px) {
.div-with-background{
background-image: url("background-md.jpg");
}
}
#media (min-width: 1201px){
.div-with-background{
background-image: url("background-lg.jpg");
}
}
What is a reasonable upper limit for screen resolutions to support?
It depends on your visitors. If you use Google Analytics, you can get details on this by going to Users > Technology > Browser & OS and under 'Secondary Dimension' search for 'Screen Resolution'
Hope this helps!
Website I've been working on just started ignoring all media queries. I can't seem to find the problem.
http://fnd.instinctdigitalmedia.com/
On the homepage the images under the 'Browse our Products" section shoud change based on screen width. at 320px, 480px, and 768px screen width it still shows the originals.
You must target the ancestor or parent to override what the previous query has done.
From 760px to override its style rule you should add call the parent #content of the img to override the rule in 760px
Example:
#content > img {width:25%;}
}
#media screen and (max-width : 480px){
#content > img {width:50%;}
}
#media screen and (max-width : 760px){
img {width:100%;}
}
There's a few issues I can see. Firstly, media queries aren't firing because:
There's a closing parenthese missing on line 899, flipping an error. To find this, I added my own media query showing something obvious, and pasted it at the top of the CSS, then further and further down until it stopped working.
Also, the mobile view failed because you are missing 'and' in your media query:
#media only screen (min-width: 320px) and (max-width: 480px) {}
It should be:
#media only screen and (min-width: 320px) and (max-width: 480px) {
As for the width break itself, a handy trick with responsive designs is to limit this kind of issue from ever occurring before you even start styling (this is a rough guide, not a comprehensive list):
img, video, object, iframe, fieldset, table, form, article, section, header, nav, footer {
max-width:100% !important;
}
Even when respecifying the widths of your images, you are still using pixel widths instead of a relative measurement like percentages. This means the images will stay a static size and won't resize correctly to the screen no matter what.
Lastly, you are using a 'bracketed' approach for your media queries. This means rather than allowing your existing CSS to cascade down your media queries, saving you having to specify things twice that aren't going to change, you must repeat the same code many times.
For example, you currently have:
#media only screen and (min-width: 768px) and (max-width: 1024px) {
.product-cat-1 {
position: relative;
display: block;
margin: 0 auto 10px auto;
width: 430px;
height: 150px;
background-image: url('http://localhost/firstnations/wp-content/uploads/2014/04/home-lighting.jpg');
}
}
Anything below 768px must be specified all over again. This leads to massive amounts of repeated code, and a lot of extra work for you. The simpler approach would be:
#media only screen and (max-width: 1024px) {
/* all styles for under 1024px */
}
Then for anything smaller:
#media only screen and (max-width: 768px) {
/* only styles that need to change when under 768px wide */
}
I'm working on a responsive website.
The logo image size will change as of on different screen size devices
the html part
<div class="logo responsive-img">
<img id="logo-header" src="assets/img/logo2.png" alt="logo" />
</div>
the media css
#media (max-width: 360px) {
/*Logo*/
.responsive-img {
background-image: url(../img/logo-320.png);
width:200px !important;
height:28px !important;
}
.responsive-img img {
display:none;
}
}
#media (max-width: 480px) {
/*Logo*/
.responsive-img {
background-image: url(../img/logo-mobile.png);
width:300px !important;
height:42px !important;
}
.responsive-img img {
display:none;
}
}
I tested it on local desktop browser, chrome and firefox. When browser resized to 480 the logo image replaced. However when browser keep going resize to 360, the logo img won't change.
Short answer
Move your 480px media above the 360px media.
Long answer
That's because order of occurrence matters in css. If two rules have the same specificity and they both define the same properties, the one that comes after will override the one that comes before.
.apple {
color:red; //this gets applied first
}
.apple {
color:blue; //this gets applied second, which overrides the first
}
The same applies to media queries. In your case all your defined properties and rules are the same.
It works above 360px because the 360px media doesn't get applied and the 480px media does.
Your 360px media does work at 360px. It just so happens that your 480px media comes after it and also gets applied since the screen width is in fact less than 480px. So the 480px media will override the same properties that your 360px media defines.
new to css3 media queries and responsive design.
I would like to know how to show something (say a div) on small screens only but not on large screens.
I've tried something like:
#media (max-width: 480px) {
.show-on-small-only{ display:block; visibility:visible;}
}
...
and anything larger has eg:
#media (max-width: 768px) {
.show-on-small-only{ display:hidden; visibility:none;}
}
it doesn't seem to work as intended.
might be worth pointing out that i'm using bootstrap 2.0
It's a better practice to make all your default style mobile-friendly and then use min- media queries to size up:
div { /*put whatever your default styles are first*/ }
/* Then use the media query to hide it at 481 and wider */
#media all and (min-width:481px) {
div { display:none }
}
Look at 320andup and Skeleton and the CSS of this page for examples. Look at the helper classes towards the bottom of this CSS for differences between invisible/hidden etc.
You can put this first
/* for small screens, only execute in if statement */
#media only screen and (min-width : 320px) and (max-width : 768px) {
.smallOnly {
visibility:visible!important;
display:block!important;
}}
Then at the bottom of it put it for large screens (always execute since not in if statement)
.smallOnly {
visibility: none;
display: none;}
The important tg makes it so that anything with important always overwrite everything else and it will be the master rule regardless of where it is in the file.