Protostar fluid with images & text wrap help requested

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Post Reply
bulgin
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 154
Joined: Sun Sep 30, 2007 10:18 pm

Protostar fluid with images & text wrap help requested

Post by bulgin » Tue Jun 18, 2019 5:26 pm

Hello.

Protostar template.
Joomla! 3.9.8 Stable
Template setting set to "fluid layout: static"

See attached screenshot. Customer wants text to remain aligned with right border of image without wrapping below image. When in mobile okay if all of the text shows up directly beneath photo.

Each book review is a separate document with blog style used.

I can't change the template that would require too much re-working. Any suggestions on setting a div or otherwise keeping the text even with right border of images. If suggesting template surgery, please identify the specific file (or custom if needed) and helpful hints on how to apply.

Thank you.
You do not have the required permissions to view the files attached to this post.

bulgin
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 154
Joined: Sun Sep 30, 2007 10:18 pm

Re: Protostar fluid with images & text wrap help requested

Post by bulgin » Wed Jun 19, 2019 1:29 pm

A partial fix is to use tables, but tables do not wrap properly in some browsers (Chrome). Is there a way to make tables more flexible so their width changes dimensions with different screens?

gws
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3808
Joined: Tue Aug 23, 2005 1:56 pm
Location: South coast, UK
Contact:

Re: Protostar fluid with images & text wrap help requested

Post by gws » Wed Jun 19, 2019 1:36 pm

use a % for width not fixed size. i.e. width = "80%"

bulgin
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 154
Joined: Sun Sep 30, 2007 10:18 pm

Re: Protostar fluid with images & text wrap help requested

Post by bulgin » Wed Jun 19, 2019 2:22 pm

Now I've used 25% for the left-most column with the image and 75% for the text area in the two-column table, yet when I resize the screen the text flows over the right-most boundary of the webpage as seen in the attached screenshot. This only happens in Chrome and not firefox. It may happen in Safari, I don't know. In Firefox I never had to use % tables - things just automatically flexed and wrapped.

What setting am I missing here?

Thank you.
You do not have the required permissions to view the files attached to this post.

bulgin
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 154
Joined: Sun Sep 30, 2007 10:18 pm

Re: Protostar fluid with images & text wrap help requested

Post by bulgin » Wed Jun 19, 2019 2:25 pm

SOLVED:
Had to put 100% in the "table" setting for the entire table, and 25% for left column and 75% for right column.

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 25756
Joined: Mon Oct 27, 2008 9:27 pm
Location: Akershus, Norway

Re: Protostar fluid with images & text wrap help requested

Post by Per Yngve Berg » Wed Jun 19, 2019 6:38 pm

Better to use a div element with a Bootstrap spanX class.

https://getbootstrap.com/2.3.2/scaffold ... gridSystem

bulgin
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 154
Joined: Sun Sep 30, 2007 10:18 pm

Re: Protostar fluid with images & text wrap help requested

Post by bulgin » Wed Jun 19, 2019 6:43 pm

Thank you Per Yngve - I actually did see that before but as with many technical papers, they only show you the code with very little explanation beyond that. Like where, for example, does this code go? In the source of the actual joomla document? Is it placed in the index.php? How about css? I love the power of Joomla, getting *thorough* step-by-step solutions on certain issues is difficult. A good example beginning to end on that technical paper would have been helpful. At least I couldn't find it.

Thanks for pointing me in the right direction, though. I know it's a better solution and would love to implement. Just need a bit of hand-holding on some of the code.

User avatar
Per Yngve Berg
Joomla! Master
Joomla! Master
Posts: 25756
Joined: Mon Oct 27, 2008 9:27 pm
Location: Akershus, Norway

Re: Protostar fluid with images & text wrap help requested

Post by Per Yngve Berg » Thu Jun 20, 2019 4:41 pm

It can go inside the article.

Code: Select all

<img /> <div class="span8" > Your text </div>
span8 is 8/12 of the column width.

You don't say what layout this is (single article or blog)

If you set the Intro image and Full image, you can make an override of the layout that makes this for all articles.
https://docs.joomla.org/Layout_Override ... ve_Layouts

bulgin
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 154
Joined: Sun Sep 30, 2007 10:18 pm

Re: Protostar fluid with images & text wrap help requested

Post by bulgin » Thu Jun 20, 2019 4:55 pm

Thank you soooo much for that Per Yngve! That is immensely helpful. Blog posting by the way. :p


Post Reply

Return to “Templates for Joomla! 3.x”