So I just started using bxslider.
I however I'm having issues setting the size of the slider. Naturally it takes the height of the largest element (I think). How do I set it to a fixed height, say 200px?
You can add following css.
.bx-wrapper, .bx-viewport {
height: 200px !important; //provide height of slider
}
Check out this fiddle..bxslider
Why not style the elements?
If you set a fix height for the wrapper you could get in trouble with overflows and positioning.
If you are using lists:
.bx-wrapper ul li { height: 200px; }
You need to set all 3 elements involved with the height of the image displayed which are the main container, the inner container and the images themselves...
like so:
.bx-wrapper, .bx-viewport, .bx-wrapper img {height: 500px !important;}
i should note that:
bxSlider uses 100% width to keep stuff responsive so you might get a distorted image by forcing the height, and that is why you need to serve pre-sized images to the slider (just to fix the height issue..)
solution:
use media queries to set a different height when viewed in mobile (just a suggestion)
best of luck...
This worked for me, and allows you to keep responsiveness
.bx-wrapper, .bx-viewport, .bx-wrapper img {max-height: 200px !important;}
I solved centering and fixed size with these lines
.bx-wrapper img {
height: 400px;
max-width: auto;
display: inline;
}
I would recommend wrapping it with a div then adjusting the div's CSS. Bxslider I believe inherits the height & width.
.yourDivClass{
height:200px;
width:200px;
}
From here you can adjust the li's accordingly:
.yourDivClass li {
background-color:green; //just to see the overflow if height & width isn't equal
}
Hope this helps.
Update!
http://jsfiddle.net/u62LR/
Just set your image height...
.bx-wrapper, .bx-viewport {
height: [IMAGE HEIGHT] !important;
}
If you don't want use !important just make like this
.bx-wrapper {
height: 400px; //Just choose your height
display: block;
overflow: hidden;
}
Just use the max-height:
.bx-wrapper .bx-viewport{max-height: 657px;}
Related
I am working on Bootstrap theme where its responsive. I disable the responsiveness on a child theme by adding a code in functions.php. All works well , no problem.
Now the parent container, is now fixed:
HTML:
<div class="container">
CSS:
.container{width: 940px;}
But I would like the footer section to have sitewide background color. How do I able to do this?
I have tried setting different methods like width:auto, width: 200% ,but its not giving me the desired result.
Supposing this is the footer section:
<footer>
My footer
</footer>
My attempted CSS on a child theme(not working)
footer {
background: #CCCCCC;
width:100% !important;
position:absolute !important;
}
Also is this possible without setting too many !important on CSS property? Thanks.
If your footer is inside the div.container which has width:940px; then giving your footer 100% width will make it 940px wide.
You need to have the footer outside the container to give it 100% width of the body.
When you give 100% width, the element gets its container's width. So in your code, even with the important keyword, it'll get the container's width (because that what 100% is supposed to do).
Just take the footer outside of the container.
Then it'll work and you won't need this !important keyword.
As others have mentioned, removing the footer from the parent container of .container will allow the width of it to be the entire size of the viewport/document.
If you are unable to change this level of structure of the HTML due to your template, you can fake the width using pseudo-elements, like so:
footer {
position: relative;
background-color: lightblue; /* Match the color of the body background */
}
footer::before, footer::after {
content:"";
position: absolute;
top: 0;
bottom: 0;
width: 9999px;
/* some huge width */
background-color: inherit;
}
footer::before {
right: 100%;
}
footer::after {
left: 100%;
}
See jsFiddle.
Taken from CSS Tricks: Full Browser Width Bars
Here is my html architecture:(I can not change the architecture because it is generated by Markdown.
<p><img src="foo.png" /></p>
I have set text-indent in my css file:
p {
text-indent: 2em;
}
Problem is when my image is very large, some part of my image may be in the outside of my container.
I hava set max-width: 100% for img tag.
You can see that a little part of the arrow is in the outside of the container.
you could just offset the indentation on the image by doing something like:
p > img {
margin-left:-2em;
}
Does that solve your issue or is there something I'm missing?
http://jsfiddle.net/YvMCV/
When you set img width to 100%, it does just that, regardless of text-indent or padding. The amount that the image has overflown is 2em, the width of your text-indent. You could use % instead of em to set text-indent and have your img width be what's left over...
p {
text-indent: 1%;
}
p img {
width: 99%;
}
OR, do as the other answer mentions and set img to margin-left: -2em;.
The problem is simple:
http://jsfiddle.net/boblauer/wfLGG/
In the left example, I have the whole thing scrolling, which works fine because I can set the scrolling div's height to 100%. In the right example, it doesn't work, because I don't know what my scrolling div's height should be, because it's sharing that space with another element. If I set it to 100%, it overflows from its container, causing the 2nd scrollbar that you see in the example.
I know I can use javascript to set the .scroll-container's height to (container height - height of the header), but is there a pure css solution to this problem? I hate having to use javascript for this, especially because when the window resizes, I have to recalculate the size of the scrolling div.
Edit: Sorry, I wasn't very clear. What I want is for the header to remain static at the top, while the list itself is scrollable.
I think this is maybe helpful
.scroll-container {
overflow: auto;
padding-top:20px;
}
#ex2 span{
position:absolute;
background:white;
}
jsFiddle
Set overflow: y-scroll; on #ex2 and it will behave as #ex1.
#ex1, #ex2 {
float: left;
height: 100%;
width: 45%;
border: 1px solid black;
overflow: auto;
}
#ex2 { overflow: y-scroll; }
Demo
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?
I tried using
height: 100%
but this makes the div only as high as its contents - it just contains a single word of text.
How can I force the div to use the screen height instead?
You need the body and html elements to have 100% height as well.
Try the following CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
YourDivSelector {
height: 100%;
}
The margin and padding must be set to 0 to prevent autoscroll in Firefox.
You should set all the containers that contain the div to height:100% as well, including the body and html tags.
You also need to set html and body to height:100%;
html,body{height:100%}
I had the same issue. Setting the html and body height to 100% didn't work, but when I combined min-height of 100vh and a height of 100% on the div it worked.
html, body {
height: 100%;
}
div {
min-height: 100vh;
height: 100%;
}
You can get the width and height of the window using JavaScript and then use those values to set the height and width of the div, as needed.
maybe
min-height:100%;
what are you trying to do exactly? post some more info and we can help you more
You can only meaningfully use height=100% if its containing element's height is definided. Its 100%, of what? no height if defined anywhere. You can use javascript to get the height of the current window (as previously mentioned), or specify a specific height of 800px or whatever value. :D