Good afternoon guys,

How can I change the height of the images in the slideshow? JoomlArt Advanced Custom Page Module - Hero - Styles 1. The same slideshow is in the Logistics layout. As background images, I have linked images with a resolution of 1920x1280x. I would like to keep the same 3:2 aspect ratio whether I view the site on a phone, tablet, or FHD, UHD, 4K monitor.

Cheers,
Maciek

Hi @m4ciekk,
I can't add custom style to your website when login with jasupport account. So you can add following CSS to your custome.css file to increase the height of the slideshow to a 3:2 ratio.

.acm-hero.style-1 .owl-carousel .owl-stage-outer {
  width: 100%;
  height: 0;
  padding-top: calc(2/3*100%);
}

.acm-hero.style-1 .owl-carousel .owl-stage-outer .owl-stage {
  position: absolute;
  top: 0;
  bottom: 0;
}

.acm-hero.style-1 .owl-carousel.owl-drag .owl-item {
  height: 100%
}

.acm-hero.style-1 .acm-hero-item {
  background-size: cover;
  display: flex;
  align-items: center;
  height: 100%;
}

Kind regards,

    cssyeah
    Thank you so much for quick response and solution. I finally change aspect ratio for 1:2 but left 2:3 only for mobile.

    Could you tell me one more thing?

    Is there a way to loop a slideshow? I have already 7 different images in slideshow and set up an autoplay. When it comes to the last one it stops. I wish it could play over and over again.1->7 then again 1->7, etc.

    PS. I could add code do custom.css using jasupport account. Site Template Style > one of the ja_purity_iv style > Tools > Edit Custom CSS

      Hi @m4ciekk,
      Can you assign jasupport account to Supper Admin? I need permission to edit custom.css file and custom code for slideshow. More importantly, I need to test before I notify you of completion.

        cssyeah
        There is not such as option as Support Admin. support is an Administrator account with all his privileges. The higher one is only Super User.

          Hi @m4ciekk,

          1. Update CSS rules to change slideshow image ratio: 
            .acm-hero.style-1 .owl-carousel .owl-stage-outer {
  width: 100%;
  height: 0;
  padding-top: calc(2/3*100%);
}

@media (min-width: 768px) {
  .acm-hero.style-1 .owl-carousel .owl-stage-outer {
    padding-top: calc(1/2*100%);
  }
}

.acm-hero.style-1 .owl-carousel .owl-stage-outer .owl-stage {
  position: absolute;
  top: 0;
  bottom: 0;
}

.acm-hero.style-1 .owl-carousel.owl-drag .owl-item {
  height: 100%
}

.acm-hero.style-1 .acm-hero-item {
  background-size: cover;
  display: flex;
  align-items: center;
  height: 100%;
}
          2. Slideshow loop.
            Step 1: Open the style-1.php file in the "[root]/templates/ja_purity_iv/acm/hero/tmpl/" folder.
            Step 2: Go to about line 68 and change the value of the loop property from false to true. 
                loop: true,
            Step 3: Reload your website to view the changes.

            cssyeah
            Thank You so much. It helped.

            I have few other issues but I'll try to figure out it by self first before I create a new topic.

            Thanks once again.
            Cheers,
            Maciek

              10 days later
              Write a Reply...
              You need to Login to view replies.