Anyway that I can retract this in a subsequent stylesheet without having to remove it from bootstrap-responsive. I don't like making changes to the bootstrap sheet directly.
#media (max-width: 767px)
body {
padding-right: 20px;
padding-left: 20px;
}
}
WHOOPS I had a missing brace when I tried this but it works!
#media (max-width: 767px) {
body {
padding-right: 0px;
padding-left: 0px;
}
}
Related
When i make the responsive of my web-site,
some media query works but the last ones don't.
/* work */
#media screen and (max-width: 1030px){
.section2 .content-card .title-card img {
max-width: 200px;
}
.section1 {
height: 1000px;
}
}
/* doesn't work */
#media screen and (max-width: 1030px){
.section2 {
padding-top: 15vh;
}
}
#media screen and (max-width: 260px){
.section2 {
padding-top: 6vh;
}
.section1 {
padding-top: 3vh;
}
}
In my code there are many more media queries but I had to remove them because of the code limits on the question.
Is there a limit to the number of media queries per file?
See attached picture. This shows that it is working.
In fact to do the responsive, I use the responsive mode with the devtools
is that why its not workingscreen shoot
I have this code in my first CSS file:
/* min-width */
#media (min-width: 768px) {
.navbar-static-top {
border-radius: 0;
}
}
/* max-width */
#media (max-width: 767px) {
.navbar-form .form-group {
margin-bottom: 5px;
}
.navbar-form .form-group:last-child {
margin-bottom: 0;
}
}
I have this code in a CSS file linked after the first file:
/* min-width */
#media (min-width: 992px) {
.navbar-static-top {
border-radius: 0;
}
}
/* max-width */
#media (max-width: 991px) {
.navbar-form .form-group {
margin-bottom: 5px;
}
.navbar-form .form-group:last-child {
margin-bottom: 0;
}
}
As you can see, the only difference between the two files is the min-width and max-width values.
I need the code in the second file to overwrite the first file. It needs to be as if the code in the first file doesn't exist. I do not have access to the first file, it's being pulled from a CDN. See this question: Modifying Bootstrap breakpoints after loading from a CDN. I customised bootstrap by changing the LESS variable #grid-float-breakpoint from #screen-sm-min to #screen-md-min to prevent the navbar from spilling over onto two lines. I diffed the customised and original compiled versions and the only difference was the values of the min-width and max-width of the media queries. The actual content of the media queries stays the same in both versions.
#wrap {
background: white;
margin: 20px 15px;
padding: 10px;
}
#media screen and (max-width: 600px) {
#wrap {
margin: 0;
padding: 0
}
}
These styles seems to be working if I open new browser window and try to resize it. But if I refresh windows once then #media does not work. Then I need to close the browser and open it againe to open the same site to re-enable #media styles. What is going on here?
#media only screen and (max-width: 600px) {
#wrap {
margin: 0;
padding: 0
}
}
I find it works best when you have the word "ONLY" in the media query. Heres an example of the bootstrap media queries.
https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries
If that doesnt work try a hard refresh to clear your browser cache.
I've got the following two media queries:
#media (max-width: 800px) {
.login{
margin-top: 5%;
}
}
}
#media (max-width: 204px) {
.login{
text-align: center;
margin-right: 0%;
}
}
}
Desktop to mobile
When commenting out the top query the bottom one executes
When applying the bottom query styling in the developer tools it works
I've read this about queries: https://css-tricks.com/logic-in-media-queries/
I must not understand something right.
Looks like you've got one too many closing braces which might be messing things up.
#media (max-width: 800px) {
.login {
margin-top: 5%;
}
}
#media (max-width: 204px) {
.login {
text-align: center;
margin-right: 0%;
}
}
You have added a extra closing braces. Please remove it.
#media (max-width: 800px) {
.login {
margin-top: 5%;
}
}
#media (max-width: 204px) {
.login {
text-align: center;
margin-right: 0%;
}
}
I would like to edit a couple things in the media queries of LENSA, a Wordpress theme. My edits do not work.
For example, I want to change this class:
.left {
width: 70%;
float: left;
}
So I write it like this:
#media only screen and (max-width: 480px) and (min-width: 320px){
.left {
width: 100%;
float: none;
}
}
There is no change when the screen is 480px....
Site: www.karaokesharksf.com
I think that #media statement might be over-complicating it. Why not try just this?
#media (max-width:480px) {
.left {
width:100%;
float:none;
}
}