live resizing of buttons?

Permalink Browser Info Environment
Hi

Does anyone know if this package has the ability for the buttons to resize as a small device comes to the page that contains them?

I am attempting to use a button bar using three buttons, on normal size (I wanted to use large but it was too big) and instead of resizing on small devices it the line breaks and I end up with multiple rows (two buttons on top and one button on the bottom).

thanks

Type: Discussion
Status: In Progress
View Replies:
mnakalay replied on at Permalink Reply
mnakalay
Hello
I am sorry i am limited to my phone to access the internet at the moment so it is difficult to answer properly.

I should be back online in a day or 2and will be happy to help with this issue.

Thank you for your patience
mnakalay replied on at Permalink Reply
mnakalay
Hello,
I finally got my Internet back and can now answer you properly.

The bad news is: buttons are usually not that much responsive on their own, you would have to modify padding, width, and font-size in your Stylesheet using media queries.

For most buttons, the width is determined by the left and right padding as well as length of text and font-size. For square buttons, the width is fixed to be the same as the height.

The GOOD news, however, is I have decided to include a new option to offer some sizing flexibility.

The idea is that after defining different button size as you can do now, you will be able to attach more than one size per button. 1 size will be the default and the other ones will be used at specific screen size (or breakpoints).

It would work through a simple piece of Javascript.

So say you define 3 sizes: small, large and xl, you can create a button and say you want it to use the small size for a screen width of 0 to 320px. Then use the large size when the screen size is above 320px and finally use the xl one when the screen size is above 780px. Those numbers are only examples of course.

To make it easy to re-use the values attached to a button, you will be able to set those values in a re-usable theme (as you can already do for colors, shapes...) and simply apply the theme to any button.

Would that system work for you?
bayleafmedia replied on at Permalink Reply
Hi Mnakaly,

Sorry for my delay. Yes, that system would work for me.

Thanks

concrete5 Environment Information

# concrete5 Version
Core Version - 8.1.0
Version Installed - 8.1.0
Database Version - 20170123000000

# concrete5 Packages
Buttons Factory Pro (2.1), Cycle2 Slide Show (1.0.1), Easy Social Feed (0.9.12), Supermint Theme (3.4.1.2)

# concrete5 Overrides
languages/sv_SE/LC_MESSAGES/messages.mo, languages/sv_SE/LC_MESSAGES, languages/sv_SE, languages/el_GR/LC_MESSAGES/messages.mo, languages/el_GR/LC_MESSAGES, languages/el_GR, languages/it_IT/LC_MESSAGES/messages.mo, languages/it_IT/LC_MESSAGES, languages/it_IT, languages/ja_JP/LC_MESSAGES/messages.mo, languages/ja_JP/LC_MESSAGES, languages/ja_JP, languages/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, languages/cs_CZ/LC_MESSAGES/messages.mo, languages/cs_CZ/LC_MESSAGES, languages/cs_CZ, languages/es_PY/LC_MESSAGES/messages.mo, languages/es_PY/LC_MESSAGES, languages/es_PY, languages/pt_BR/LC_MESSAGES/messages.mo, languages/pt_BR/LC_MESSAGES, languages/pt_BR, languages/nl_NL/LC_MESSAGES/messages.mo, languages/nl_NL/LC_MESSAGES, languages/nl_NL, languages/nb_NO/LC_MESSAGES/messages.mo, languages/nb_NO/LC_MESSAGES, languages/nb_NO, languages/es_PE/LC_MESSAGES/messages.mo, languages/es_PE/LC_MESSAGES, languages/es_PE, languages/da_DK/LC_MESSAGES/messages.mo, languages/da_DK/LC_MESSAGES, languages/da_DK, languages/ru_RU/LC_MESSAGES/messages.mo, languages/ru_RU/LC_MESSAGES, languages/ru_RU, languages/de_DE/LC_MESSAGES/messages.mo, languages/de_DE/LC_MESSAGES, languages/de_DE, languages/en_GB/LC_MESSAGES/messages.mo, languages/en_GB/LC_MESSAGES, languages/en_GB, themes/supermint/css/supermint.css, themes/supermint/css, themes/supermint, languages/sv_SE/LC_MESSAGES/messages.mo, languages/sv_SE/LC_MESSAGES, languages/sv_SE, languages/el_GR/LC_MESSAGES/messages.mo, languages/el_GR/LC_MESSAGES, languages/el_GR, languages/it_IT/LC_MESSAGES/messages.mo, languages/it_IT/LC_MESSAGES, languages/it_IT, languages/ja_JP/LC_MESSAGES/messages.mo, languages/ja_JP/LC_MESSAGES, languages/ja_JP, languages/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, languages/cs_CZ/LC_MESSAGES/messages.mo, languages/cs_CZ/LC_MESSAGES, languages/cs_CZ, languages/es_PY/LC_MESSAGES/messages.mo, languages/es_PY/LC_MESSAGES, languages/es_PY, languages/pt_BR/LC_MESSAGES/messages.mo, languages/pt_BR/LC_MESSAGES, languages/pt_BR, languages/nl_NL/LC_MESSAGES/messages.mo, languages/nl_NL/LC_MESSAGES, languages/nl_NL, languages/nb_NO/LC_MESSAGES/messages.mo, languages/nb_NO/LC_MESSAGES, languages/nb_NO, languages/es_PE/LC_MESSAGES/messages.mo, languages/es_PE/LC_MESSAGES, languages/es_PE, languages/da_DK/LC_MESSAGES/messages.mo, languages/da_DK/LC_MESSAGES, languages/da_DK, languages/ru_RU/LC_MESSAGES/messages.mo, languages/ru_RU/LC_MESSAGES, languages/ru_RU, languages/de_DE/LC_MESSAGES/messages.mo, languages/de_DE/LC_MESSAGES, languages/de_DE, languages/en_GB/LC_MESSAGES/messages.mo, languages/en_GB/LC_MESSAGES, languages/en_GB, themes/supermint/css/supermint.css, themes/supermint/css, themes/supermint

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

# Server Software
Apache

# Server API
cgi-fcgi

# PHP Version
7.0.18

# PHP Extensions
bcmath, bz2, calendar, cgi-fcgi, Core, ctype, curl, date, dom, exif, fileinfo, filter, ftp, gd, gettext, gmp, hash, iconv, imap, intl, ionCube Loader, json, libxml, mbstring, mcrypt, mysqli, odbc, openssl, pcre, PDO, pdo_mysql, pdo_sqlite, Phar, posix, pspell, Reflection, session, SimpleXML, soap, sockets, SPL, sqlite3, standard, tidy, tokenizer, wddx, xml, xmlreader, xmlrpc, xmlwriter, xsl, zip, zlib

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

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:53.0) Gecko/20100101 Firefox/53.0

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.