Framework

Advanced Search

How to make the banner/slider images look better on mobiles

Permalink Browser Info Environment
I love this theme but I have had a lot of problems with the image slider in the header. The client was complaining that on mobile phones the photos did not look mobile friendly and I had to agree - where most image sliders resize with their aspect ratio intact on the Framework theme they are background images so are cropped from left and right. This means that unless you are very clever with your photo choices you get an unattractive segment to view on phone screens.

After much thought and playing around I have finally found a solution!

Paste this code into the Design > Custom CSS area:

@media only screen and (max-width: 500px) { .master-container #banner .bancontcenter .rslides>li {
    height: 250px!important;
    width: 100%;
    margin-top: 120px!important;
}
.innerpage #banner {
  height: 320px!important;
}
}


The margin top is because at a smaller height the photos are mostly hidden behind the top header area so I added it to push the images below it. You lose that nice transparent look but that's a small price to pay!

You might need to play around with the heights and margin-top etc to get it to work with your site. This also gets rid of the expanse of space below the images so it looks really neat.

I have noticed that a few people have asked about this topic so I really hope this helps someone!

Lucy
Type: Discussion
Status: In Progress
ppisoban
View Replies:
ppisoban replied on at Permalink Reply
ppisoban
I also wanted to add that I have another post on this subject - I already added some code to my Custom CSS which might also be required to make this work!

https://marketplace.concretecms.com/marketplace/themes/framework/sup...

concrete5 Environment Information

# concrete5 Version
Core Version - 8.5.7
Version Installed - 8.5.7
Database Version - 20210623000000

# Database Information
Version: 10.3.38-MariaDB-log-cll-lve
SQL Mode: NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION

# concrete5 Packages
Framework Theme (1.7.9), Mega Menu (1.6.4), Simple Gallery (1.0.9)

# concrete5 Overrides
None

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

# Server Software
LiteSpeed

# Server API
litespeed

# PHP Version
7.4.33

# PHP Extensions
bcmath, bz2, calendar, Core, ctype, curl, date, dom, exif, fileinfo, filter, ftp, gd, gettext, gmp, hash, i360, iconv, imagick, imap, json, libxml, litespeed, mbstring, mysqli, mysqlnd, openssl, pcntl, pcre, PDO, pdo_mysql, pdo_sqlite, Phar, posix, readline, Reflection, session, shmop, SimpleXML, sockets, SPL, sqlite3, standard, timezonedb, tokenizer, xml, xmlreader, xmlrpc, xmlwriter, xsl, zip, zlib

# PHP Settings
max_execution_time - 120
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - 360
max_input_vars - 8000
memory_limit - 256M
post_max_size - 512M
upload_max_filesize - 512M
mbstring.regex_retry_limit - 1000000
mbstring.regex_stack_limit - 100000
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 7200
unserialize_max_depth - 4096

Browser User-Agent String

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 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.