Full screen image – carousel – mobile

paperpen
(@paperpen)

3 years, 3 months ago

Hello!

I’m new here and nice to meet you! I have a little problem about an issue. I want to build my site and I want to use a Carousel to have more images in a slideshow mode on the home page. Everything is fine until I see how it is on Mobile mode and the result is not satisfying. My question is how can I have a full filled screen with Carousel for mobile? How can I add a zoom on these pictures such that I have a full screen with my pictures?

Thank you in advance for your help!

The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)

Wajid Ali
(@wajid-ali-tabassum)

3 years, 3 months ago
Hi, @paperpen I have checked your website. I can see that you have used the elementor carousel slider so please check the below link to know more about the carousel widget.
https://elementor.com/help/image-carousel-widget/

Please add below CSS code for the full-screen image.
```
.swiper-slide-inner .swiper-slide-image {
	height: 100vh;
	object-fit: cover;
	width: 100%;
}
```
I’ve tested this CSS on my end and it’s working perfectly.
Thread Starter paperpen
(@paperpen)

3 years, 3 months ago

Thank you very much!

Wajid Ali
(@wajid-ali-tabassum)

3 years, 3 months ago

@paperpen You are welcome. Please let me know, did the CSS code work for you?

Thread Starter paperpen
(@paperpen)

3 years, 3 months ago

Hello,

Sorry for delay. Yes, the CSS code it works very good. Thank you again!

A little question beside this, it’s possible to move on the right that carousel picture, but just for mobile? I don’t know if I can upload the example here, but if you follow this link you can see the issue. I tried to find a solve around here but unfortunately the result it was negative.

https://www.dropbox.com/s/cnmqresbidx81g3/WhatsApp%20Image%202021-10-14%20at%2018.49.25.jpeg?dl=0

Thank you in advance!

Wajid Ali
(@wajid-ali-tabassum)

3 years, 3 months ago

Hi, @paperpen I just hit your website link but there is not a single image showing.(:

It’s looking that you have deleted images from your media. See screenshot for reference. https://snipboard.io/MeLfKb.jpg

Image URL is leading to 404 error: https://paperpen.fun/wp-content/uploads/2021/10/15.jpg
Thread Starter paperpen
(@paperpen)

3 years, 3 months ago
Hello, @wajid-ali-tabassum

Ups, my mistake. I tried to clean up everything and on my laptop and phone everything looked well, but the truth it was different. Thank you for your mention. Regarding the issue, right now pictures are put in the right order and you can check when you have time.
- This reply was modified 3 years, 3 months ago by paperpen.
Wajid Ali
(@wajid-ali-tabassum)

3 years, 3 months ago
```
@media screen and (max-width: 375px) {
	.swiper-slide-inner .swiper-slide-image {
		object-position: -280px;
	}
}
```
Thread Starter paperpen
(@paperpen)

3 years, 3 months ago

Thank you again! This one works well in WordPress, but when I open the page on my phone anything isn’t changed. 🙁 Do you have an e-mail or something?

Wajid Ali
(@wajid-ali-tabassum)

3 years, 3 months ago

@paperpen please share your mobile details (like model, OS, browser, etc)

Sorry, I can’t share e-mail or anything else. https://wordpress.org/support/guidelines/#the-bad-stuff

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Full screen image – carousel – mobile’ is closed to new replies.

Full screen image – carousel – mobile

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics