Small-screen file list title display

[JAVesey]

Good evening,

I have another question (sorry!) that I hope someone could help me with...

On a small screen, e.g. phones in portrait format, File Lists with longer file titles do not display quite right. The text of the file's title wraps okay but the icon and title of the file below it in the list doesn't move to accommodate wrapped text. The title of the uppermost file overlaps the one below it. See screenshot below:

https://imgur.com/3pCxvXV

Is there a setting that I've missed, or maybe a style/code I can add to user.css to improve the display?

All ideas gratefully received.

John V
Joomla 4.3.4, PD 4.0.6, PHP 8.1.22

[christine]

Hi,

To be able to say more, it would be advantageous to see or examine the site live. e.g. line height, template, media queries etc.

Kind regards
Christine

[JAVesey]

Cassiopeia template, PHP8.1.22, J4.3.4, PD4.0.6

https://www.llanmon.org.uk

There’s an example on the homepage in the module at the bottom 👍

Many thanks

John V

[christine]

Hi JohnV,

Not that easy, also because my mouse is broken

I think the problem is with: Articles Anywhere.

Try this:
a) temporarily to another position. bottom-a or bottom-b

b) or with this code in the user.css

Code: Select all

.pd-document32 {
height: 40px !important;
line-height: 20px !important;   
}

Kind regards
Christine

[christine]

Hi JohnV,

Try following:

Code: Select all

@media only screen and (max-width:600px) {
.pd-document32 {
height: 100px !important;
line-height: 20px !important; 
}}

Kind regards
Christine

[JAVesey]

Hello Christine,

Thank you for your reply. I'm very grateful.

The Custom Module is already in the bottom-a position.

I've added the code to user.css but, unfortunately, it hasn't helped. The display is the same as without the code.

As you say, the text is displayed in the module on the homepage via Articles Anywhere but the the issue is still apparent when the source-page is displayed directly:

https://www.llanmon.org.uk/history/andrew-giles-books

I'm happy to try any other suggestions :)

Very many thanks

John V

[christine]

Hi John V,

I've added the code to user.css but, unfortunately, it hasn't helped. The display is the same as without the code.

Hmmm

Without above Code I get following result:



As you can see here, with Code I will get this result:



To be sure, I took for both the same browser width.

Did you clear Browser cache?

Kind regards
Christine

[JAVesey]

Ooops!! Silly me :(

Issue resolved - thank you :)

John V

[christine]

Thats' fine John V
Thank you for your feedback.

Kind regards
Christine