Css adjustment? pd-filenamebox-bt?

[fabio42]

Hi!
After upgrading to Joomla 4, I am trying to solve a css problem concerning the length of the file name box of the files to be downloaded. Depending on the length of the name of the file, the icon "Hot" is displaced under the title. And sometimes the title is cut into two lines.
Here's an example of what it looks like depending on the title length:
https://www.4u2learn.fr/joomla/downloads/evaluation

Not being familiar with css modifications , I am calling for your help. What code do I have to modify and where should I insert the code so that after any upgrade it stays intact?
Thanks a lot!
Fabio

[Jan]

Hi, if there is no place, then the icon is moved below the text. In Joomla 4, Bootstrap model is used for rendering the HTML output, so the only way is to enlarge it with some custom CSS.

Jan

[christine]

Hi Fabio,

try with this Code into your custom.css:

Code: Select all

@media only screen and (min-width:400px) {
#phoca-dl-category-box .pd-document16, #phoca-dl-download-box .pd-document16 {
width: 150%;
}}

Kind regards
Christine

[fabio42]

Sorry Christine for being so slow about testing.
I just inserted this code into my custom.scss file into the Gantry template. And it seems it does not work... (check the same link)
What can I do then?
Thanks a lot in advance!

[christine]

Hi Fabio,

I put it in temporarily. It works, see:



custom.css: https://docs.gantry.org/gantry5/tutoria ... tyle-sheet

Kind regards
Christine

[fabio42]

Hi Christine!
I don't know what's going wrong. This is exactly what I did and it still does not want to work :


Where am I going wrong?
Thanks in advance

[christine]

Hi Fabio,

a) To comment out a CSS line: make:

/*here is text or code*/ instead of: //
Maybe it helps, if corrected.

Check this here again: https://docs.gantry.org/gantry5/tutoria ... tyle-sheet
e.g.

Once you have added this file, and put your custom CSS/SCSS within, Gantry will do one of two things. This activity is determined by the Production Mode setting. You can reach this setting by navigating to Gantry 5 Administrator > Extras. etc.

It will be re-compiled to your already existing: custom_38.css

Kind regards
Christine

[christine]

Again: Above (or any other) Code will not work, until you have NOT deleted these two lines:

//article seperator line
// phocadownload - etc. etc.

I see both on your screenshot. See info in previous post under a)
To comment a CSS line: make:

/*here is text or code*/

Kind regards
Christine

[fabio42]

Well, I did all you said and indeed, the wrong syntax must have had something to do with the issue.
Now, evertyhing works plain sailing!!!
So many thanks for your help! This is solved!
Fabrice

[christine]

Hi Fabrice,

that's fine! Thanks for your feedback.

Kind regards
Christine