So Inger
Where are you - Help !

I will take a look today when I get my coffee breaks, am a bit tied up with a new restaurant project at the moment.

I have also to mention that doing a read more with CSS is possible, using some JavaScript or jQuerie is actually more smooth actions which results in a better users experience, I will however also do something to showcase later today (I can have as many coffee breaks as I want ???? because I'm the boss ????

Hi I don't quite understand what you mean

I took a quick look-see and on all my browsers (including the now-defunct IE11 it looked OK to me


https://youtu.be/NC5cxGRgg40

UPDATE

AHHH I SEE Now

You need do the widths of the colunms at the lower breakpoints


You are using the 4 columns thingy (CSS) which after the first default breakpoint need their widths altering to whatever width you feel looks ok, thereafter you will have to add breakpoints as & when you need (which could be a few) (which is why I always say use the other foundation cols unless you know how to position the CSS ones
You should always work from the left and work upwards (have said that many times in my tutorials

There is another showing it from within site designer with the cols adjusted

https://youtu.be/NC5cxGRgg40

Wayan I think my problem with the "read more" button has another reason - the 3 dots text link takes a full line (width auto" or width 20px - as long as I click to open - after the opening it is in row...
hope the attached png files show the problem

Well Michael you are going to have to send me your project file,, because mine after the adjustments to the cols isn't a bit like that

https://youtu.be/Z9BRtMGro6I

here it is

Found a solution - but not as clean as yours - when I give a new order to the container followings in the inspector it will work better
instead of "more-less-hollder" > Text > Text Link > Text > button
I can say "more-less-hollder" > Text > button > Text Link > Text
... can take that but yours is better....

Well, I'm here, but I'm not ALWAYS at my computer. It happens that I have other commitments too. I don't know if you have got all the help you need from Wayan, or if you still need me, but you can find a component consisting of two such read-more/less thingies here: https://www.dropbox.com/s/mbpeocg5mrvzs … onent?dl=0 I haven't got them into the component shop yet, but I will.
In order to make a component of it, I had to wrap them into another parent container, '.more-less-all'. You can take the individual more/less units out of that parent wrapper and place them on your page, like I see you have already done. And if you need a third unit, replace the number 2 by 3 on all elements that now have a 2. And so on...

As far as getting the dots and the button on one line, make them display inline. If the text is also displayed inline, the dots and button will appear on the same line as to where the text ends, provided that the line has space enough for that. If you want to have dots and button below the text, make the text display block.

Thank you Inger - that's it - now I'm perfectly done.
Your new version however didn't work for me - in preview the drop down button stays passive.