Make Slideshow Responsive
-
-
- Patrick Mc Cabe
- Jr. Rocketeer
- Posts: 41
- Thanks: 0
-
In
d1189658-117041.blacknighthosting.com/2022/places-in-london
I am using the slideshow in Akuatik to show a clients best work.
Is there a way to make the slide show responsive? so that we can always see the Top and Bottom of each slide in bigger/Smaller environments?
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
1. add "no margin" and "no padding" block variations to the spacer and menu particle in the navigation section.
2. Use this code...
.g-slideshow .g-slideshow-slider .swiper-slide .slide { background-size: contain; }
3. add "no margin" and "no padding" block variations to the slider particle in the slideshow section.
To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .
Remember to recompile CSS from base outline too.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Patrick Mc Cabe
- Jr. Rocketeer
- Posts: 41
- Thanks: 0
-
I followed your Instructions, but I am not getting the results I want. I think that it is the Height of the Slideshow that is causing the responsive issues I am seeing on different monitors. ie... sometimes the image is cropped.
I want the slide show pictures to float in the centre of the screen, and almost fill the screen like a pop up window, with just a little space all around the image so that the user is seeing ALL of the Image, with No need to scroll.
The Clients wishes are: When the brpwsing punter has chosen WHICH image galley to look at in this page
d1189658-117041.blacknighthosting.com/2022/residential-projects (When complete each gallery will have up to 15 high Res images ) That chosen Galley is already open, full screen, when they click, hence the "X" menu approah in this page
d1189658-117041.blacknighthosting.com/2022/places-in-london
And Advise on how to approach this?
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
The approach I recommended is the way to go. The problem at the moment is that your images are actually not big enough - they need to be 1950px wide and yours are only 1200px wide. The undoubtedly there are other CSS tweaks that would make it look better and the way you implemented that "X" and splash change needs altering too.
Try the larger images and add some custom CSS to make the slides fit the viewport height.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.059 seconds