Page 1 of 1
Small-screen file list title display
Posted: 13 Sep 2023, 19:01
by 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
Re: Small-screen file list title display
Posted: 14 Sep 2023, 12:12
by 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
Re: Small-screen file list title display
Posted: 14 Sep 2023, 12:37
by 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
Re: Small-screen file list title display
Posted: 14 Sep 2023, 22:26
by 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
Re: Small-screen file list title display
Posted: 15 Sep 2023, 22:15
by 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
Re: Small-screen file list title display
Posted: 16 Sep 2023, 09:36
by 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
Re: Small-screen file list title display
Posted: 16 Sep 2023, 11:12
by christine
Hi John V,
JAVesey wrote: ↑16 Sep 2023, 09:36
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
Re: Small-screen file list title display
Posted: 16 Sep 2023, 11:35
by JAVesey
Ooops!! Silly me :(
Issue resolved - thank you :)
John V
Re: Small-screen file list title display
Posted: 16 Sep 2023, 12:07
by christine
Thats' fine John V
Thank you for your feedback.
Kind regards
Christine