Gallery Exceeds Page Width (on mobile)

Hello,
I’ve checked your site and found that there is nothing wrong with the slider. The width of the slider on mobile is 700px. The width of 17,500px is the slider track width, which may depend on the number of available slides in your slider, and it’s the same for both mobile and desktop. Check this product https://rubberfloorstg.wpenginepowered.com/product/rfm-99-rubber-flooring-adhesive-4-gallon/ which has only 2 slides and the slider track width is 3500px.


Thank You.

It is completely breaking the size of the page on mobile. I am trying to embed some photos of it but I need to host the images to be able to do that.

I understand your plugin is not at fault etc but was hoping you could advise me how I could help usher it into the correct container size or anything. Trying to justify purchasing the plugin to my bosses too.

700px on mobile for the slider is still like twice the width of the phone screen?

can you point me to a declaration to reduce that – thanks again. I just need it to adapt to the container / screen size

screenshots in case you weren’t seeing what I am. as you can see page content just runs off the edge etc.

• This reply was modified 5 months, 2 weeks ago by jamievehiclemedia. Reason: adding screenshots and bit of context

Hello,
Please remove your custom CSS that you have added directly for gallery images.
Here is the .images.nickx_product_images_with_video.show_lightbox gallery container class, Add your width CSS directly to the gallery container.


Thank You.

I didn’t have any custom CSS for gallery images originally. But using the class name you gave me I’ve made media queries for each phone size to keep adjusting the size of the gallery like this:

*full desktop*
.images.nickx_product_images_with_video.show_lightbox {
	max-width:600px;
}

*medium-small screens*
@media screen and (max-width: 1024px) {
	.images.nickx_product_images_with_video.show_lightbox {
		max-width:375px;
	}
}

*phone sizes to keep gallery from exceeding device width*
@media screen and (max-width: 768px) {
	.purchase-product .product.type-product {align-items:center;}

	.images.nickx_product_images_with_video.show_lightbox {
		max-width:370px;
	}
}

@media screen and (max-width: 430px) {
	.images.nickx_product_images_with_video.show_lightbox {
		max-width:400px;
	}
}

@media screen and (max-width: 400px) {
	.images.nickx_product_images_with_video.show_lightbox {
		max-width:370px;
	}
}

@media screen and (max-width: 360px) {
	.images.nickx_product_images_with_video.show_lightbox {
		max-width:350px;
	}
}

Curious if there’s any more efficient way to do this in your opinion?

Normally your gallery automatically matches the device width. On my theme, it doesn’t and it keeps abiding by your original nickx-front.css declaration (below) even if it’s in an area 360px wide:

.images.nickx_product_images_with_video {
    max-width: 700px;
}

I really appreciate your help! ??

• This reply was modified 5 months, 1 week ago by jamievehiclemedia.

Hello,
Please remove your custom CSS from the VMStyles.css file, At line number 332 to 344

.purchase-product .woocommerce-product-gallery__image {
    width: 25%;
}
.purchase-product .woocommerce-product-gallery__image img {
    width: 100%;
    padding: 5px;
}
.purchase-product .woocommerce-product-gallery__image:first-of-type {
    width: 100%;
}
.purchase-product .woocommerce-product-gallery__image:first-of-type img {
    width: 85%;
}

And line number 355 to 360.

.purchase-product .woocommerce-product-gallery__image {
   width: 20%;
}
.purchase-product .woocommerce-product-gallery__image:first-of-type img {
   width: 100%;
}

Also remove your all added custom CSS related to gallery.

Thank You.