How to Remove Dotted Lines under links

[hwaitah]

Hi, I've just switched my website to the Minimum Pro theme and I'm loving its minimalist and clean design (see http://coaching-journey.com)

I would like to remove the dotted lines under the links (eg. 'Read more'). I don't mind the dotted lines appear (and font color turns to light blue) when I hover over it but I would like a cleaner design with no dotted lines as default. How do I remove those dotted lines?

Thanks so much.

http://coaching-journey.com

[Krishan]

Hi Hwaitah,

Add the following at the bottom of all code of your style.css of the Minimum Pro theme:

a.more-link{
border-bottom: none !important;
}
You can access the styles.css under Appearance > Editor in your dashboard.

Thanks
K Krishan

---

Kulwinder Krishan
I love helping people with Any Genesis Theme Customizations.
Check my website at http://www.ew3tech.com

[hwaitah]

Thanks Krishan.

I did as you said at Appearance > Editor > styles.css and there was no changes. Then I did it at Appearance > Edit CSS and now there's no dotted lines at below 'Read more' links on the front page. However the other links still have the dotted lines. For example, if you scroll down, you will still see them. Even pictures that have hyperlinks have the dotted lines below them, which is what I don't want.

Is there a way or code to make a global change to remove the dotted lines on all the links?

Thanks again.

[Badlywired]

Hi

at about line 170 you will find

a {
	border-bottom: 1px dotted #333;
	color: #333;
	font-weight: 400;
	text-decoration: none;
}

a img {
	margin-bottom: -6px;
}

a:hover {
	color: #0ebfe9;
	border-bottom: 1px dotted #0ebfe9;
}

Remove the two lines containing
border-bottom: 1px dotted #0ebfe9;

So it looks like

a {
	color: #333;
	font-weight: 400;
	text-decoration: none;
}

a img {
	margin-bottom: -6px;
}

a:hover {
	color: #0ebfe9;
}

and around line 1499 remove border bottom dotted as follows

.footer-widgets a {
	border-bottom: 1px dotted #fff;
	color: #fff;
}

to

.footer-widgets a {
	color: #fff;
}

---

My techy blog WordPress and stuff badlywired.com

[hwaitah]

Thanks Badlywired. As I've posted earlier, whatever changes I made at Appearance > Editor > styles.css had no effect. So, based on what you wrote, I figured out to make the change at Appearance > Edit CSS (I had the Jetpack installed) by adding the following lines:

a {
	border-bottom: none !important;
}

.footer-widgets a {
	border-bottom: none !important;
}

And voila! The dotted lines disappeared at the content and footer.

Thanks so much Krishan and Badlywired for all your help.

[Badlywired]

glad you got sorted

---

My techy blog WordPress and stuff badlywired.com

[Author]

Posts