Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Text position in Text Block

Featured Lock Resolved Task
Hi.
I want build a simple page with sppagebuilder that will display some images and their description.
I will have 2 columns in a row. At the left will be the image and at the right will be the description.
I would like to have the text at the bottom left. So in the webpage could see the image and the description at the bottom right corner of the image.
How could I place the text there (if it is possible)
Thank you.

13 Answers

Pavel

More than a month ago #Permalink
Set the image addon margin bottom 0.
Add a class for text addon.
http://dl3.joxi.net/drive/2019/03/22/0008/0401/545169/69/f7d8b8e095.jpg
Use the following code:

.my-text {
position: absolute;
bottom: 0;
}

Result you will see in live view.
http://dl4.joxi.net/drive/2019/03/22/0008/0401/545169/69/e240d04876.jpg
In the editor it will not look right. But do not be afraid of this
http://dl4.joxi.net/drive/2019/03/22/0008/0401/545169/69/31e23a73fe.jpg

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
almost all is possible.
First, check Image Layout addon

Christos

More than a month ago #Permalink
Thanks for the answer.
I tried Image Layout addon but I didn;t get what I want.

See the attached file to understand what I need.
I do it right now using to columns and at the Text Block have left alignment and margin-top depending on the image height. But when I resize the page and the image changes its height, obviously the text lose its formation.

With Image Layout only the 6th layout has an option for vertical alignment but the bottom is the bottom of the frame not of the image. If I place the text using margins then I have the resizing problem.
And of course I cannot change the size of the image. As you see at the attached image I would like to have about 60% for image and 40% for text.

In Text Block would be great if I could se vertical alignment bottom and horizontal left. I think it could work.

Christos

Attachments (1)

  • image-layout.jpg
    image-layout.jpg 68.8 KB

Paul Frankowski - Staff

More than a month ago #Permalink
Maybe use the easiest way...
single Row with Text addon and put image inside text
---
JCE editor may help you align image.

Christos

More than a month ago #Permalink
And how you could place the text at bottom left?

Paul Frankowski - Staff

More than a month ago #Permalink
There are many ways to reach that goal. It all depends of your webmaster skills.
tip:
https://css-tricks.com/almanac/properties/v/vertical-align/

Christos

More than a month ago #Permalink
Paul I know all these css tricks.
But I cannot use them with sppagebuilder's text block.
This was my first question.
Do you know how could I place the text at the bottom left;
And stay there in desktop view and in any resolution.

Paul Frankowski - Staff

More than a month ago #Permalink
Raw HTML addon,
it's so not so easy.
----
In theory you set can a different top margin for desktop, tablet and mobile.. but it's not a ideal solution.

Sorry, Friday evening ,after whole hard week I do not think clear to help more.

Christos

More than a month ago #Permalink
I already did this.
It doesnt work.
Because in desktop mode the image resizes for example from 1920 to 990 and then its height changes. So, margin-top dont work.
For me too its Friday evening and I am working tomorrow too.
Anyway if you or someone else could propose a workable solution it will be usefull.
Thanks.

Paul Frankowski - Staff

More than a month ago #Permalink
Ping me on Sunday.

Christos

More than a month ago #Permalink
From tomorrow evening I 'll be "out of work".
I ll be back Tuesday.
Thanks.

Christos

More than a month ago #Permalink
Hi.
Thanks.
It is much better now. Still I have to use margin-top for different views but It is workable.


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 107
Toufiq

Toufiq

Total Accepted Answers: 66
Sifat

Sifat

Total Accepted Answers: 47
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 21
Rashida Rahman

Rashida Rahman

Total Accepted Answers: 17

118

Templates

305701

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us