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
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?
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).
You could throw in a max-width to stop it growing too big.
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.
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.
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 -->