Is there an easy way to create nested divs in Cornerstone?

I would like to use Pro for my web site but have hand-coded a large section of my site.

Right now, I’m copying and pasting a large block of HTML into the raw code element. This works but it also renders Pro irrelevant as it’s just a holder for my HTML.

I was intending to redesign the block of HTML using Pro but realize that my HTML used nested divs.

Is it possible to add nested divs into Cornerstone or am I best just to use the raw code element to do this?

This is an automated message to notify you that your thread was posted in the wrong forum, and it has been moved to the correct place. A member of our team will be happy to reply just as soon as your thread is up. How support works.

For support, please post all questions in the Support Forum.

For peer to peer conversations with other Themeco customers about tips, customizations, or suggestions you are welcome to use the Peer to Peer Forum (no official support provided here).

Design & Development, Marketing & Media, and Hosting & Optimization are for discussion with fellow Apex members about non Themeco related topics. Please keep this in mind in the future.

Thank-you!

Anyone have any experiences with this that can provide help?

Hi Christian,

What is the purpose of nested div? In Cornerstone, Section, ROW and Columns are created using div html tag. If you will inspect the code on frontend, you can see it as nested div. To avoid confusion, let’s just talk in terms of aesthetic or design you want to achieve. We can have multiple section. Each section has default 1 row but we can add more row. Each ROW can have 1 or more columns. So regarding your question, yes cornerstone structure is by default created using nested div tag.

Hi Lely:

Thanks for the reply.

I want a bit more control over the aesthetic. I know that I can create sections > rows > columns (and I recognize these are just divs with classes assigned to them). But I was under the impression that there were certain styling limits with those that I couldn’t get around. Perhaps I’m wrong though (I hope so).

For example, a big issue for me is I often want to nest my Flexboxes. I have a section that consists of two columns (Column A and Column B) and I want that Flexbox set up as Flex-direction: row. (So Column A is to the left of Column B). However, inside Column B, I want another Flexbox that is set up with Flex-Direction: Column so I can have a series of icons on top of each other. As far as I can tell, I can’t do this without resorting to raw code in the Column B for the second Flexbox. This is what I’ve been doing thus far but it’s kind of a nuisance.

Similarly, I find the column settings a bit too restrictive. Unless i"m mistaken, I can only create up to 6 columns and there are certain setups which are not possible (for example, if I wanted column A = 70% and column B = 30%, i don’t believe this is possible. I believe the closet I could get would be 2/3 + 1/3, which is close but not quite where I want it to be).

Hi Lely:

Just an additional note, I can you a screenshot of something I’m trying to do with Pro that I’m having to hardcode. But if you could clarify how I can send an image so it is not public, that would be appreciated.

Hi there,

You’re only limited to predefined column sizes and count, and you can’t nest them. But yes, still doable if you’ll do custom CSS but it will not be recognized as builder’s structure, but rather just content (eg. structure within text content). And yes, there is some kind of restriction added so it can’t be nested or add more columns.

I’m not saying it’s impossible, but it’s a bit complex and requires custom coding and that something we can’t cover. You may want to consult it to a developer. Plus, you also need to deal with break points and other responsive setups to make it work on all devices.

Thanks for understanding.