slideshow gallery view, make slide images full screen and remove next image arrow margin

rynobotha
Visitor
2 0 0

/*
Hi, I am an independent developer asking under the name of my client
Here is what I'm trying to do: 


1) I would like to make the slideshow gallery view dynamically scale to screen size and fill the entire screen without any white space (or margin/padding) surrounding it.


2) I would also like to remove the padding on the carousel arrows so that they are flush against the image further reducing white space as the images are the main focus on the site. 

https://ryno-botha-photography.myshopify.com/products/15cc-arniston-bay-lighthouse-dsc_3702ud
Above is a link to the image being previewed in the enclosed screenshot, visually representing what I'm trying to do.

As my client is selling the canvases in the picture the image needs to be as large as possible so the viewer can see the level of detail captured. 
 In my .../assets/theme.scss.liquid

file I added this code:

@media only screen and (min-width: 1px){
.slide--44410f67-297a-4097-a5d5-538372897b23 {
padding-bottom: 0px !important;
padding-top: 0px !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
}

I also added these lines to .../acssets/stylesheet.css.liquid.css which I created. I also played with the min- and max-width in both files; I could see no effect. 

 

 

take 2.JPG*/

Reply 1 (1)

rynobotha
Visitor
2 0 0

today I tried this code in assets/theme.scss.liquid

#Hero-slideshow .slick-dots li {
display: none;
}
#HeroWrapper-slideshow .hero__controls.wrapper {
display: none;
}

to no effect, this is the last hurdle on months of work, so I'm probably just mentally flat right now, but for the life of me I can't figure out how to customize the Brooklyn theme carousel