Moving thumbnail images to right of main slide - Brine 7.0 gallery slideshow block

Site URL: https://michelle-gonzalez-photography.squarespace.com/test-magazine

Hello, 

I am currently trying to change the position of the thumbnail images in a Gallery Slideshow block on the Brine template (7.0) from the standard placement (below the main/active image) to the right of the main/active image. I am trying to achieve a layout similar to the website below - section titled "Love in Ink Magazines":

https://laurkenkendall.com/

I've also attached images of what I currently have vs what I would like.

Is this possible to do? Would appreciate any help as I've been wrecking my brain for hours on how to achieve this. Thanks so much!!!

On 8/10/2021 at 10:31 PM, BrookeP said:

Site URL: https://michelle-gonzalez-photography.squarespace.com/test-magazine

Hello, 

I am currently trying to change the position of the thumbnail images in a Gallery Slideshow block on the Brine template (7.0) from the standard placement (below the main/active image) to the right of the main/active image. I am trying to achieve a layout similar to the website below - section titled "Love in Ink Magazines":

https://laurkenkendall.com/

I've also attached images of what I currently have vs what I would like.

Is this possible to do? Would appreciate any help as I've been wrecking my brain for hours on how to achieve this. Thanks so much!!!

Which page you are referring to?

Hello,

I am trying to do the same thing with menus on a website page. I'm using a  gallery block and want the thumbnails to the left rather than below.

https://manatee-saxophone-eflm.squarespace.com/menu

pw: kingfish

On 8/9/2024 at 6:59 AM, maddieturnbull said:

Hello,

I am trying to do the same thing with menus on a website page. I'm using a  gallery block and want the thumbnails to the left rather than below.

 

https://manatee-saxophone-eflm.squarespace.com/menu

pw: kingfish

 

Try this code to Website Tools > Custom CSS

@media screen and (min-width:768px) {
section[data-section-id="66b558355d5793599c7f117c"] {
.gallery-slideshow[data-thumbnails="true"] {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}
.gallery-slideshow-thumbnails {
    width: 30% !important;
}}}