chadhinsonjr Posted August 30, 2021 Share Posted August 30, 2021 Site URL: https://whoamitv.tv/music The images below are how my buttons align on both mobile and desktop. The buttons sit next to each other on desktop but stack on mobile. Is there a way I can keep the buttons next to each other even while on mobile? Link to comment
tuanphan Posted September 1, 2021 Share Posted September 1, 2021 Add to Design > Custom CSS /* 3 buttons side by side */ @media screen and (max-width:767px) { div#page-section-612d39c8b577d75aeeaa0ec5 .span-10>.row:nth-child(3) .col { width: calc(~"33.3333% - 20px") !important; float: left !important; margin: 10px !important; } div#page-section-612d39c8b577d75aeeaa0ec5 .span-10>.row:nth-child(3) .col * { font-size: 12px; } div#page-section-612d39c8b577d75aeeaa0ec5 .span-10>.row:nth-child(3) .col .button-block { padding: 0 !important; } } creedon and chadhinsonjr 2 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
chadhinsonjr Posted September 1, 2021 Author Share Posted September 1, 2021 6 hours ago, tuanphan said: Add to Design > Custom CSS /* 3 buttons side by side */ @media screen and (max-width:767px) { div#page-section-612d39c8b577d75aeeaa0ec5 .span-10>.row:nth-child(3) .col { width: calc(~"33.3333% - 20px") !important; float: left !important; margin: 10px !important; } div#page-section-612d39c8b577d75aeeaa0ec5 .span-10>.row:nth-child(3) .col * { font-size: 12px; } div#page-section-612d39c8b577d75aeeaa0ec5 .span-10>.row:nth-child(3) .col .button-block { padding: 0 !important; } } Thank you so much! Do you have any idea how I could fix the sizing issue on the buttons so that they appear to be the same size? Link to comment
tuanphan Posted September 3, 2021 Share Posted September 3, 2021 On 9/1/2021 at 10:40 PM, chadhinsonjr said: Thank you so much! Do you have any idea how I could fix the sizing issue on the buttons so that they appear to be the same size? You mean make button 3 same as 1&2 or make button 1&2 same as button 3? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
chadhinsonjr Posted September 4, 2021 Author Share Posted September 4, 2021 I would like 3 to be the same as 1 and 2. Link to comment
tuanphan Posted September 6, 2021 Share Posted September 6, 2021 Hi, It looks like you fixed this? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
chadhinsonjr Posted October 18, 2021 Author Share Posted October 18, 2021 (edited) Hey, I was wondering if it is possible to do this same thing with 3-4 elements. If you see the picture below there is a text block, a picture block, a button block, and a space block to offset the image. Is there a way to have this displayed exactly like this on mobile? the url is https://creativebelievers.com/staymotivated Edited October 18, 2021 by chadhinsonjr Link to comment
tuanphan Posted October 20, 2021 Share Posted October 20, 2021 On 10/19/2021 at 3:42 AM, chadhinsonjr said: Hey, I was wondering if it is possible to do this same thing with 3-4 elements. If you see the picture below there is a text block, a picture block, a button block, and a space block to offset the image. Is there a way to have this displayed exactly like this on mobile? the url is https://creativebelievers.com/staymotivated You mean make mobile layout same as, with 2 columns: left is text/button - right is image? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
chadhinsonjr Posted October 21, 2021 Author Share Posted October 21, 2021 11 hours ago, tuanphan said: You mean make mobile layout same as, with 2 columns: left is text/button - right is image? Yes exactly Link to comment
unavolta Posted October 21, 2021 Share Posted October 21, 2021 @tuanphan I am trying to do this same thing having three buttons appear side by side on mobile instead of stacked. I updated your code above with my page section ID but to no avail. Can you take a look? Thank you as always! https://tuna-avocado-cgfe.squarespace.com/test-home pw: test /* 3 buttons side by side */ @media screen and (max-width:767px) { div#page-section-6171ac076dfa283371c5eb31 .span-10>.row:nth-child(3) .col { width: calc(~"33.3333% - 20px") !important; float: center !important; margin: 10px !important; } div#page-section-6171ac076dfa283371c5eb31 .span-10>.row:nth-child(3) .col * { font-size: 12px; } div#page-section-6171ac076dfa283371c5eb31 .span-10>.row:nth-child(3) .col .button-block { padding: 0 !important; } } Link to comment
tuanphan Posted October 25, 2021 Share Posted October 25, 2021 On 10/21/2021 at 7:57 AM, chadhinsonjr said: Yes exactly Add to Design > Custom CSS @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1634777764830_13518+.row .span-6 { width: 50% !important; float: left !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
tuanphan Posted October 25, 2021 Share Posted October 25, 2021 On 10/22/2021 at 1:29 AM, unavolta said: @tuanphan I am trying to do this same thing having three buttons appear side by side on mobile instead of stacked. I updated your code above with my page section ID but to no avail. Can you take a look? Thank you as always! https://tuna-avocado-cgfe.squarespace.com/test-home pw: test /* 3 buttons side by side */ @media screen and (max-width:767px) { div#page-section-6171ac076dfa283371c5eb31 .span-10>.row:nth-child(3) .col { width: calc(~"33.3333% - 20px") !important; float: center !important; margin: 10px !important; } div#page-section-6171ac076dfa283371c5eb31 .span-10>.row:nth-child(3) .col * { font-size: 12px; } div#page-section-6171ac076dfa283371c5eb31 .span-10>.row:nth-child(3) .col .button-block { padding: 0 !important; } } Add to Design > Custom CSS /* Mobile-Buttons side by side */ @media screen and (max-width:767px) { div#block-9c340f7969e60c1fbf6c+.row>.span-2 { width: 33.3333% !important; float: left !important; } div#block-9c340f7969e60c1fbf6c+.row>.span-10 { width: 66.6667% !important; float: left !important; } div#block-9c340f7969e60c1fbf6c+.row>.span-10>.row>.col { width: 50% !important; float: left !important; } div#block-9c340f7969e60c1fbf6c+.row .button-block a { padding: 10px 15px; } div#block-9c340f7969e60c1fbf6c+.row .button-block { padding: 0 !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment