Joomla Templates Club 406,261 posts

[rangga san Friend rangga sanJoin date: February 2017Posts: 52Downloads:454Uploads:0 Thanks: 4 Thanked: 1 times in 1 posts]

#1057880

Hi,

How to resize the slideshow module?

I just want to resize the height of it and also resize the swiper (the 3 item images below) to be smaller.

• This topic was modified 7 years, 3 months ago by  rangga san.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1058120

Hi,

You can try to inspect the element by editor on browser you’re using: http://prntscr.com/gbzate

What I usually do is set Compress CSS in Template manager to No, then hover on any HTML element (i.e. button, tag, text, …) you want and right click on it and then click on inspect element, it will show you which CSS class it is using and which CSS file and the path to this element on the right side. then you can go to the file and replace it with new CSS you change.

[rangga san Friend rangga sanJoin date: February 2017Posts: 52Downloads:454Uploads:0 Thanks: 4 Thanked: 1 times in 1 posts]

#1058377

This is what I did to meet my requirement

@media (min-width: 1200px)
{
  .slideshow {
    height: 525px;
  }
  .slideshow .slider-content-inner .group-action {
    padding-bottom: 150px;
  }
  .item-title.ja-animation{
    font-size: 24px;
  }
  .swiper-container.slideshow-thumbs{
    height: 115px;
  }
}

@media (min-width: 1600px)
{
  .slideshow {
    height: 525px;
  }
  .slideshow .slider-content-inner .group-action {
    padding-bottom: 275px;
  }
  .item-title.ja-animation{
    font-size: 24px;
  }
  .swiper-container.slideshow-thumbs{
    height: 115px;
  }
}

@media (min-width: 1920px)
{
  .slideshow {
    height: 525px;
  }
  .slideshow .slider-content-inner .group-action {
    padding-bottom: 425px;
  }
  .item-title.ja-animation{
    font-size: 24px;
  }
  .swiper-container.slideshow-thumbs{
    height: 115px;
  }
}

Do you have better suggestion? Simple code that does not require to add screen size. I mean one code for any screen (phone, tablet, desktop)

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1058530

Hi,

If you’re familiar with LESS, you can see how we style for it in different screen via this file: templates/ja_company/acm/slideshow/less/style.less

and you can customize in the same way.

[rangga san Friend rangga sanJoin date: February 2017Posts: 52Downloads:454Uploads:0 Thanks: 4 Thanked: 1 times in 1 posts]

#1058536

I’m unfamiliar with LESS but if I see the code structure, it more neat than CSS. But you have both LESS and CSS files that set style in different screen. So, which one is running first? LESS or CSS? and what’s the point making 2 files (LESS and CSS)?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1058987

Hi,

LESS is great for development stage of a website, for example, with a specific screen size (use media jquery in Bootstrap) you can define various elements while in CSS, you will need to define for each element one by one.

In templates built with T3 framework – which utilizes Bootstrap, we provide option in template manager to enable / disable Development mode, when set this mode ON, template will load LESS files, if it’s OFF, the css files will be called.

[rangga san Friend rangga sanJoin date: February 2017Posts: 52Downloads:454Uploads:0 Thanks: 4 Thanked: 1 times in 1 posts]

#1059100

Thanks for the explanation

• This reply was modified 7 years, 2 months ago by  rangga san.

[Author]

Posts