Monitor Reply

Support

Responsive Slider

Permalink Browser Info Environment December 19, 2017 at 9:35 PM

Hi, i like you theme !!
I have a problem . my client ask me is it possible to have this index site with slider responsive.
please take a look to
www.www.trachten-speckbacher.de...

on desktop is ist very well, but on the mobile version, the images are not reduced ?
whats wrong - Did I do something wrong ?

Thanks a lot
Klaus

Type:	Pre-Sale
Status:	In Progress

webdesign4 replied on Dec 19, 2017 at 9:36 pm Permalink Reply

sorry trachten-speckbacher.de is the url

pilipala replied on Dec 20, 2017 at 10:24 am Permalink Reply

Hi

Thank you, we're glad you like the theme. No, you didn't do anything wrong, that is the way that we have designed the slider on the Home V2 template. The reason for this design choice, is that it looks odd if you have a full width banner slider on a large screen, and then keep it full width when it is a narrower browser view. If the image retains the same width and shrinks down, then the height shrinks as well and becomes too small.

If you want to change it and see what it looks like, you can add some custom CSS, or change it directly in the appropriate CSS file. We would recommend that you change it by adding custom CSS, as this will save the changes even if you update your theme.

To change it by adding custom CSS, please follow the steps below:

1. In edit mode, click on the cog icon (upper left)
2. Choose design > Customise
3. Scroll down left menu, click on cog icon next to Custom CSS
4. In the pop up box enter CSS from below:

div.ccm-page .juniper-banner-slider .rslides img {
      width: 100%;
        max-width: 100%;
      height: auto;
}

5. Click Save > Save Changes > Entire site

If you would prefer to change it in the CSS file, it is located here:

juniper\css\build\blocks\image-slider.less

And you would delete this CSS:

.rslides img {
      width: auto;
        width: initial;
        max-width: none;
      height: 500px;
    }

Thanks,

Jennifer

webdesign4 replied on Dec 22, 2017 at 10:46 pm Permalink Reply

Thanks a lot - it works !!!

pilipala replied on Dec 23, 2017 at 9:27 am Permalink Reply

Great! Thanks for letting us know -

Jennifer

webdesign4 replied on Dec 28, 2017 at 11:18 pm Permalink Reply

Jennifer another question.
where can i chance for the mobile version the h1, h2 ...??
Thanks

Klaus

webdesign4 replied on Dec 28, 2017 at 11:19 pm Permalink Reply

Jennifer another question.
where can i chance for the mobile version the h1, h2 ...??
Thanks

Klaus

webdesign4 replied on Dec 28, 2017 at 11:20 pm Permalink Reply

Jennifer another question.
where can i chance for the mobile version the h1, h2 ...??
Thanks

Klaus

webdesign4 replied on Dec 28, 2017 at 11:22 pm Permalink Reply

Jennifer another question.
where can i chance for the mobile version the h1, h2 ...??
Thanks

Klaus

pilipala replied on Jan 8, 2018 at 6:47 pm Permalink Reply

Hi Klaus

Apologies for the delay in response. For some reason this support ticket did not come through to our email.

I'm not sure if you mean the headings and text for the slider? If so, the CSS is located here:

juniper\themes\juniper\css\build\blocks\image-slider.less

If you wanted to target styles for the heading and the paragraph in the image slider you could put your styles within these classes in the Custom CSS pop up in the design panel.

div.ccm-page .ccm-image-slider h2 {
put your styles here
}
div.ccm-page .ccm-image-slider p {
put your styles here
}

If you mean headings in general, the styles are located here:

juniper\themes\juniper\css\build\typography.less

You can change the font sizes of the mobile fonts by adding custom CSS.

Click cog icon on upper left of toolbar > Design > Click on customise > scroll down choose Custom CSS > Add CSS in pop up > Click Save > Save changes > Entire site

E.g.

div.ccm-page h1 {
    font-size: 32px;
}
div.ccm-page h2 {
    font-size: 24px;
}

For browser widths over 768px the size can be changed in the design panel. If you want more control, you can add more media queries such as below:

@media (min-width: 768px) {
div.ccm-page h1 {
    font-size: 36px;
}
div.ccm-page h2 {
    font-size: 28px;
} 
}
@media (min-width: 992px) {
div.ccm-page h1 {
    font-size: 42px;
}
div.ccm-page h2 {
    font-size: 32px;
}

Viewing 15 lines of 24 lines. View entire code block.

 
@media (min-width: 768px) {
div.ccm-page h1 {
    font-size: 36px;
}
div.ccm-page h2 {
    font-size: 28px;
} 
}
 
@media (min-width: 992px) {
div.ccm-page h1 {
    font-size: 42px;
}
div.ccm-page h2 {
    font-size: 32px;
} 
 
}
@media (min-width: 1200px) {
div.ccm-page h1 {
    font-size: 50px;
}
div.ccm-page h2 {
    font-size: 38px;
} 
}

Thanks,

Jennifer

dsds replied on Feb 24, 2021 at 9:31 am Permalink Reply

I read this post and made the image slider responsive, but it doesn't work.
1. Fill in the CSS from the design and save
2. Remove unnecessary parts of image-slider.less
There was no change.
Please point out any mistakes.
Thank you.

dsds replied on Feb 24, 2021 at 8:43 am Permalink Reply

concrete5 8.5.4です。

pilipala replied on Feb 25, 2021 at 3:38 pm Permalink Reply

We've sent you a pm. If you would like, send us your link via pm and we can check. Thanks, Jennifer

Juniper

Support

Responsive Slider

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post