Hello, I have a responsive header that isnt looking right when I begin to change
the viewport. I want to possibly center everything as the width of the browser changes.
Also in my carousel the image starts to squish and I have some content overlapping as well.
for the carousel image I know it has something to do with aspect ratio or something?
Page
This is what It currently looks like:
I think the URL in the Page link may be wrong.
At first glance, this doesnât look promising.
The slider is designed to be the full width of a 1920x1080 monitor. It appears to me that the slider is about 1920x570. Thatâs about 3.36:1. Itâs gonna become awfully short at narrow widths. It will be over 2/3 buried under the semi-transparent header. The blue ads along the bottom will be reduced in size and sliding beneath the header.
Are you sure this is what you want to do?
Does the slider offer narrower slides for narrower screens?
Even if the header scales down, too, it still becomes unreasonably short, IMO.
Do you have a Plan âBâ for narrower than 1920 widths?
it is based off of this concept from bootstrap: PAGE
I figured the carousel was responsive in the image but I guess it is notâŚ
Yeah I guess centering the header if possible and not let it break
like this:
. I guess ill have to hide the carouselâŚ
not really
Maybe I can replace it with this Carousel at viewport;
According to the demo, the slider apparently is fully responsive widthwise in bootstrap, as your page demonstrates, BUT the height does not change, as is true on your page also. That mean that it will not preserve the aspect ratio of images. The height isnât intended to scale. It seems to be intended for text announcements. Iâm not at all familiar with the product, but it doesnât seem suited to the way you are trying to use it.
It would be better if someone with slider experience joined this topic. Iâm not a slider cat (except on wooden floors).
ugh this sucks⌠
it doesnt make sense
they would make it like thatâŚ
You could probably get away with something like this.
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
}
.carousel .item {height:auto;}
.carousel {height: auto;}
.carousel-inner > .item{padding-top:43%}
You would still need to sort out the smaller screen display under 1125px as you are doing some weird stuff with the dentist near you row.
Yeah Ima redo the header completely thanks thoughâŚ
Ok so I have a new carousel in place this one is generic
can it be responsive? PAGE
<!-- Carousel
================================================== -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="8000">
<!-- Indicators -->
<!-- <ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol> -->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/pd_main.jpg" alt="mainbanner">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/pd_dentist_slide.png" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/sept_ad.png" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div><!-- /.carousel -->
I gave you the code in post #9 that would make this responsive but you would also need to control the height of the inputs and blue section as they are way too big on smaller windows.
You should probably just hide the slider on smaller devices or replace it with a static picture of appropriate size.
Hi,
You could throw in a max-width to stop it growing too big.
e.g.
.carousel {max-width:1280px;margin:auto}
Of course then it wonât reach from edge to edge on wider screens but how else can it work? Either the image grows bigger with aspect ratio which means the height increases proportionately with the width and doesnât stretch and squash like your initial page.
Usually for full width sliders I would use a slider that sets a background image instead of a foreground and use background-size:cover to get over this issue (some sliders will convert the foreground image into background images for this purpose).
For modern browsers (not IE) you could use object-fit on the image and then do something like this.
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
}
.carousel .item {height:auto;}
.carousel {height: auto;}
.carousel-inner > .item{padding-top:43%}
/*.carousel {max-width:1280px;margin:auto}*/
@media screen and (min-width:1200px){
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
width:100%;
height:500px;
object-fit: cover;
}
.carousel .item {height:500px;}
.carousel {height: 500px;}
.carousel-inner > .item{padding-top:0}
}
That will limit the carousel height to 500px and then the image is made to fit but without losing its aspect ratio. For IE you would need to use a polyfill.
Or start again with a better slider that has the features you need 
hmm how about I ask you this: Is it possible to prevent the image from squishing and not be responsive as you
change the viewport? like it stays as is.
Hi,
You could fix the height of the image and use object-fit as mentioned above and then the revised code would be this.
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:400px;
object-fit: cover;
}
.carousel .item {height:400px;}
.carousel {height:400px;}
.carousel-inner > .item{padding-top:0}
That basically treats gives the foreground image the same behaviour as if you were using a background image using background-size:cover.
As I already mentioned it doesnât work in IE so you would need a polyfill if you want to support IE. Otherwise look for a slider that uses background images and you can then get the same effect with greater browser support.
Alright
whats a polyfill and where do I find it?
I already gave you a link to on in post #14 (there are others around if you google)
A âpolyfillâ is a script alternative to patch support deficiencies with the property you are using.
I added the script but it does work do need to modify the js as well?
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="Scripts/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
<script type="text/javascript" src="Scripts/jquery.object-fit.js"></script>
</body>