I've installed the basic version of Flexslider. I've removed the css related to div ID="main", so that the slider can stretch across my page.
However, the images don't adjust according to the new width.
This is what I mean.
I changed the width property for:
.flexslider .slides img
This does change the width, but the images still do not automatically align themselves to start on the left where the slider starts. There remains a kind of image overlap.
What needs to be changed in the CSS to have them aligned? Does FlexSlider only work with fixed image sizes, and not a fluid layout?
What I did was wrapped a span with a class to the image tag
<span class="className"><img src="images/slideImage-1.jpg"></span>
Then in the CSS I added
.flexslider .slides .className img{
width: 244px;
}
Hope that helps
Related
Scenario :
I have a Wordpress site which has an old theme and doesn't allow me to change the header image.
As a workaround on a page where I want a different image, I have
hidden the header image using CSS and replaced it with a background
image, which works fine and is responsive.
Todo :
However I needed to set a height for the area in order to make a space for the bg image to show up at full size (which I have done using a "padding-top")
which causes a large space underneath the background image whenever
the window is resized down, or on phones.
Is there a way to make the
space underneath the image collapse down as the image also collapses
down?
URL: http://www.annareynolds.org/lovehobart/
My Custom CSS:
.singular-page-691 #header img {
display:none;
}
.singular-page-691 #branding {
padding-top:390px;
background-image:url(http://www.annareynolds.org/wp-content/uploads/2018/08/love-hobart-crop.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position:top left;
}
only use padding in %
like:
.singular-page-691 #branding {
padding-top: 40%;}
http://prntscr.com/kj6z3j
I have visited the link you have provided and checked the responsive. I assume that I worked on the right place as your question asked.
You have paddding-top:390px in .singular-page-691 #branding It cause the space you mentioned. You can adjust the value of padding-top in responsive. I tried with padding-top:180px and it seems fine for me.
I'm using Flexslider and I don't want a image is stretched if the image is too small to fit the flexslider width, but it should be displayed centered, with its original width and height values and with a black background-color.
Is it possible? And what CSS changes I have to do?
set itemWidth property. It will adjust the image size inside the slider.
And add style
.slides li img {
width: 100%;
}
I've been trying to adjust these styles.
On this page: http://69.195.124.215/~vtiffcom/about-vtiff/.
I have a div for my logo and one for the subhead. The logo is the icon. The subhead is the text "Vermont International Film Festival"
When the browser resizes, the subhead falls under the logo, then begins resize according to browser width. I'd like to resize, then fall under the logo.
I know the second step will come from style applied to the media query, but how do I get it to resize until the first media query.
I've tried most combinations of width/max-width/height:auto, but I can't get the subhead to resize prior to falling underneath the logo.
Thanks--
Remove the float: left; and float: right; from the 2 elements. Add display: inline-block; to id=container2 and give it a percentage width: 60%; or so.. that should get you covered. Enjoy :)
See my Fiddle: http://jsfiddle.net/Whre/acsa9/
What I did there is applying a width (in percent) to the image's parent elements instead of max-width.
Your approach of img { max-width:100%; } was absolutely correct apart from that.
I'm trying to show the original size of the image. Often that's bigger than the width of the div that's containing it.
In modern browsers, it gets automatically resized to fit the parent div. Even when I use overflow: auto the image still gets resized.
So how can I prevent the image from getting resized when the outer div has a set width?
Thank you!
Bootstrap have maximum width set to 100% on images. Change it:
img {
max-width: none;
}
I used this one img {min-width:100%}
I'm trying to extend the default Bootstrap image carousel to support dynamically sized images (500x400 max), centered both horizontally and vertically. Additionally, I'd like to maintain the original caption layout, which anchors the caption to the bottom of the image, with the caption div extending fully across the image (but no further.)
I've put together a fiddle, which is a fairly clean implementation of the default Bootstrap setup (there are only 4 additional styles at the end of the css section):
http://jsfiddle.net/rdugan/JFBFU/26/
I can fairly easily accomplish the horizontal centering and caption requirements by adding a surrounding 'inline' div around the image and caption, and using 'text-align: center' on the parent. However, the vertical centering remains a problem (as always.)
As an alternative, I've also tried using 'display: table-cell' (and the accompanying centering styles) on different divs with varying results - in some cases I mess up the carousel functionality, while in others I accomplish the image centering, but lose the caption anchoring.
Any hints would be greatly appreciated - been banging my head on this one for quite some time.
You can center horizontally with these rules:
.carousel-inner { text-align: center; }
.carousel .item > img { display: inline-block; }
For vertical aligning you should check out this:
http://www.student.oulu.fi/~laurirai/www/css/middle/
And for keeping the image aspect ratio on resizing you just have to change only the width or only the height of the image not both at a time and it will resize with its original ratio.
Use the CSS background property directly on the div containing the carousel item:
In the *.html:
<div class="item" style="background-image: url('[path-to-image].png')">
<!-- omit the <img> tag -->
<!-- the rest of the stuff that was in the <div> goes here -->
</div>
In the *.css:
.carousel .item {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
However, this seems to break the carousel navigation arrows.
try to use this snippet
.carousel-inner > .item > img {
min-width: 100%;
}