CSS edits for a field displaying long hyperlinks

[Thombody]

I only know basic CSS. I can change the font size, color etc, however I cannot work out how to add some padding or margin at the end of a paragraph.

These hyperlinks are hard to read and need a gap after each link as some links break across two lines. There are 5 hyperlinks in this field:

I can change the font color to orange, but I am not able to add padding or margin so that the 5 hyperlinks are better separated.

I have tried to educate myself but stuck on this. If anybody could help, please.
thank you

[moe]

Is the entire orange text 5 different links?

[Thombody]

yes. There are 5 links in this field.

[moe]

I am unsure why you’re seeing that selector called “.component_undefined_field_359”, but maybe you can try adding “> a” and using this CSS code:

.component_undefined_field_359 > af-data-table-field:nth-child(1) > span > p > a {
    display: block;
    padding: 10px 0; /* Adjust the padding value as needed */
}

It’s not simple to do this without access to your page. If it’s a public page, feel free to message me with a link and I can try and guide better if this code doesn’t work.

[Thombody]

apologies for you spending time on this lower level issue…
The page is public at the moment:
https://app.phytotherapydeskreference.com/indications
Click on Acne to view an example.
You already have access via Sharing.

I added the component because without it, the changes affected the other fields on that page.
thank you!

[moe]

It’s my pleasure.

Try this:

#field_block_field_359 > div.component_undefined_field_359 > af-data-table-field a {
    display: block;
    padding: 0px 0; /* Adjust the padding value as needed */
}

You may also want to show that it’s a link, so tweak to this:

#field_block_field_359 > div.component_undefined_field_359 > af-data-table-field a {
    display: block;
    padding: 0px 0; /* Adjust the padding value as needed */
    text-decoration: underline;
    transition: all 0.3s ease; /* Just for fun */
    text-decoration-style: dashed; 
}

[moe]

I also see you have an overflow issue.

(I blurred as I"m not sure what’s private or not)

You can fix it with this:

#field_block_field_379 > div.component_undefined_field_379 > af-data-table-field > span > p {
    overflow: auto;
}

[Thombody]

Can’t see the overflow issue on my screen (Firefox) but thank you!
I added your code and it is great.

I can see how you added the div. before the component.
But I would never have worked out adding the field block.
I have to study this more…

Is this common knowledge for someone who are well trained in CSS?
To help me in the future, what sort of person (training) do I need to look for to help me?

I can often work out the minor things, but as my app grows, I think I need additional help.
thank you!
Michael

[moe]

Michael, I have a pretty straight forward approach to making CSS changes. I too am no CSS expert, but I learned a few tricks.

1. I find the element I want to tweak with CSS Code in the developer tools, right click and “Copy Selector”
   
   

(Make sure to add the { } after you paste the selector)

2. I use the “Live editor for CSS, Less & Sass - Magic CSS” chrome extension
   

   

3. I make the necessary CSS changes and can see it all in realtime. I ask ChatGPT for help as well.

When I’m done I copy/paste the whole code into the CSS in the builder.