I have a slideshow with width of 90% device width, the images should also be this same width (100% of their parent), it works perfectly on desktop but not on mobile.
Even when physically resizing the browser window on desktop the slideshow scales with the window (both the height and width scale properly) but on mobile browser (even when choosing the option ‘desktop mode’) the images contained in the slideshow are way too big (the div holding the slideshow is the correct size but the images themselves are way too wide (5 times wider than the device width approx). I don’t know why this happens since on desktop it works perfectly even when resizing the browser window to a smaller width.
the images within the slideshow (with class .slideImg) have their width set to 100% of their parent, which is the div with class .slidewrapper which has a width of 90% of its parent which is the div with class .slideDiv (which has its width set to ‘device-width’).
What am i doing wrong? Why aren’t the images inside the slideshow resizing properly on mobile ?
PS: Also, the width of the images is correct (on desktop at least) but the images get stretched in height (aspect ratio changes compared to original image), i dont understand why since i only set the width for these images and didnt set any height value for them or their parent divs. If anyone knows please let me know why and what i did wrong here.
HTML for the slideshow:
/* slideshow styles */
.slideDiv{
width: device-width; /* set width of slideshow to device's width */
}
.slideContainer{
width:90%; /* 90% of parent(slideDiv) width = 90% of 'device-width' */
position:relative;
overflow: hidden;
z-index: 999;
margin:auto;
margin-top:1vh;
}
.slideWrapper{
width:1200%; /* 12*100% because the slideshow contains 12 images, each of 100% width of the .slideContainer class */
display: flex;
animation: slide 100s infinite;
}
.slideImg{
width: 100%; /*100% of parent which is 100% of slidecontainer = 90% of 'device width'*/
}<!-- auto slideshow start -->
<div class="slideDiv">
<div class="slideContainer">
<div style="align-self:center; justify-self:center;" class="col-12 col-lg-8 text- center centeredText">
<!-- <h5 class="text-white text-uppercase mb-3 animated slideInDown">Welcome To <mark>Troos</mark></h5>
<h1 class="display-3 text-white animated slideInDown mb-4"><span>Recreational, Off-Grid & <br>Tiny Homes</span></h1>
<p class="fs-5 fw-medium text-white mb-4 pb-2"><mark style="background-color:rgba(0, 0, 0, .0); color:white;">We realise your custom dream house, from planning to final delivery</mark></p> -->
<a href="#projects" class="btn btn-primary py-md-3 px-md-5 me-3 animated slideInLeft" style="color:black;font-size:1.5em; background-color:rgba(238, 238, 238, 0.705)">See Projects <i class='fas fa-arrow-down'></i></a>
<!-- <a href="" class="btn btn-light py-md-3 px-md-5 animated slideInRight">Free Quote</a> -->
</div>
<div class="slideWrapper">
<!-- 1 -->
<img src="img/about page 1/Ijs1/af1 aangepast.png" class="slideImg">
<!-- 2 -->
<img src="img/about page 1/Apeldoorn/apeldoorn_glas_warm_landing.png" class="slideImg">
<!-- 3 -->
<img src="img/about page 1/Hanne/hanne_1_landing.png" class="slideImg">
<!-- 4 -->
<img src="img/about page 1/Apeldoorn/big_portfolio_item_1.png" class="slideImg">
<!-- 5 -->
<img src="img/about page 1/Christiaan/Christiaan1.jpeg" class="slideImg">
<!-- 6 -->
<img src="img/about page 1/Ijs2/ijsselmuiden2.png" class="slideImg">
<!-- 7 -->
<img src="img/about page 1/Apeldoorn/apeldoorn1.png" class="slideImg">
<!-- 8 -->
<img src="img/about page 1/Hanne/hanne_1_licht.png" class="slideImg">
<!-- 9 -->
<img src="img/about page 1/epe/epeLanding.png" class="slideImg">
<!-- 10 -->
<img src="img/about page 1/Ijs1/ijsselmuiden1_2_landing.png" class="slideImg">
<!-- 11 -->
<img src="img/about page 1/apeldoorn/apeldoornBosLanding.png" class="slideImg">
<!-- 12 -->
<img src="img/about page 1/tekening.png" class="slideImg">
</div>
</div>
</div> <!-- end slideDiv div -->
<!-- auto slideshow end -->The website is online here:
troosbouw.com
Git repo:
https://github.com/MaartenDominicus/TroosCom
(the code in the question is from the index.html file)
thank you!
2
Answers
(Even though inside viewport meta tag it may work.)
You can use
100vwinstead. Also, you can useaspect-ratioCSS property for setting the desired aspect ratio (possibly same as the source).Also see this.
You actually have
width: device-widht;but evendevice-widthis an invalid property value and is ignored..slideWrapper {display: flex}is causing theimgto stretch to the height of the viewport..slideWrapper {width: 1200%}is likely causing issues as well.