Multi Column Container Elements

User 2839984 Photo


Registered User
52 posts

I am really battling the transition from RSD Coffeegrinder to SD3.5. Having difficulty lining up and positioning containers within containers. Rows and columns were so much easier to work with.

I like the new feature that allows you to select a container that has 2, 3 or 4 columns. By default they are all the same size.

What I cannot figure out is how to have them different sizes. If I select one of the child containers and change it to say, 25% it resizes to 25% of it's current size and not 25% of the parent. Because I am looking for 75/25. If I size it to 125% it overlaps the container next to it.

If I do it manually, insert 2 children into one parent container then it works as it should, I can set percentages and I'm good to go.

What am I doing wrong?

Bruce
Just another day designing websites for money... it's all good!
User 2699991 Photo


Registered User
5,391 posts
Online Now

It is understandable the confusion, you are not alone.
The clue is in the name "Column"

Those pre set 2 , 3, 4 columns are for the GRID, and therefore you need do the settings in the grid part thingy,
or
you change them from the GRID to Flex, or block or inline whichever your preference, then you can adjust the widths as you please.

But then again much easier to just insert a container as a parent & then 2 more as child set the widths etc of the children, accordingly, & the settings on the parent, to display them as you prefer.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2839984 Photo


Registered User
52 posts

Thanks for the heads up. I think you are right, it's easier to do it manually!
Just another day designing websites for money... it's all good!
User 2839984 Photo


Registered User
52 posts

I have another question. Is there an easy way to put two children into one parent container? I struggle and then get the children inside each other, and it's trial and error, delete start over until I finally almost by accident get them right. Dragging and dropping seems almost impossible to see where the container is going.

Maybe I'm just dense! But the first container is fine. The first container in that container fills it up and then I struggle to drop the second and third into the parent next to the 1st child.
Just another day designing websites for money... it's all good!
User 122279 Photo


Senior Advisor
14,646 posts
Online Now

Do it in the elements pane. There you will see where your 'kids' are, and you can move them all into the same container. First you move one up to the parents' class name, so that it goes inside. Then you put the next one above the first child you moved. That is easier than trying to fit it in below. When you have got all the children into the same 'family', you might need to correct the sequence. It is always easier to move an element up, rather than down.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
5,391 posts
Online Now

Bruce Longman wrote:
I have another question. Is there an easy way to put two children into one parent container? I struggle and then get the children inside each other, and it's trial and error, delete start over until I finally almost by accident get them right. Dragging and dropping seems almost impossible to see where the container is going.

Maybe I'm just dense! But the first container is fine. The first container in that container fills it up and then I struggle to drop the second and third into the parent next to the 1st child.


Ingers way is good, there is another way & that is using Xray mode in the guides tab

a short video using xray mode

https://youtu.be/rpgaBHXrjHI
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2839984 Photo


Registered User
52 posts

Actually, that is pretty AWESOME!
Just another day designing websites for money... it's all good!
User 2699991 Photo


Registered User
5,391 posts
Online Now

Bruce Longman wrote:
Actually, that is pretty AWESOME!

another video using the elements thingy
https://youtu.be/FgxzqVJasaI
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2699991 Photo


Registered User
5,391 posts
Online Now

Bruce Longman wrote:
Actually, that is pretty AWESOME!

there is yet another way which is pretty neat too,

https://youtu.be/rVkPZbcjjt8

Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2699991 Photo


Registered User
5,391 posts
Online Now

Bruce Longman wrote:
Actually, that is pretty AWESOME!


Finally, a way to insert a container within a container that already holds elements (either between ELEMENTS or below AN ELEMENT

https://youtu.be/XvE8rwBt9nk
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.