Switching from RSD to SD3 - Page 3 -...

User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Could you please explain a bit fiurther? Those elements 10 and 11, are they in the same row as the other 1 - 9 ones, or a separate row? Are they to be centered in the mkiddle of all the rest of the items? Are we talking about horizontal centering, vertilcal, or both?
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 2881638 Photo


Registered User
29 posts

Hi Inger,

https://www.w3schools.com/css/css3_flexbox.asp

In the example of 12 items in the container there are four rows of three items each.

If I remove the 12th item the final row is left aligned with items 10 and 11. I want these to be be centred aligned on the row.

If the number of items in a rowchanges say from three to five by going to a wider screen then just the 11th item will be orphaned on its own row and centred. The 10th item forms part of the second row.

Thank you

Julian
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Like this?
Attachments:
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 2881638 Photo


Registered User
29 posts

Hi Inger,

Sorry I haven't responded to you before today. Have just opened it. Yes that is what I am after. Thank you very much.

Now for the tricky bit: understanding what you have done! Wish me luck.

Julian
User 2881638 Photo


Registered User
29 posts

For Container-1 is it

Flex
Row
Wrap
Flex Start
Flex Start
Center

for all Breakpoints?

User 2881638 Photo


Registered User
29 posts

The next thing is the pictures (picture-1) are all

Block
10 10 10 10
User 2881638 Photo


Registered User
29 posts

So what determines that the full screen width is used?
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Yes, that is right.

Edit: What I replied to here was your question about the settings for the container-1. Haven't checked the other questions yet...
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

The pictures are displayed Block, yes. The padding - or margin - can be anything you want, I just added some so that there is a bit of space between the boxes (images).

At the moment there is nothing that limits the width of the container-1 or the body. So if the screen is wide enough, the boxes will all display in just one row. If you want a certain max number of boxes displayed in one and the same row, you need to set a max-width on the container, the body or both.
Ha en riktig god dag!
Inger, Norway

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



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.