I have these CSS rules for my header
margin: 0 auto;
max-width: 1250px;
Having those (in comparison to not having them) causes the vertical scroll bar to appear when the browser window is < 1250px.
What CSS should I have to let users with big screens see the header att 1250px width, and the others with smaller width see the responsive header at their respective browser window size - without having the vertical scrollbar to appear?
Something like this should work:
#header {
width: 100%;
}
#media screen and (max-width: 1250px) {
#header {
width: 1250px;
}
}
Related
I have configured a page so that the table headers are stationary while the rest of the page scrolls. Looks great in 1920x1080, but in other resolutions it does not. This is my css;
.scroll
{
max-height: 945px;
overflow: auto;
}
Is there a way to configure it so that the scroll bars automatically adjust to the height of the screen based on its resolution, or do I need to set it up as a fixed height?
You should be able to use a media query for that
#media screen and (max-height:945px) {
.scroll
{
max-height: 700px;
overflow: auto;
}
}
On the site there is an off canvas nav built into the responsive design, but for some reason between the breakpoints of 600px and 830px the off canvas nav slides but it is completely white. It should display exactly the same as it does below 600px wide. Most likely it is something in the CSS. Anyone have any thoughts?
In the CSS on line 1412 it changes .site overflow to hidden, which then hides the menu. It's under the media call for min-width: 600:
#media screen and (min-width: 600px) {
...
.site {
margin: 0 auto;
max-width: 1024px;
max-width: 73.14285714rem;
overflow: hidden;
}
Just remove overflow:hidden;
You may want to double check that nothing else breaks by changing this line, and maybe reapply it for the wider screens.
When you smallen your browser to 1000px width then there is a horizontal scrollbar, is there any way to remove this above 1000px? Check my screendump below.
I have tried a clearfix but this didn't help and tried overflow:visible;
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */
Any clean easy way to fix this with css?
#media all and (min-width: 1000px) {
body {
margin:0;
}
.wrapper {
overflow-x: hidden;
}
}
If browser is more then 1000px wide there won't be horizontal scroll.
The only thing that you can do (which still keeps your site accesible), is set the width on which the scrollbar should appear.
You can fix that by setting a minimum width for the body.
Add this to your stylesheet:
body { min-width: 1200px; }
When the browser is resized smaller than 1200px, the scrollbar will appear.
Use the overflow-x property to hide the horizontal scroll bar on div that creates the horizontal scrolling.
For Instance,
Overflow-x:hidden;
EDIT
If you want 1000px where the scroll should not come and it still comes in 1020, the case is that you have a padding/margin applied somewhere that is taking those extra pixels. You need to remove it to get your thing working.
I have decided when my browser is smaller than 1200px, the overflow:hidden; on carousel which is 1000px wide can be used.
Vladislav Stanic pointed me to the right direction, thanks all.
#media all and (max-width: 1200px) {
.carousel {
overflow-x: hidden;
}
}
I am creating a design for my site using a recently downloaded bootstrap
I tried with row and span12 layout the container div is not centering to my screen. I'm using 58cm LED Monitor(its not looking centered).
The DIV width is showing 1170px(Firebug) its suppose to be 940px.
Please Check my design here http://rentbbsr.com/projects/daycare/
It suppose to be like this http://rentbbsr.com/projects/daycare/daycare.jpeg
I just want the header to be fixed and centered.
There are a bunch of reasons. You have negative left margin on the row:
#media (min-width: 1200px)
.row {
margin-left: -30px;
}
}
.row {
margin-left: -20px;
}
Then you have another margin on the span:
#media (min-width: 1200px)
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 30px;
}
class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
Then your container that you centered is wider than the contents. As it is wider, it centres that element, but it has a empty area. If you set it to the width of whatever you want to center, such as the tree graphic or the menu below, it will actually be centred.
In this case i set it to the width of the top graphic:
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 988px;
}
Remember to also set it in the media query.
So in summary, your wrapper elements are wider than the contents, and you have various margins all over the place, which adjust the width even more. If you remove those and set the correct width it will center as expected.
Is it possible in CSS to handle the position of a background image depending of the dimension of the browser page, or should I use javascript to handle that?
When the image is bigger than the page it should be aligned to the left
When the image is smaller than the page it should be aligned to the center
Media queries - they change CSS styles dependent on browser size.
#img {
width: 1000px;
margin: 0 auto;
}
#media
screen and (max-device-width: 1000px),
screen and (max-width: 1000px) {
#img {
float: left;
margin: 0;
}
}