L1NST3R Posted November 19, 2021 Share Posted November 19, 2021 Site URL: https://www.tgtfresh.com/seafood-form/ Hi, I've got a form with quite a long list of radio options, and was wondering if there's a way to make it show in 3~4 columns, thanks. to add Link to comment
creedon Posted November 19, 2021 Share Posted November 19, 2021 The following thread may be of interest to you. It doesn't have a specific solution for your problem but more of a general direction. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
Solution creedon Posted November 19, 2021 Solution Share Posted November 19, 2021 (edited) Add the following to Page Settings > Advanced > Page Header Code Injection for the page. <style> /* begin Seafood Products 3 columns */ @media screen and ( min-width : 768px ) { #checkbox-64ad2335-0c41-4a3e-90b3-7fcda2211d12 { display : grid; gap : 1em; grid-template-columns : repeat( 3, 1fr ); padding-top : 4em; } #checkbox-64ad2335-0c41-4a3e-90b3-7fcda2211d12 .description, #checkbox-64ad2335-0c41-4a3e-90b3-7fcda2211d12 .title { position : absolute; } #checkbox-64ad2335-0c41-4a3e-90b3-7fcda2211d12 .description { top : 2em; } } /* end Seafood Products 3 columns */ </style> This is for v7.1 and specific to the poster's need. Let us know how it goes. Edited November 19, 2021 by creedon version 2 tuanphan 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
L1NST3R Posted November 19, 2021 Author Share Posted November 19, 2021 1 hour ago, creedon said: Add the following to Page Settings > Advanced > Page Header Code Injection for the page. <style> /* begin Seafood Products 3 columns */ #checkbox-64ad2335-0c41-4a3e-90b3-7fcda2211d12 { display : grid; gap : 1em; grid-template-columns : repeat( 3, 1fr ); padding-top : 4em; } #checkbox-64ad2335-0c41-4a3e-90b3-7fcda2211d12 .description, #checkbox-64ad2335-0c41-4a3e-90b3-7fcda2211d12 .title { position : absolute; } #checkbox-64ad2335-0c41-4a3e-90b3-7fcda2211d12 .description { top : 2em; } /* end Seafood Products 3 columns */ </style> This is for v7.1 and specific to the poster's need. Let us know how it goes. @creedonIt worked, thanks! However, on mobile it doesn't really fit to have 3 columns. Is there a way to make this only apply to desktop view? creedon 1 Link to comment
creedon Posted November 19, 2021 Share Posted November 19, 2021 Quote Is there a way to make this only apply to desktop view? I have updated my code post. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
L1NST3R Posted November 19, 2021 Author Share Posted November 19, 2021 5 hours ago, creedon said: I have updated my code post. Let us know how it goes. Thank you so much for helping me with this! It works exactly as I wanted now! creedon 1 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