VoodooDesign

Hi Tuan, 

Thank you for the assistance so far with getting the galleries properly displaying throughout the site. Please help with these issues below.

1. How do we get the mobile browsers to properly display images that are not 3:4 ratio like for this product listing.

https://www.voodoo-design.com/mclaren/p/m-engineering-m-tuner-m838t-suite-mclaren-570gt-2d8gd

2. How do we get the the static images (non gallery) to properly display throughout the site on a mobile browser?

https://www.voodoo-design.com/home

20 hours ago, tuanphan said:

Edit Page Settings > Advanced > Header > Add this code

<style>
  @media screen and (max-width:1080px) {
.gallery-fullscreen-slideshow[data-width="full-bleed"] {
    height: 30vh !important;}}
</style>

 

Also what is the difference between this method adding it in the headers vs into the css?

20 hours ago, tuanphan said:

Edit Page Settings > Advanced > Header > Add this code

<style>
  @media screen and (max-width:1080px) {
.gallery-fullscreen-slideshow[data-width="full-bleed"] {
    height: 30vh !important;}}
</style>

 

Thank you Tuan! 

How about for products. This product is not showing up correctly on mobile.

https://www.voodoo-design.com/mclaren/p/m-engineering-m-tuner-m838t-suite-mclaren-570gt

2 hours ago, VoodooDesign said:

Hello Tuan & Everyone,

The slideshow gallery and image banners on our website www.voodoo-design.com are showing up correctly on mobile browser of my phone. I edited the pictures to be close to 1:1 ratio and it worked on the Squarespace mobile simulator preview. How do I force it to correctly display in 1:1 or original ratio on mobile? Thank you in advance.

So I figured it out for the home page with this code.  How do I apply those code to the other pages?

@media screen and (max-width:1080px) {
.homepage .gallery-fullscreen-slideshow[data-width="full-bleed"] {
    height: 30vh !important;}}

2 hours ago, VoodooDesign said:

 

 

Hello Tuan & Everyone,

The slideshow gallery and image banners on our website www.voodoo-design.com are showing up correctly on mobile browser of my phone. I edited the pictures to be close to 1:1 ratio and it worked on the Squarespace mobile simulator preview. How do I force it to correctly display in 1:1 or original ratio on mobile? Thank you in advance.