Hi!
I have a Aussie template. As when the screen size changes, the photos in the home slideshow are not framed properly. So I would like to find a way to make appear in the slideshow different photos depending on the size of the screen.
So I created 2 Zentools slideshow modules, the same but with photos suitable for different screens. I then inserted a media query rule in custom.css to display only the right zentools module depending on the width of the screen:
These are the rules:

@media screen and (max-width:1366px) {
#banner.zg-col.zg-col-12 .moduletable.aussie-slideshow.wave-border:nth-child(1){
	display:none !important;
}
}
@media screen and (min-width:1367px) {
#banner.zg-col.zg-col-12 .moduletable.aussie-slideshow.wave-border:nth-child(2){
	display:none !important;
}
}

But what I get is a white screen.
Can you help me?
Thanks

Hi

I'd hide the module rather the content - either using the existing responsive classes which would reflect the template breakpoint settings or the module id (which is unique for each module) and write some custom css for it

Are you familiar with above?

Cheers
Paul

    mikyilfilosofo
    Thought that you can use the module class suffix instead of styling for child elements like that.

    For example, in the module settings > Advanced tab > add your own class for option: Module Class suffix: http://prntscr.com/k528gv

    I add 2 classes for 2 modules: one on mobile and another on desktop respectively: showMobile / hideMobile

    @media (min-width: 480px) {
  #bannerwrap .aussie-slideshow.showMobile {
    display: none;
  }
}
@media (max-width: 480px) {
#bannerwrap .aussie-slideshow.hideMobile {
    display: none;
}
}

        paulus1031
        Sorry, I forgot to provide administrator privileges. Now I have them set up. I have already entered the credentials in the table of this discussion.
        Thanks
        Cheers

          I've set the modules up

          The problem was with the modules configuration e.g. they didn't work even without the responsive classes

          Slideshow 1920px has these classes
          aussie-slideshow wave-border hidden-phone

          Slideshow 1366px
          aussie-slideshow wave-border hidden-desktop hidden-tablets visible-phone

          This is what is added now

          I enabled the articles that were unpublished for one module and added readmore to each article

          Cheers
          Paul

            paulus1031
            Hi!
            Why did not the modules configuration work?
            Could I know where these classes added now you used are described? In this way the next time I will use them without asking for help.
            I did not understand why you added the "readmore". What purpose does it serve? when there was only one module the "readmore" was not there.
            The alternation of the modules works, but the breakpoint is wrong. I wish there was a breakpoint at 1366px.
            In addition, the title superimposed and the disks indicating which of the 3 slides is active, are both moved much higher, as you can see in attached screenshot. Why?
            The central logo that I had put is gone. There is no longer even in the images folder. It is also seen from the attached screenshot.
            Cheers

              Hi

              I adjusted the height of the backstretch as the image size is a little problematic dimension wise
              I'd forgotten the position of the text is linked to the slideshow backstretch height

              I've changed the backstretch height so you can see on the desktop module

              The readmore you don't have to use but I've found it reduces confusion as the introtext will only display content before the readmore line

              Regarding the navigation disks this is linked again to the backstretch value which I have changed back to 770 from the 540

              The breakpoint is more complicated

              Are you planning to change the template breakpoints?

              Cheers
              Paul

              Regarding the logo I can see it on the site

              Cheers
              Paul

              Hi!
              I added the logo later on. In fact, in the screenshot that I attached in the previous post, the logo was missing.
              Having two modules is useless, as they alternate only when the screen becomes very small, around 618px. However, now the photos can be seen entirely on all screens.
              How do you remove the white stripe that appears on the top edge under the logo (see screenshot)?
              Thanks!
              Cheers

              Try to add the following custom css code to remove marked white strip:

              #bannerwrap .moduletable {
	margin-top: 0;
}

              Cheers
              Joshua

                Hi

                Looking at the site I see module id 1185 displaying on desktop and tablet
                and module id 1000 displaying on phone

                They desktop module hides at the breakpoints set in the template settings at 619px

                As these modules both currently display images they will display images on all screens

                Cheers
                Paul

                Joshua-M

                Try to add the following custom css code to remove marked white strip:

                #bannerwrap .moduletable {
                margin-top: 0;
                }
                Cheers
                Joshua

                Hi! It works!
                Thanks!
                Cheers

                  Hi!
                  I tried to use these classes for module "Slideshow 1366px":

                  aussie-slideshow wave-border hidden-desktop visible-tablets visible-phone

                  ...and I tried to use these other classes for module "Slideshow 1920px":

                  aussie-slideshow wave-border hidden-phone hidden-tablets visible-desktop

                  My goal was to enlarge the breakpoint from phone (620px) to tablet (787px), which manages the alternation between the two modules, without changing the template setting.
                  The result is that from 620px to 787px of width no slideshow is displayed.
                  What did I do wrong?
                  Thanks!
                  Cheers

                  Hi

                  Can you not use

                  aussie-slideshow wave-border hidden-phone on the desktop width

                  and other

                  aussie-slideshow wave-border hidden-tablets hidden desktop

                  Cheers
                  Paul

                  Hi!
                  1) Sorry, it's not clear to me. Could you tell me what classes I have to write in the "Slideshow 1366px" module and what classes should I write in the "Slideshow 1920px" module?

                  I would like the "Slideshow 1366px" module to be displayed on phone and tablet, while the "Slideshow 1920px" module only on desktop.
                  Thanks!

                  2) As you can see in attached screenshot, the photo of the slideshow comes out from below creating a strip. How to solve? I used this rule, but it is overwritten.:

                  html.itemid-101 .backstretch{ height: 740px !important;}

                  Thanks!
                  Cheers

                  Hi,

                  1) For you Slideshow 1366px try to use only this class:

                  aussie-slideshow wave-border hidden-desktop

                  2) Please try to remove your browser's cache, because I can't see this issue (seems that your code works).

                  Cheers
                  Joshua

                  Hi!
                  Now everything works! I only regret that we can not use as breakpoints greater width of 787px, such 1200px.
                  Thanks to both for the help, Paulus1031 and Joshua-M!
                  Cheers

                  Thanks for the update

                  You can change the breakpoints in the template settings

                  There are classes to use to target these I think from memory

                  Hide classes
                  hidden-desktop
                  hidden-tablets
                  hidden-tablet
                  hidden-phones
                  hidden-phone
                  min-width-desktop
                  min-width-tablet
                  min-width-phones
                  hidden-navcollapse
                  hidden-gridcollapse

                  Visible classes
                  visible-desktop
                  visible-tablets
                  visible-tablet
                  visible-phones
                  visible-phone
                  visible-navcollapse
                  visible-gridcollapse

                  Any problems let us know

                  I've not actually used all these classes on the sites I've built 🙂

                  Cheers
                  Paul

                  Write a Reply...
                  You need to Login to view replies.