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.
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
My page here: https://webtan.jp/
I hide this section:
#top__fullcarousel {
display: none;
}
but after hiding it, the following part (the siteContent block) didn't fit (
the error here)
I fixed the padding and it's only working with viewport(min width 1200px), not working rightly with other viewports (mobile, ipad...)
.siteContent {
padding-top: 129px;
}
How can I responsive it in this case?
You can explicitly set padding that you need for each by each device width:
#media screen and (max-width: 1000px) {
.siteContent {
padding-top: 129px;
}
}
#media screen and (max-width: 850px) {
.siteContent {
padding-top: 109px;
}
}
#media screen and (max-width: 600px) {
.siteContent {
padding-top: 89px;
}
}
#media screen and (max-width: 320px) {
.siteContent {
padding-top: 69px;
}
}
Of course you can use a lot of another methods, but this one is most ease way.
I have a general style definition as
.main-site-nav li a {
padding-left: 0;
}
Now want to apply a different style only for .main-site-nav li a in extra small screens (xs) only as follows.
/* xs screens only */
.main-site-nav li a {
padding-left: 15;
}
How can I do it?
Thanks
The selectors used in BS3 (v3.2.0), if you want to stay consistent:
#media(max-width:767px){
.main-site-nav li a {
padding-left: 15;
}
}
This will take care of your xs screen
refer : Twitter Bootstrap 3: how to use media queries?
Use media queries like below. I have assumed your small screen resolution is 500px.
#media all and (max-width: 500px)
{
.main-site-nav li a {
padding-left: 15;
}
}
You can also specify min-width and max-width like below.
#media all and (max-width: 500px) and (min-width: 380px)
{
.main-site-nav li a {
padding-left: 15;
}
}
Read more about media queries here.
I'm new to working with Bootstrap 3 . I made a container 12 columns with width: 960px;. Then I noticed the container size changed to width: 1110px. Can anyone tell me what the issue is? I just want a fixed container with width of 960px;
Please check it here
I found the css :
.col-lg-12 {
margin-left: 0;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
modify this CSS properties from bootstrap.css
.container {
margin-right: auto;
margin-left: auto;
padding-left: 6px;
padding-right: 6px; }
.container:before, .container:after {
content: " ";
display: table; }
.container:after {
clear: both; }
#media (min-width: 768px) {
.container {
width: 732px; } }
#media (min-width: 992px) {
.container {
width: 952px; } }
#media (min-width: 1200px) {
.container {
width: 1152px; } }
Remove
#media (min-width: 1200px) {
.container {
width: 1152px; }
Update
#media (min-width: 990px) {
.container {
width: 950px; } }
Please comment below if anything wrong while apply this code
Worth noting: if you are using less or sass with Bootstrap, changing the size of the containers is as easy as changing one variable. In Bootstrap 3 (3.3.5 to be precise) their container settings in the variables.less file look like this:
//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.
// Small screen / tablet
#container-tablet: (720px + #grid-gutter-width);
//** For `#screen-sm-min` and up.
#container-sm: #container-tablet;
// Medium screen / desktop
#container-desktop: (940px + #grid-gutter-width);
//** For `#screen-md-min` and up.
#container-md: #container-desktop;
// Large screen / wide desktop
#container-large-desktop: (1140px + #grid-gutter-width);
//** For `#screen-lg-min` and up.
#container-lg: #container-large-desktop;
(see bootstrap's github repo)
So to adapt the size of .container for large screens, simply overwrite the variable #container-large-desktop by adding it to your own variables.less-file:
#container-large-desktop: ((930px + #grid-gutter-width));
(#grid-gutter-witdh is set to 30px on default, so the above will lead to having a 960px container)
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;
}
}