-
Posts
-
Hello,
I’m working of a Cornerstone page that will have a large hero image section with a grid of buttons on top. The buttons are in three rows with 4 columns — 1/2 + 1/6 + 1/6 + 1/6. The buttons are sized to 125pxx125px the section, row and columns all have 0 padding and margin. The rows have a padding-right of 20px. I’ve given the columns a width of 125px but when I inspect it the browser the columns are 164px wide. I have marginless columns on and column container off. If I turn marninless columns off, they are sized correct with no padding. This seems to cause them to not be centered by default on mobile. If I remove the width from the column styles The 1/6 columns are unequally spaced but stack centered on mobile.
I’m trying to have a equally sized and spaced grid of 9 buttons that will be responsive. I know HTML/CSS/JS and am comfortable writing custom styles, but I’d like to try to use the baked in styles as much as possible to save on time.
Am I approaching this in the wrong way or missing something in CS?
Hello There,
Thanks for writing in! I’ve created a test page and please check it out if this works out for you. You can check it here: http://ehsdit.staging.wpengine.com/an-x-text/
If still this doesn’t work, please try the block grid element in Cornerstone. https://community.theme.co/kb/shortcode-walkthrough-block-grid/
Please let us know how it goes.
That doesn’t seem to answer my question. The test page you created is only spaced correctly on desktop and ends up having unequal stacking when on mobile. The blockgrid seems to only work for text. In order to add a button I would need to enter all buttons as code. I’m trying to set this up in a way that someone not savy in code could update.
Is the best way to do what I’m trying to create to just create a <div> and hand-code it?
Hi There,
I see you’re adding a class man to the first 1/6 Columns but not on the second. Please apply that class equally to the columns so will have equal spacing. No need for the class man on the third columns as those have no margins on the right.
To resolve the spacing issue of the buttons on mobile, please add this class on your 1/2 columns.
cs-hide-sm cs-hide-xsHope it helps, Cheers!
- <script> jQuery(function($){ $("#no-reply-1279257 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>
