nataniellam Posted August 6, 2023 Posted August 6, 2023 Site URL: www.sggonewild.com/tags Currently, the buttons are stacked when viewed on mobile. I'd like to change the buttons to be displayed side-by-side, with the same width.
DPruitt Posted August 6, 2023 Posted August 6, 2023 (edited) Try inserting this into custom CSS: @media screen and (max-width: 640px) { .col.sqs-col-4.span-4 { width: 33.33%!important; display: inline-block; } .small-button-style-outline .sqs-block-button .sqs-block-button-element--small { width: 95px; padding-left: 2px; padding-right: 2px; font-size: 9px; color: #000; } } Edited August 21, 2023 by DPruitt tuanphan 1
nataniellam Posted August 20, 2023 Author Posted August 20, 2023 Hi @DPruitt, thanks for the reply. It works but is it possible to align the buttons to the center, and not let it go out of the screen? Thanks
Solution Web_Solutions Posted August 20, 2023 Solution Posted August 20, 2023 9 minutes ago, nataniellam said: Hi @DPruitt, thanks for the reply. It works but is it possible to align the buttons to the center, and not let it go out of the screen? Thanks Replace the previous code with the code below @media screen and (max-width: 640px) { #collection-64cf42bd08338832a9d40ec0 { .sqs-col-12 > .sqs-row { display: flex !important; justify-content: center; #block-yui_3_17_2_1_1691304644309_1821, #block-yui_3_17_2_1_1691304644309_2944 { padding-left: 0 !important; padding-right: 0 !important; } #block-yui_3_17_2_1_1691304644309_2357 { padding-left: 5px !important; padding-right: 5px !important; a.sqs-block-button-element--small { padding: 13px 15px !important; font-size: 9px !important; } } } } } Kobir, nataniellam and Ainul 3 If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks MD Rofik Website Designer and Digital Marketer ☕Am I helpful? Want to offer me a coffee? ✉ Send me a message if needed any help. I'll try to reply as soon as possible.
DPruitt Posted August 21, 2023 Posted August 21, 2023 I updated the code just now, but basically, you can alter the "width" and/or the left & right padding.... You might need to shrink the text size too...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment