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;
}
}
Related
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;
}
}
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.
My logo disappears when I horizontally shrink my browser window (so, mobile phone view).
http://zanifesto.com
I set the css to overflow:visible, but it doesn't make a difference.
My goal is to have the narrow (mobile) format be a vertical stacking of header, register/login, and then "Create something new".
Any suggestions?
.gbtr_tools_info {
color:#b39964;
font-size:10px;
text-transform:uppercase;
padding:5px 0;
overflow:visible;
}
Just remove this line in your CSS:
#media only screen and (max-width: 719px)
.gbtr_tools_info {
display: none;
}
change overflow:visible to overflow:auto
try doing
overflow:visible !important
Seems to get overriden by js.
parent container => flexible width(width depends on browser window)
child div => fixed width of 900px (inside parent)
My requirement is
if width of parent is more than 900 then align child div in center
if width of parent is less than 900 then align child div to the right. Hence left portion will be truncated.
Is there any pure css solution?
I fiddled it a little.
you basically need this, am I right?
#parent{
background-color: blue;
overflow: hidden;
direction:rtl;
}
.child{
width:900px;
float:right;
margin: 0 auto;
direction:ltr;
}
So direction to align the divs without making the child div float to the walls, and another direction inside child to not mess up the contents inside. margin: 0 auto; to center the div and overflow:hidden to truncate.
EDIT: Try it now.
you can try with media query..
For example:
#media only screen and (max-device-width: 900px) {
.div { margin: 0px auto }
}
#media only screen and (min-device-width: 900px) {
.div { float: left; }
}
You can try to combine css with that...
parent {direction:rtl}
child {direction:ltr;}
Basicly, overflow will scroll from right to left or will hide left side if hidden;
test and play with it here :) : http://codepen.io/gcyrillus/pen/GHCne
Have you looked into using media queries?
You'll just want to make sure they're supported in all the browsers you're targeting.
I need a div height changable if the screen size changes.
I also need that div is scrollable because the content may be Large.
But only when it is larger than the screen zize.
Also it should Work on IE6
Is there any Possibility for that?
If yes,
Please Give me the Complete css, html and javascript.
set width 100%; It's works
body {
width:100%;
height:100%;
}
#wrapper {
width:100%;
background:#ccc;
}
if the div is a direct child of body than just set height: 100% on both the div and the body. Like this:
body, #your-div-id {
height: 100%;
}
As far the scrillability is concerned just go:
#your-div-id {
overflow: auto;
}
Makes sense to you?