Hello again.

Well, with previous help I am really getting somewhere but another issue popped up.

I have 4 columns, each 3 spans in the row.
Picture, heading and paragraph below each other

Looks great too. I set breakpoints for smaller screens, everything works fine. But!

I added text to the first paragraph and you already guess it. When sliding the screen to smaller sizes it works well, changing to 2 columns below each other.

But the text of the first paragraph is longer and therefore a columns below is pushed aside

Should I use containers? I have to use the flexbox option probably and look at the wrap/shrink whatever. I read the tutorial provided but I don't understand

How can I keep the alignment right?

Thanks for suggestions

We have to see this to be able to assist you. Could you perhaps zip up your project file and attach it here? If the zipped file is too big, maybe you can pop it in your drop box or upload it to some place and let us have the URL.

Hi From Sunny Bali

I would have put containers in a column

I would have set the position display for the column to ROW
Then Justify = Space Around
Then Items = Stretch

The containers set to flex display = Column
Justify = Flex start
Adjust other settings as you please (probably center)

That should keep the containers in line and not jump about

When you get to the lower breakpoints you set the column from ROW to Column and adjust the width of the container accordingly

Scratch previous post of mine,,, have done it a different way,,, am making another video as example,, keep looking in

Here is the link to thew video in Dropbox

https://www.dropbox.com/s/v9xxncko51nb2x0/columns-flexing.zip?dl=0

I am going to check the zip in the file (downloading now). Have to find out how to get the ..rsd but here the screenshots

large: everything OK
http://www.runpower.nl/rommel/screen_large.jpg

smaller: everything OK
http://www.runpower.nl/rommel/screen_2.jpg

goes wrong here because of the text in the first paragraph
http://www.runpower.nl/rommel/screen_3.jpg

As you can see because of the 3 lines of the text in the first paragraph it goes wrong. I want the image (all same size) and the paragrpah below to be the same size nevertheless the amount of text

Solved by a container and flexbox or something different?

zip still loading....

@ Wayan: WOWWWW thanks sooo much for your video :-) It was really fun to watch and soooo what I wanted. As you can see in the above images that is exactly what went wrong. To answer your first question on the video: no earthquakes here either :-) Great sunny but cold weather :-) I have no idea ow you make those videos but I really appreciate it.

OK, I will watch it again and write everything down as to be able to try it myself. One question: can I add a container around the columns i already have or should I simply start over again with the columns etc? Or can I add the 4 containers to the column and drag the elements that I already have there to the containers?

I am going to watch it again :-)

Aaaah look, better already. You are a good teacher :-)

But I still have something... how can I get the light brown paragraphs equal in size? The images align great now on all screen sizes. But as you can see the first paragraph is longer in text and also longer in color.

Is it possible to change that too?

http://www.runpower.nl/rommel/screen_4.jpg

Wayan, I've been following this and also have watched your video. Good stuff!
I wonder about one thing: I'm usually starting from small screens going up. I have tried to achieve something similar to your video starting from 'the other end', but I'm not succeeding. Do you care to make a video for me (and others who may wonder), showing the steps for 'mobile first'?
Also, I can't manage to put two containers into the same column, that is, resizing the container without also resizing the column.

Apply the background colour to the container not the paragraph, it won't make the paragraphs the same size that would make the word spacing too far apart, but the brown background colour should be the same length, sorry I should have perhaps shown that working example also