I am trying to overide bootstrap's media query and it seams no matter what i do, nothing is willing to work.
This is the code that wont work for me
#media (max-width : 1200px) {
.navbar{
width: 90%;
}
}
Please Provide Your HTML,
try !important to Overwrite the Property.it will give priority to your overridden Code
Solved by #Drew_Kennedy:
Try using !important, or make your own navbar class. You can get
Bootstraps css from the dev tools, and change what you want.
I made an example for you based on his comment:
Example
CSS:
#media (max-width : 1200px) {
.navbar{
width: 90% !important;
}
}
For other examples of when to use !important
Related
What is the best practice for using breakpoints in CSS? I need to have a mobile breakpoint, tablet (768*1024) and desktop.
Is it with sass variables? CSS custom properties it maybe other way?
You use media queries. https://www.w3schools.com/css/css_rwd_mediaqueries.asp
For example:
#media only screen and (max-width: 600px) {
body {
background-color: #f00;
}
/* css here will take effect when the query is true */
}
This will turn the background-color of body to #f00 (red) when the width of the screen is 600px or less.
So what I discovered is that there are 2 most common ways to work with resolution breakpoints. The first one is to write the breakpoints in scss variables and then use them as literal (interpolation).
$desktop: 'screen and (min-width:1024px)';
And then use it like so:
#media #{$dektop} {
color:red;}
The second way which I prefer is to use mixins with #content
#mixin on-dektop {
#media screen and (min-width:1024px) {
#content }
}
And use it like so:
#include on-desktop{
color:red;
}
There is an excellent article at css-tricks website
https://css-tricks.com/snippets/sass/mixin-manage-breakpoints
I have done a website in ReactJS and SASS. Everything went well until I tried to make it responsive. The width is weird on smaller devices.
This is the website: https://uidea3.netlify.app/
Help me! Thank you!
Your .header class has fixed width of 1024px. Remove it and the website will not overflow. If you need to make it responsive then you can add the media query like this. You will need to figure out the correct breakpoints for your use case you may refer to the bootstrap breakpoints
#media only screen and (min-width: 1023px) {
.header {
width: 1024px;
...rest of properties
}
}
#media only screen and (max-width: 1023px) {
.header {
width: 100%;
...rest of properties
}
}
Explore on react-media a package available in npm. It will render component or element based on your configured device size.
I have multiple media queries running, however it is only using the largest query as opposed to the one that is correct.
See codepen here:
http://codepen.io/Not_A_Fax_Machine/pen/wdyjWO
#media (max-height: 346px) {
li.sidebar-list {
max-height: 69px !important;
}
}
#media (max-height: 480px) {
li.sidebar-list {
max-height: 96px !important;
}
}
CSS media query stacking should be done from the biggest width down to the lowest width. This is what CSS stands for - cascading style sheets.
Everything on line 2 overrides everything on line 1. - think about it this way when writing CSS
Meaning, your media query order should be as follows:
#media (max-height: 480px) {
li.sidebar-list {
max-height: 96px;
}
#media (max-height: 346px) {
li.sidebar-list {
max-height: 69px;
}
}
And this way you won't need to use !important, because the confusion should be over by now.
I hope that's not a problem with largest query actually css will render top to bottom, so finally it will render last css your largest query is there at bottom so rendering last query properties you can shuffle and check.
hope my answer help you.
I've got a quite strange error and I seriously can't figure out what I did wrong.
Currently I am working on a responsive website project with media queries.
After weeks of working I just realized that my media queries are not working in Safari but everywhere else.
Some examples of my CSS
#media (max-width: 1138px) {
.column-2 {max-width: 32.4%;}
}
#media (max-width: 950px) {
.column-2, .column-1 {
max-width: 17.9%;border-left:1px solid #e5e5e5;
}
}
#media (max-width: 640px) {
.column-2, .column-1 {
max-width:100%;
border-bottom:1px solid #e5e5e5;
height:20%;
width: 91%;
}
footer div.left, footer div.right {
width:100% !important;
}
}
Viewport Added in HTML head section
<meta name="viewport" content="width=device-width, initial-scale=1">
I've also tried with #media screen only and (...) {}. Still not working.
Any ideas what I'm doing wrong?
Your first breakpoint is missing the closing bracket after "max-width: 32.4%".
I'm not sure if this is the fix but it looks like you're missing a closing bracket after "32.4%" and possibly the "screen" part of your media query. You're not defining the range of what the media query handles. Here's a sample of a media query I wrote on a website I did (http://bonjourproject.com/):
#media screen and (max-width: 600px) {
.bottom {
width: 400px;
}
}
be sure to add "screen and" and see if that works for you.
Note: "screen" is not the only option here there are many more to choose from, but "screen" is pretty common. Let me know if this works!
Without seeing the full stack of your css/html there are many possibilities why this is happening but since its working on the other browsers and not iOS go and try adding this just to test and see if Safari picks it up:
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* put webkit CSS here*/
}
If still nothing then you need to check you html head syntax and css tag make sure there is no typo...try using console. This will at least help me/everyone figure what other steps you need. and as I mentioned try adding something basic in fiddle for us.
I added #media screen css in an effort to change my website but it doesn't seem to be responding. I added meta name = "viewport" content="width=1200, width=device-width" to the HTML and that was the only thing that effected the way my site looks on my phone. In the CSS I added the following but it has no effect.
#media screen
and (max-device-width: 768px)
and (orientation: portrait) {
body {
max-width: 600px;
}
#sidebar {
width: 0;
}
}
#media screen
and (max-device-width: 1000px)
and (orientation: landscape) {
body {
max-width: 800px;
}
#sidebar {
width: 0;
}
}
So how do I:
Get this to work, is my CSS wrong?
Is there a way to specifically get rid of the #sidebar in #media screen css?
Try This (Not Tested)
#media handheld and (orientation: landscape),
screen and (max-width: 1000px) {
body {
max-width: 800px;
}
#sidebar {
width: 0;
}
}
It is possible that an old version of your CSS file (before your changes) has been cached by your phone. If you have PHP, a nice way to get around this is:
<link rel="stylesheet" href="styles.css?ver=<?php print filemtime('styles.css') ?>">
That way, the stylesheet is only redownloaded when it needs to be.
If you don't have PHP, you can always just change the ?ver= paramater by hand each time you make a change in your CSS file.
This may or may not be your problem, I don't know. But it might help.
Code looks alright to me. Have you tried to do a hard refresh?
shft + f5 to my experiences fixes CSS when you don't notice a setting applied. Also deleting the cache helps too!
Also to get rid of #sidebar
#sidebar{
display:none;
}
will hide it when you hit your #media.
Hope that helps :)
#media works for everything. e.g my phone has a width of 720px for eg. when you have CSS #media for mobile at 720px; the following CSS will apply if that makes sense. Should read on mobile first responsive design if that's what you're trying to achieve, but that's a whole different topic. As for the code in your #media, you are targeting mobile devices, not laptops/computers. Incase you're not aware of that. so if I'm thinking right the CSS will apply only to mobile devices. For laptops/pc, #media (max-width: xxxpx) {} would do it :)
Thank you to Akira Dawson for the display portion. It appears that I needed to get rid of content="width=1200" for it to display properly on my iPhone. In addition what I ultimately did was got rid of #media screen and changed it to #media handheld for it to take effect on my iPhone. For whatever reason #media screen would not work. It's interesting because I was told #media handheld doesn't work on the iPhone but apparently it does.
As far as I understand it content="width=1200 says that your site needs a viewport of at least 1200px which is contrary to max-device-width: 768px
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> should probably fix your problem.
source: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag