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

Type: Pre-Sale
Status: Resolved
View Replies:
webdesign4 replied on at Permalink Reply
sorry trachten-speckbacher.de is the url
pilipala replied on at Permalink Reply
pilipala
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 at Permalink Reply
Thanks a lot - it works !!!
pilipala replied on at Permalink Reply
pilipala
Great! Thanks for letting us know -

Jennifer
webdesign4 replied on at Permalink Reply
Jennifer another question.
where can i chance for the mobile version the h1, h2 ...??
Thanks

Klaus
webdesign4 replied on at Permalink Reply
Jennifer another question.
where can i chance for the mobile version the h1, h2 ...??
Thanks

Klaus
webdesign4 replied on at Permalink Reply
Jennifer another question.
where can i chance for the mobile version the h1, h2 ...??
Thanks

Klaus
webdesign4 replied on at Permalink Reply
Jennifer another question.
where can i chance for the mobile version the h1, h2 ...??
Thanks

Klaus
pilipala replied on at Permalink Reply
pilipala
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;
}


Thanks,

Jennifer

concrete5 Environment Information

# concrete5 Version
Core Version - 8.2.1
Version Installed - 8.2.1
Database Version - 20170802000000

# concrete5 Packages
Background Image and Overlay (0.9.9), Cloneamental (0.9.3), Easy Fancybox 2 (1.2), Image Carousel (0.9.0.8), Juniper (1.0.5), Manual Nav (2.2.0), Palette (2.0.4), Styled Maps (1.2.3), Zoomer (1.0.1)

# concrete5 Overrides
None

# concrete5 Cache Settings
Block Cache - On
Overrides Cache - On
Full Page Caching - On - In all cases.
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software
Apache/2.4.27

# Server API
cgi-fcgi

# PHP Version
7.0.20

# PHP Extensions
bcmath, bz2, calendar, cgi-fcgi, Core, ctype, curl, date, dba, dom, exif, fileinfo, filter, ftp, gd, gettext, hash, iconv, imap, json, libxml, mbstring, mcrypt, mysqli, mysqlnd, openssl, pcntl, pcre, PDO, pdo_mysql, pdo_sqlite, pgsql, Phar, posix, Reflection, session, SimpleXML, soap, SPL, sqlite3, standard, tokenizer, wddx, xml, xmlreader, xmlwriter, xsl, zip, zlib

# PHP Settings
max_execution_time - 180
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - -1
max_input_vars - 1000
memory_limit - 100M
post_max_size - 8M
sql.safe_mode - Off
upload_max_filesize - 8M
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
pgsql.max_links - Unlimited
pgsql.max_persistent - Unlimited
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 7200
soap.wsdl_cache_limit - 5

Browser User-Agent String

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.