Need Help with CSS Styling Links

Posted in: Newspaper
Post count: 184

Hi TagDiv Team,

Thanks for the recent update and for the hardwork and love you give to the Newspaper theme! I recently extended my support and hope you can help me with my simple problem.

I have added this CSS code in the Custom Code in the Theme Panel:

.td-post-content a:link {
border-bottom: 1px solid #05386b;
padding-bottom: 1.5px;
text-decoration: none !important;
color: #05386b;
}

.td-post-content a:hover {
background: #3da559;
}

I wanted to have vertical lines on each link on my website. But now, even the img tags are getting the border-bottom which doesn’t look nice on mobile.

Could you please help me solve this and know what’s the proper CSS so that the img tags don’t have the border-bottom?

Post count: 35449

Hi,

Please try this custom css -> http://prntscr.com/opvsoj
.single .td-pb-span8 .td-post-content p a:link {
border-bottom: 1px solid #05386b;
padding-bottom: 1.5px;
text-decoration: none !important;
color: #05386b;
}
.single .td-pb-span8 .td-post-content p a:hover {
background: #3da559;
}

If this is not working properly, please provide me a link to one of your post, in this way I will be able to provide you the right custom css.

Thank you!

Post count: 184

Hi Calin,

It worked on the Desktop version of the site and it did NOT work as expected on the mobile version.

Here’s a sample: https://prnt.sc/oq6c6t
And a sample post: https://nurseslabs.com/nurse-salary/

The line is being applied below the images.
Is there a more specific custom CSS for mobile?

Thanks!

Post count: 35449

Hi,

Please remove all the css style that you add and set this one in Theme penal>Custom code>Advance css
.single .td-pb-span8 .td-post-content p a:link {
border-bottom: 1px solid #05386b;
padding-bottom: 1.5px;
text-decoration: none !important;
color: #05386b;
}
.single .td-pb-span8 .td-post-content p a:hover {
background: #3da559;
}

http://prntscr.com/oqehic
And this one in phone section
.single .td-post-content p a:link {
border-bottom: 1px solid #05386b;
padding-bottom: 1.5px;
text-decoration: none !important;
color: #05386b;
}

http://prntscr.com/oqehyl

Also please clear all the cache after you save this code in theme panel.

Let me know the results!

Post count: 184

Hi Calin,

The desktop code work. But how about for the MOBILE THEME+AMP version?

Thanks so far!

Post count: 35449

Hi,

If you are using the MOBILE THEME+AMP set the code for phone section in Theme panel> Mobile theme> Custom code > Css -> http://prntscr.com/orh8jo this should work.

Thank you!

Post count: 184

It worked! Thank you so much!

Viewing 7 posts - 1 through 7 (of 7 total)
You must be logged in to reply to this topic.