Howto : Create 2 cols unordered image...

User 131545 Photo


Registered User
687 posts

Hi all,

I want created this kind of unordered list in my project "dientsten"
On all the screens (PC, tablet, smartphone (big/small screen) corrected aligned
How can I do this.
Can you this explean in steps in text

By the way thanks for the previous posts here
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
14,447 posts
Online Now

You start with one row with one full-width column.
Then pop a container div into it.
Open the design pane, scroll down to where is says Multi-column-layout
Set Count to 2 (adjust the 'auto' to 'no. unit' first)
If you want, you can leave the Gap as it is, or change it to % and add a %-age, like e.g. 2%.
Go back to the content tab and pop in a list container.
In those containers insert the image and text paragraph.
Duplicate as many times as needed.

This will give you a two-column layout all the way from small screen to large.
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 122279 Photo


Senior Advisor
14,447 posts
Online Now

If, however, you want a layout that starts with just one column and then moves into 2 at a wider screen, then start as above, and when you get to the multi-column-layout, then set the count to 1.
Then move the slider up past the first breakpoint and change the count to 2.
You can change it again to 3, 4 or whatever after the next breakpoint(s).
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
4,782 posts
Online Now

STEFKE wrote:
Hi all,

I want created this kind of unordered list in my project "dientsten"
On all the screens (PC, tablet, smartphone (big/small screen) corrected aligned
How can I do this.
Can you this explean in steps in text

By the way thanks for the previous posts here
Kind regards
Stephane


READ THIS
http://bootstrap.coffeecup.com/guides/bb-guide/index.html
even though it is made for bootsrtap builder it is same principle and methods for Foundation Framer there is a section that explains all about multi columns
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
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 131545 Photo


Registered User
687 posts

Inger,

When I created the list container and then put the image en then paragraph it's not corrected aligned in the correct columns here what wrong here?
Can you give me the corrected one for 2 columns layout with the unordered image list with text
This is my project.
Kind regards
Stephane
https://www.dropbox.com/s/64jq63uod5y93 … 0.rff?dl=0
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
14,447 posts
Online Now

Wait until Friday, I'm not at home right now. But check the project I put online, http://focaholidays.com/stefke. Yesterday I added the RCS slider with the car images, and I also made the page Diensten, in the way I thought you wanted.

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 122279 Photo


Senior Advisor
14,447 posts
Online Now

I've had a look at your project Stefke, and I have some questions. It would be good if you could reply to them so that I know the answers when I get home tomorrow.

1. That checkmark image, is it to appear once or twice in each container?
2. Do you want two columns also for small screens, or should I start with one and then change to two after the first (or second) breakpoint?
3. Is this the design for the index page, or for one of the other pages?
4. If for the index page, will you be using the three columns with text on another page, or should I just delete it?
5. At first you had the Dutch flag up in the header, now I see the Union Jack. Which one is correct?
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 131545 Photo


Registered User
687 posts

Dag Inger;

Answer your questions:

1) It should appear only once in each container but among each other so in two columns for the pc and tablet. For smartphone is one column would be best

2) What's best plays for small screens is one column but the alignment should not be distorted so no other positions of the image and text that suddenly shift. For the pc and tablet 2 columns and smartphone 1 column seems best

3) This is the design for the index.html page

4) You can delete the 3 columns with text

5) The UK flag I linked then to the englisch version of the page

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
14,447 posts
Online Now

OK. As to the flags, maybe you ought to have both flags up, so that you can toggle between the two versions? Just an idea.
(I have my laptop here where I am now, but I can't concentrate on working when among other people)
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 131545 Photo


Registered User
687 posts

Yes that a good idea.
Can you implement this the two flags

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

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.