How to position containes into...

User 131545 Photo


Registered User
595 posts
Online Now

Hi all,

Can you explean in steps how I can with my example (attachtment) to positioning containers responsive into cols?
I try it but all containers stacked in one line.
Thanks for your help
Attachments:
Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
User 2699991 Photo


Registered User
2,327 posts
Online Now

stefke
which one do you want do this for Foundation framer of RSD because very different way
The Help You Need: When You Need It The Most
User 131545 Photo


Registered User
595 posts
Online Now

For the foundation Framer Wayan But can you post the screenshot in jpg with the steps.
Thanks
Stephane
Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
User 122279 Photo


Senior Advisor
12,284 posts
Online Now

Stefke, the Foundation framer creates 'mobile first' layouts, so you need to start from small and move to larger.
On a phone screen you may want to have all the containers displayed one below the other, and then as you widen your viewport, reduce the spans so that the containers pop into place the way you want them.

I have created a wee layout according to your drawing. First I placed the slider to the left of the smallest breakpoint and made two rows, the first one with 5 columns and the second one with 3. All those columns I made cover 12 spans. I popped a container into each.
Then I moved the slider up to the right of the first breakpoint and gave each column the size I meant to be able to read out of your drawing. A container follows the size of the column it is sitting in, but you can give it some margin so that they don't stick into each other. I just kept the default margin. Hope it helps.
Attachments:
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: http://www.eikweb.com/sharing/


User 2699991 Photo


Registered User
2,327 posts
Online Now

STEFKE wrote:
For the foundation Framer Wayan But can you post the screenshot in jpg with the steps.
Thanks
Stephane


I did example for you in RSD also because you also posted there the same question.

The Help You Need: When You Need It The Most
User 131545 Photo


Registered User
595 posts
Online Now

Hi, Wayan Jaya
I need it in both. Can you describe the steps agreed in video but I manage not to position the containers in the columns. Can not move them.
Thanks
Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
User 122279 Photo


Senior Advisor
12,284 posts
Online Now

Stefke, as I wrote above here, a container fills the column it is sitting in, so you can't put more than one container in a column. What you have to do is split a row into the number of columns you need and then, if containers are necessary, add one into each column.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: http://www.eikweb.com/sharing/


User 131545 Photo


Registered User
595 posts
Online Now

Hi,

How can I do that with my demo here "howto_position_containers_in_cols"
First row divided into tree cols
Second row divided into second cols
Thirth row divided into two cols
Fourth row divided into one col

And then implement the containers?
or can I place into a Col a subgrid and into the subgrid col containers?

Kind regards
Stephane
Toekomstgerichte door ICT gebeten IT'er
Stephane Fonteyne
Ba. Elektronica - ICT
Application Software PowerBasic Developer
e-mail : stephane.fonteyne@telenet.be
gmail : stephane760126@gmail.com
linkin : in : <http://www.linkedin.com/pub/stephane-fonteyn/53/402/204>
twitter : @Stefke36
User 122279 Photo


Senior Advisor
12,284 posts
Online Now

Did you mean to post a link to a demo? I see no such link.

STEFKE wrote:

First row divided into tree cols
Second row divided into second cols
Thirth row divided into two cols
Fourth row divided into one col

You can divide it up like that, yes. Did you take a look at the suggestion I posted yesterday? It is done not quite the same way, but fairly similar.

STEFKE wrote:

And then implement the containers?
or can I place into a Col a subgrid and into the subgrid col containers?


A good principle is not to have too many things inside each other, like a div in a div in a div... Try not to use both containers and subgrids together. For many types of content just the column is enough, for images, text, lists for example. If you need to add a form, a slide show or a video I'd use a container. Subgrids are handy if you need to split a row or column vertically.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: http://www.eikweb.com/sharing/


User 2699991 Photo


Registered User
2,327 posts
Online Now

STEFKE wrote:
Hi,

How can I do that with my demo here "howto_position_containers_in_cols"
First row divided into tree cols
Second row divided into second cols
Thirth row divided into two cols
Fourth row divided into one col

And then implement the containers?
or can I place into a Col a subgrid and into the subgrid col containers?

Kind regards
Stephane


Stephane

You can place a container into a column directly, but I am not sure why you would want to anyway

Just follow the directions both Inger (for FF) & Myself (for RSD) have shown you,, it's fairly clear & straightforward

In my example is simply
1 row with 4 columns set to 12 spans each,
each column set to
position = flex
direction = row
justify = space between for the first 3 columns then the last one set justify = center.

then in each column you place the containers and set them to whatever width value you want to give you the layout you want

Inger's solution also works the same except that he uses 4 rows for each different section but the end result is still the same

My image showing the layout and the settings should be easy to understand even for a newby into web-design I have even given you some % values for what I think the containers need to be.
The Help You Need: When You Need It The Most

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.