I have implemented the carousel on my webpage as follows
<div class="container-fluid">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="/public/images/Lighthouse.jpg">
</div>
<div class="item">
<img src="/public/images/Lighthouse.jpg">
</div>
<div class="item">
<img src="/public/images/Lighthouse.jpg">
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div><!--End of Carousel-->
I would like it to remain responsive, which at present it is, the picture adjusts as the screen gets smaller. However the carousel fills the whole page (Width) and I would like to make it smaller and have it sit in the center of the page. I have given a width for .carousel but this seems to effect the responsiveness.
Does anyone know how to customize this plugin or have done this in the past
Any help appreciated
Thanks
media Query solves this issue as I had given the carousel a width
#media (max-width:600px) {
.carousel {
width: 100%;
}
}
where and how to add this #media (max-width:600px) {
.carousel {
width: 100%;
}
} instruction
Related
I am getting a layout error when printing my page in Chrome (and only Chrome). Notice, that I am already using a #media-print-stylesheet and the emulation in the Developer Tools works correctly.
The markup is basically a Bootstrap Carousel. The issue is that the image+caption (i.e. item of the carousel) are positioned below where they should be. The bar on top of the image is one of two div’s (.obscure-top/.obscure-bottom) to obscure/mask parts of the image. They are in their correct position.
<article>
<header>…</header>
<div id="locations-carousel-wrapper" class="box">
<div id="locations-carousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="obscure-top"></div>
<div class="carousel-inner" role="listbox">
<div class="item active">
<a class="modelLink" href="…">
<img src="…" alt=""/>
<div class="carousel-caption"></div>
</a>
</div>
</div>
<div class="obscure-bottom"></div>
<a class="left carousel-control" … />
<a class="right carousel-control" …/>
</div>
</div>
<div class="box box-footer"></div>
For the #media-print-stylesheet the box is absolutely positioned:
#locations-carousel-box {
position: absolute;
min-width: 260px;
right: 15px;
top: -280px;
}
to get it up there. Everything else is like on the “regular” page and it works in other browsers as well as the 'print emulation'. The issue is only introduced when I actually want to print the page. Any ideas what could be the cause of this? Or any way how to debug this?
The issue is gone.
Since I can’t reproduce it anymore I assume that a Chrome update fixed this issue (possibly pdfium-related).
I am trying to put 3 images into 3 boxes.Here I have used bootstrap v3.1.1, here the problem is image is not centering correctly.My medium device output like bellow image
Here no any problem for medium device but the problem is in small device this is looking like bellow image
Here image is not cantering.
I have add bellow html code and a css code
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<!--------------------------->
<div class="main-box">
<div class="box" >
<div class="box1 box sides-hz-2">
<img src="images/sss.png" class="img-responsive"></img>
<div class="list1">
<li class="header1"><Strong>Select</Strong>
</li>
</div>
</div>
<div class="box1 box sides-hz-2">
<img src="images/uuu.png" class="img-responsive"></img>
<div class="list1" style="background:#8C7E63;">
<li class="header1"><Strong>Online</Strong>
</li>
</div>
</div>
<div class="box1 box sides-hz-2">
<img src="images/uuu.png" class="img-responsive"></img>
<div class="list1">
<li class="header1"><Strong>Import</Strong>
</li>
</div>
</div>
</div>
<!--------------------------->
</div>
</div> <!--end of grid -->
</div> <!----end of row ------->
</div> <!----end of continer ------->
Here my own css for image
div.box1 img
{
display:block;
margin-left:25%;
}
May anybody help me for fix this problem ?
You must make the image responsive by adding these properties to img class
.responsive-image{
height:auto;
width:100%;
}
Auto height makes sure of resizing image without losing the aspect ratio
If you are using bootstrap, it has class img-responsive which will take care of responsiveness of the image.
Tip : On resize the image tend to resize and shrink. To make it look nice you can add class center-block to keep the image in center of outer div :-)
How do I change the width of the <a> tag below exactly as the test_small.jpg image width?
<div class="row">
<div class="col-md-5">
<a class="fancybox thumbnail" href="/assets/images/gallery/test.jpg">
<img class="img-responsive" src="test_small.jpg">
</a>
</div>
<div class="col-md-7">
...
</div>
</div>
I tried using:
<a class="fancybox thumbnail" style="width: auto" href="/assets/images/gallery/test.jpg">
without success.
Thanks.
EDIT: http://www.bootply.com/PGsq7xJeOt
You could just add an auto width. You will need to specify display: block for this to take effect.
.fancybox.thumbnail {
display: block;
width: auto;
}
I'd add class to that a .. for example: .customThumbnail
HTML:
<a class="fancybox thumbnail customThumbnail" href="/assets/images/gallery/test.jpg">
<img class="img-responsive" src="test_small.jpg">
</a>
CSS:
a.customThumbnail {display: block; width: 200px;}
You can use any width here (within col-md-5), since your image is responsive - it will adjust.
Also, try resetting padding (as the "a" might have some padding around it).
a.customThumbnail {display: block; width: 200px; padding: 0}
Although, a JSFiddle would be the best :)
I have an active example on ToWho.
<div class="row">
<div class="col-md-5">
<a href="/assets/images/gallery/test.jpg">
<div class="content"> <!-- This div isn't necessary, but is helpful for organizing -->
<img class="img-responsive" src="test_small.jpg" alt="Small Images">
</div>
</a>
</div>
<div class="col-md-7"></div>
</div>
Why it's not working is hard to solve without a fiddle. The anchor shouldn't need anything special to make it take up the space of the div, especially since it's in a Bootstrap grid element.
Try to make a new class giving it width:100% or make it an inline style.
<div class="row">
<div class="col-md-5">
<img class="image-responsive" style="width:100%;" src="test_small.jpg"/> </div>
<div class="col-md-7">
...
</div>
</div>
For better understanding I'm updating the entire question.
I'm using bootstrap 3 and the carousel component, however, one of the pages of the carousel contains an image that needs to be positioned in the bottom of the section tag without resizing the container.
Here is the code I'm using:
<section id="header-slider" class="section carousel slide" data-ride="carousel" style="padding-bottom: 0;">
<!-- Start Slider Navigation -->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#header-slider"></li>
<li data-slide-to="1" data-target="#header-slider" class=""></li>
</ol>
<!-- End Slider Navigation -->
<div class="carousel-inner">
<div class="item row active">
<div class="col-xs-5 hidden-sm">
<img src="..." style="margin-top: -40px">
</div>
<div class="col-xs-7">
<h1>...</h1>
<p>...</p>
</div>
</div>
<div class="item row">
<div class="col-xs-8">
<h1>...</h1>
<p>...</p>
</div>
</div>
</div>
</section>
Here is a running page with the problem: www.remotepark.com.br
You may see that after transitioning to the second page on carousel component, it is resized.
How can I fix this keeping the height of the pages equal (actually all pages need to have the same height as page 2)?
Not sure if I completely understood..
but maybe give this a try and see if it accomplishes what you're aiming for.
<div style="width: 400px; height: 250px; position: relative;">
<div style="width: 400px; height: 150px">
<img src="..." style="width: 200px; height: 200px; position: absolute; bottom: 0;" />
</div>
</div>
Try changing your style.css from
.carousel .item {
padding-top: 50px;
height: 300px;
}
to:
.carousel .item {
height: 290px; /* the image height */
}
also remove:
style="margin-top: -40px" from the image in the first carousel item
I'm trying to customize the bootstrap gallery full screen starting from this tutorial bootstrap gallery full screen
the code:
<div class="container fill">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item">
<div class="fill" style="background-image:url('http://www.mysite/images/category/image.jpg');background-position: center;">
<div class="container">
<div class="carousel-caption">
<h1>TITLE</h1>
<p class="lead">Description</p>
</div>
</div>
<a class="btn btn-large btn-primary" href="categories.php?id=17">View Gallery</a>
</div>
</div>
</div>
<div class="pull-center">
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
as you can see, the class that contains the button "View Gallery"
is positioned within the classes "item" and "fill"
<a class="btn btn-large btn-primary" href="categories.php?id=17">View Gallery</a>
For graphic reasons, I have to place the button in the fixed position at the bottom right of the screen, but must remain within the original classes.
I have tried in various ways, but I can not get it on the visualization for mobile devices.
for example, I'm trying to optimize viewing on iphone5 (640 x 1136) #media (max-width: 768px) using this class applied to the button:
.gallery-button {
text-align:right;
background-color: transparent;
position: fixed;
max-width: 100%;
padding: 0 20px;
top: 350px; left:150px;
}
In portrait mode would be fine, but in lanscape the button disappears.
ok, how can I solve the problem for all types of display?
Thanks
To fix for all scenarios, you should specify the position from bottom and right if you want it in the bottom right.
.gallery-button {
position: fixed;
bottom: 5px;
right: 5px;
}
That should fix your problem for all screen sizes.