Design Issue on hover and in mobile view

[vks_group]

Hello, I’m haivng 2 design issues.

1. This section is available on my home page. I’m having an issue with the tooltip. You can see that the tooltip is coming a little out of it’s main content. So I need to fix that spacing between the tooltip and the main icon. You can check th ecorrect spacing between icon and tooltip by hovering over the next element.
   

   

2. Now In this image you can see the color of pdf icon is the red. Whereas I’d defined the color black for this icon for all views but don’t know how it is picking up the red color for mobile view.
   

   

Please help me in these minor issues as they are catching attention on my site.

[tristup]

Hi Ketan,

Thanks for reaching out.
Sometimes the only screenshot doesn’t help us to recognize the issue you are having. We need to examine your site to determine the cause of the issue. Can you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password
– The specific page where you are having the issue.

To create a secure note, click the key icon underneath any of your posts.

Thanks

[vks_group]

Hey Sorry I forgot to add credentials. Here you can find them.

[ruenel]

Hey Ketan,

1.) You just have to remove the extra space character in your code:
<a href="{{dc:acf:post_field field='blog_pdf'}}" class="far fa-file-pdf" download="{{dc:acf:post_field field='name_of_pdf_file_for_download'}}"></a>

2.) It is displaying red because somewhere on the site has this custom CSS:

a, .widget.widget_text ol li a, .widget_nav_menu .current-menu-item > a {
    color: #dd3333;
}

Best Regards.

[vks_group]

can you please help me in adding this. As I tried to add this but that didn’t worked.

Many Thanks in Advance

[ruenel]

Hello Ketan,

You do not need to add the CSS code. That CSS code is the reason why the icon is in red. If you want to make it to black, you can use the fa-file-pdf and set it to black like this:

a.fa-file-pdf {
   color: black !important;
}

Best Regards.

[vks_group]

this is not working. i dont know why?

[prakash_s]

Hello Ketan,

I checked your page, but the custom CSS code is not on the global CSS. I have checked your page source code. Please ensure that you have added the custom CSS code and then clear your browser cache and recheck it. The given login details are not working, so we can not check it from the WordPress dashboard.

Thanks

[vks_group]

i updated the login details in secure note now you can check.

[prakash_s]

Hello Ketan,

Thanks for sharing the login details I went ahead and checked your Global CSS and it seems that you have not added the custom CSS code which was given by our colleague @ruenel please add the custom CSS code and recheck it.

Thanks

[vks_group]

i added but it is not working.

[prakash_s]

Hello Ketan,

It seems that you have added the PHP code to the Appearance—>customize —>additional CSS just because the style is not rendering. Please remove the PHP code and custom CSS code which is underlined and then check it.

Thanks

[vks_group]

i removed the css but still the pdf icon is taking the red color.

[prakash_s]

Hello Ketan,

I went ahead and removed the code now you can check your site.

The removed code is given in the secure note.

Thanks