Responsive Slider
Permalink Browser Info Environment
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
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 |
sorry trachten-speckbacher.de is the url
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:
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:
Thanks,
Jennifer
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
Thanks a lot - it works !!!
Great! Thanks for letting us know -
Jennifer
Jennifer
Jennifer another question.
where can i chance for the mobile version the h1, h2 ...??
Thanks
Klaus
where can i chance for the mobile version the h1, h2 ...??
Thanks
Klaus
Jennifer another question.
where can i chance for the mobile version the h1, h2 ...??
Thanks
Klaus
where can i chance for the mobile version the h1, h2 ...??
Thanks
Klaus
Jennifer another question.
where can i chance for the mobile version the h1, h2 ...??
Thanks
Klaus
where can i chance for the mobile version the h1, h2 ...??
Thanks
Klaus
Jennifer another question.
where can i chance for the mobile version the h1, h2 ...??
Thanks
Klaus
where can i chance for the mobile version the h1, h2 ...??
Thanks
Klaus
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.
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.
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:
Thanks,
Jennifer
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.
Thanks,
Jennifer
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.
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.
concrete5 8.5.4です。
We've sent you a pm. If you would like, send us your link via pm and we can check. Thanks, Jennifer