Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1326719

    slavaspb
    Participant

    Hi,

    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).

    Thanks,
    Slava

    Attachments:
    You must be logged in to view attached files.
    #1326818

    Nico
    Moderator

    Hi There,

    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.

    #1326837

    slavaspb
    Participant

    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.
    #1326863

    Lely
    Moderator

    Hello There,

    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.

    #1326927

    slavaspb
    Participant

    This is why I love this forum. Thanks Lely, this worked perfectly!

    #1326989

    Rad
    Moderator

    You’re welcome!