0
Welcome Guest! Login
0 items Join Now

Make Slideshow Responsive

  • Make Slideshow Responsive

    Posted 1 month 2 weeks ago
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 87925
    • Thanks: 11366
    • Web Designer/Developer

    Re: Make Slideshow Responsive

    Posted 1 month 2 weeks ago
    • 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.
  • Re: Make Slideshow Responsive

    Posted 1 month 2 weeks ago
    • 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's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 87925
    • Thanks: 11366
    • Web Designer/Developer

    Re: Make Slideshow Responsive

    Posted 1 month 2 weeks ago
    • 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.094 seconds