January 11, 2017 at 10:40 pm #1326719
First of all, huge thanks to Themeco team and community members – this forum is absolutely amazing! For someone new to web design, this is a goldmine of information.
I have a totally newbie question: how do I achieve the layout in the picture attached? Is it possible via Cornerstone, or should I use tables or maybe grids? I’ve played with different options, but couldn’t figure it out myself. I do need the borders around the whole thing. Ideally, it should also be responsive (the second column should go underneath the first one on smaller screens).
Attachments:You must be logged in to view attached files.January 12, 2017 at 12:24 am #1326818
Thanks for writing in.
Yes it is possible with cornerstone stone. Play with the columns within the section.
Feel free to let us know how it goes.
Thanks.January 12, 2017 at 12:48 am #1326837
Hi Nico. Thanks for coming back to me, but I think I didn’t explain my idea clearly enough.
I add a section in Cornerstone and split it into 2 columns (step 1). But then I want to split the right column in half horizontally (step 2) and after that split the resulting bottom part in half again, this time vertically (step 3), as you can see in the picture. And I need each and every resulting block to have borders around it. Is it possible in Cornerstone?
I’ve managed to use [columns] shortcode in the right column to achieve sort of what I want, but I still can’t figure out how to add borders around each block.
I feel I’m missing something very simple and obvious here. 🙂
Sorry my site is not yet available, so I can’t post the URL, if that’s needed.
Attachments:You must be logged in to view attached files.January 12, 2017 at 1:39 am #1326863
Yes, columns shortcode is needed to achieve the columns on the lower right column. To achieve the same border, inspect row and then set Marginless Columns to OFF
On the main left column’s style field add this:
border: 1px solid #000000;
On the main right column’s style field, add this:
border: 1px solid #000000; border-left-width:0;
Then on your column shortcode for left column add this:
style="border: 1px solid #000000; border-left-width:0; border-bottom-width:0;"
Then on your column shortcode for right column add this:
style="border-top: 1px solid #000000;"
Hope this helps.
January 12, 2017 at 3:14 am #1326927
- This reply was modified 3 months, 1 week ago by Lely.
This is why I love this forum. Thanks Lely, this worked perfectly!January 12, 2017 at 4:14 am #1326989