0
Welcome Guest! Login
0 items Join Now

How to turn off thumbnails on Slider

Last Post
Search Topic

  • How to turn off thumbnails on Slider

    Posted 3 years 8 months ago
    • Hi,

      I am trying to figure out how to turn off the thumbnail images on the home page slider of the Audacity theme for Wordpress. I like the look of the large image with a text overlay, but I don't want it to be a slider, just a static image (with no thumbnails). Is it possible to remove the thumbnails?

      Thanks for your help with this.
    #1429991

  • Re: How to turn off thumbnails on Slider

    Posted 3 years 8 months ago
    • Another follow-up here is related to the text on this slider. If you view the website url, you'll notice that my text isn't visible (it is pushed under the menu). If you can give me some guidance on how to reduce the size so it will be visible, that will be great. Please let me know if I need to open up a new ticket with this question. Thanks so much for your time.
    #1429992
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: How to turn off thumbnails on Slider

    Posted 3 years 8 months ago
    • Please note that by answering your own post you take yourself out of the MODS "unanswered posts" queue and therefore might have to wait longer for a response - it's better to edit your original post so this does not happen.

      Really you have way too much text there but you can do this:
      .g-owlcarousel-slider .owl-thumbs {
   display: none;
}
.owl-carousel .owl-item .g-owlcarousel-image-container img {
   min-height: 55vh;
}

      The second statement may need to be used in media queries to set a different value by viewport size.
      // Gantry 5 custom CSS file

// import breakpoints
@import "dependencies";

// Typical values are the default breakpoints set in Gantry 5
// but these values are user definable in style settings
// so that is why the code below uses mixins to get the actual 
// values from Gantry 5 template.

// commonly used media queries

//  typically min 75rem 
@include breakpoint(large-desktop-range) {

}
// typically range 60rem to 74.938rem 
@include breakpoint(desktop-range) {

}

// typically 48rem to 59.938rem
@include breakpoint(tablet-range) {

}
// typically 30rem to 47.938rem
@include breakpoint(large-mobile-range) {

}
// typically max 30rem
@include breakpoint(small-mobile-range) {

}

// Less commonly used media queries

// typically min 60rem
@include breakpoint(desktop-only) {

}
// typically min 48rem
@include breakpoint(no-mobile) {

}
// typically max 47.938 rem
@include breakpoint(mobile-only) {

}
// typically max 59.938rem
@include breakpoint(no-desktop) {

}

// Mobile Menu Breakpoint
@media only all and (max-width: $breakpoints-mobile-menu-breakpoint) { 

}

      Media queries work like this:

      if the viewport size is xxxxx then
      use this css
      endif


      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.
    #1430003

Time to create page: 0.047 seconds