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

                You need to Login to view replies.