'Problem with positioning a picture for mobile screen resolution
Stackoverflow community. I have a problem with positioning one of slider images. The first and the second images images are in right positions, but the last image has free space on top of it.
This problem appears just on mobile screen resolution. On desktop screens it works well.
Slider code:
<div id = "slider-wrapper">
<ul id = "slider" class = "flex-container">
<li class = "flex-container slider-item">
<img sizes = "(max-width: 375px) 375px, 58.33vw"
srcset = "images/mobile-slider/mobile-image-hero-1.jpg 375w,
images/desktop-slider/desktop-image-hero-1.jpg 840w"
src = "images/desktop-slider/desktop-image-hero-1.jpg"
alt = "kitchen table with chairs" class = "slider-img">
<article class = "slider-article">
<h1>Discover innovative ways to decorate</h1>
<p class = "text">
We provide unmatched quality, comfort, and style for property owners across the country.
Our experts combine form and function in bringing your vision to life. Create a room in your
own style with our collection and make your property a reflection of you and what you love.
</p>
<a href = "#" class = "shop-link">
<p>SHOP NOW</p>
<svg width="40" height="12" xmlns="http://www.w3.org/2000/svg">
<path d="M34.05 0l5.481 5.527h.008v.008L40 6l-.461.465v.063l-.062-.001L34.049 12l-.662-.668 4.765-4.805H0v-1h38.206l-4.82-4.86L34.05 0z" fill="#000" fill-rule="nonzero"/>
</svg>
</a>
</article>
</li>
<li class = "flex-container slider-item">
<img sizes = "(max-width: 375px) 375px, 58.33vw"
srcset = "images/mobile-slider/mobile-image-hero-2.jpg 375w,
images/desktop-slider/desktop-image-hero-2.jpg 840w"
src = "images/desktop-slider/desktop-image-hero-2.jpg" alt = "three chairs" class = "slider-img">
<article class = "slider-article">
<h2>We are available all across the globe</h2>
<p class = "text">
With stores all over the world, it's easy for you to find furniture for your home or place of business.
Locally, we’re in most major cities throughout the country. Find the branch nearest you using our
store locator. Any questions? Don't hesitate to contact us today.
</p>
<a href = "#" class = "shop-link">
<p>SHOP NOW</p>
<svg width="40" height="12" xmlns="http://www.w3.org/2000/svg">
<path d="M34.05 0l5.481 5.527h.008v.008L40 6l-.461.465v.063l-.062-.001L34.049 12l-.662-.668 4.765-4.805H0v-1h38.206l-4.82-4.86L34.05 0z" fill="#000" fill-rule="nonzero"/>
</svg>
</a>
</article>
</li>
<li class = "flex-container slider-item">
<img sizes = "(max-width: 375px) 375px, 58.33vw"
srcset = "images/mobile-slider/mobile-image-hero-3.jpg 375w,
images/desktop-slider/desktop-image-hero-3.jpg 840w"
src = "images/desktop-slider/desktop-image-hero-3.jpg" alt = "folding chair" class = "slider-img">
<article class = "slider-article">
<h2>Manufactured with the best materials</h2>
<p class = "text">
Our modern furniture store provide a high level of quality. Our company has invested in advanced technology
to ensure that every product is made as perfect and as consistent as possible. With three decades of
experience in this industry, we understand what customers want for their home and office.
</p>
<a href = "#" class = "shop-link">
<p>SHOP NOW</p>
<svg width="40" height="12" xmlns="http://www.w3.org/2000/svg">
<path d="M34.05 0l5.481 5.527h.008v.008L40 6l-.461.465v.063l-.062-.001L34.049 12l-.662-.668 4.765-4.805H0v-1h38.206l-4.82-4.86L34.05 0z" fill="#000" fill-rule="nonzero"/>
</svg>
</a>
</article>
</li>
</ul>
<div class = "flex-container" id = "arrows-wrapper">
<div class = "arrows" id = "left-arrow">
<svg width="14" height="24" xmlns="http://www.w3.org/2000/svg">
<path d="M13 0L1 12l12 12" stroke="#FFF" fill="none" fill-rule="evenodd"/>
</svg>
</div>
<div class = "arrows" id = "right-arrow">
<svg width="14" height="24" xmlns="http://www.w3.org/2000/svg">
<path d="M1 0l12 12L1 24" stroke="#FFF" fill="none" fill-rule="evenodd"/>
</svg>
</div>
</div>
</div>
SCSS code:
@media (max-width: 375px) {
.flex-container {
flex-direction: column;
}
.slider-img {
min-width: 100%;
}
.slider-article {
padding: 72px 32px;
& .text {
padding-top: 19px;
padding-bottom: 52px;
}
}
#slider, #arrows-wrapper {
display: flex;
flex-direction: row;
}
#arrows-wrapper {
left: auto;
right: 0;
}
.arrows {
width: 4.66rem;
height: 4.66rem;
}
#about img {
width: 100%;
}
.about-article {
padding: 56px 32px;
}
header {
top: 0;
left: 0;
width: 100%;
z-index: 1000;
text-align: center;
}
#logo {
padding-top: 4rem;
}
}
JavaScript:
function sliderFunction() {
let slider = document.getElementById('slider');
let rightButton = document.getElementById('right-arrow');
let leftButton = document.getElementById('left-arrow');
let sliderLength = slider.children.length;
let position = 0;
let transform = 0;
setInterval(autoSlide, 5000);
function autoSlide() {
if (position == sliderLength - 1) {
position = 0;
transform = 0;
slider.style.transform = `translateX(${transform}%)`;
return;
}
if (position < sliderLength - 1) {
position++;
transform = -100 * position;
slider.style.transform = `translateX(${transform}%)`;
}
}
rightButton.addEventListener('click', moveRight);
leftButton.addEventListener('click', moveLeft);
document.addEventListener('keydown', function (event) {
if (event.code == 'ArrowRight') moveRight();
if (event.code == 'ArrowLeft') moveLeft();
});
function moveRight() {
if (position < sliderLength - 1) {
position++;
transform = -100 * position;
slider.style.transform = `translateX(${transform}%)`;
}
}
function moveLeft() {
if (position > 0) {
transform += 100;
slider.style.transform = `translateX(${transform}%)`;
position--;
}
}
}
Solution 1:[1]
<li class = "flex-container slider-item">
<img sizes = "(max-width: 375px) 375px, 58.33vw"
srcset = "images/mobile-slider/mobile-image-hero-3.jpg 375w,
images/desktop-slider/desktop-image-hero-3.jpg 840w"
src = "images/desktop-slider/desktop-image-hero-3.jpg" alt = "folding chair" class = "slider-img">
<article class = "slider-article">
<h2>Manufactured with the best materials</h2>
<p class = "text">
Our modern furniture store provide a high level of quality. Our company has invested in advanced technology
to ensure that every product is made as perfect and as consistent as possible. With three decades of
experience in this industry, we understand what customers want for their home and office.
</p>
<a href = "#" class = "shop-link">
<p>SHOP NOW</p>
<svg width="40" height="12" xmlns="http://www.w3.org/2000/svg">
<path d="M34.05 0l5.481 5.527h.008v.008L40 6l-.461.465v.063l-.062-.001L34.049 12l-.662-.668 4.765-4.805H0v-1h38.206l-4.82-4.86L34.05 0z" fill="#000" fill-rule="nonzero"/>
</svg>
</a>
</article>
</li>
SO this part of image is not position right?
if so try this
- set your image as
max-width:100%or 2)try object-fit to images 3)try fix width to the slider images like fix width or fix height
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Gaurav Mali |