Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Joshua Inman
Joshua Inman
2,280 Points

clickable link is larger than desired

Hello!

I'm having trouble figuring out why my on my "contact page" the phone and email clickable links are larger than the actually content for them? Would love some insight, thanks!

Here is my HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Joshua J. Inman | Contact</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Joshua Inman</h1>
        <h2>Web Developer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html" class="selected">Contact</a></li>
        </ul>
      </nav>
    </header>
      <div id="wrapper">
        <section id="primary">
          <h3 id="contact-h3">General Information</h3>
          <p>I am currently looking for basic web design work. If you have any questions feel free to contact me below.</p>
          <p>Please only use phone contact for urgent inquiries. Otherwise, email is the best form of communication to reach me.</p>
        </section>
        <section id="secondary">
          <h3 id="contact-h3">Contact Details</h3>
          <ul class="contact-info">
            <li class="phone"><a href="tel:(909)-996-0097">(909)-996-0097</a></li>
            <li class="mail"><a href="mailto:joshuainman@icloud.com">JoshuaInman@icloud.com</a></li>
          </ul>
        </section>
        <footer>
          <a href="http://instagram.com/joshua.j.inman" target="_blank">
          <img src="img/instagram-icon.png" alt="Instagram Logo" class="social-icon"> </a>
          <p>Joshua Inman Copyright &copy; 2017</p>
        </footer>
      </div>
  </body>
</html>

Here is my CSS:

/*****************************
GENERAL
******************************/

/* entire site font */ 
body {
  font-family: 'open sans', sans-serif;
}

/* main "style" */
#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
  font-size: 0.9em;
}

/* all links */
a {
  text-decoration: none;
}

/* all images */
img {
  max-width: 100%;
}



/*****************************
COLORS
******************************/

/* site body color */
body {
  background-color: #fff;
}

/* header color */
header {
  background: #42C0FB;
}

/* nav background */
nav {
  background: #1fa6e5;
}

/* joshua inman | web developer */
h1, h2 {
  color: #fff;
}

/* link color */
a {
  color: #42C0FB;
}

/* nav link color | nav link color visited */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link color | hover nav link color */
nav a.selected, nav a:hover {
  color: #0e86be;
}



/*****************************
HEADER
******************************/

/* header at top of page */
header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

/* joshua inman | web developer */
#logo {
  text-align: center;
  margin: 0;
}

/* "joshua inman" */
h1 {
 font-family: 'open sans', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: bold;
  line-height: 0.8em;
}

/* web developer */
h2 {
  font-size: 0.75em;
  margin: 5px 0 0;
  font-weight: normal;
}



/*****************************
NAVIGATION
******************************/

/* nav at top right of page */
nav {
  text-align: center;
  padding: 15px 0 15px 0;
  margin: 20px 0 0px 0;
}

nav ul {
  margin: 0 15px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 600;
  padding: 0px 15px;
}



/*****************************
PAGE: HOME
******************************/

#league-career-p img {
  max-width: 900px;
  margin: 0 auto 15px;
  display: block;
  border-top: 3px solid #0e86be;
  border-right: 3px solid #0e86be;
  border-bottom: 3px solid #0e86be;
  border-left: 3px solid #0e86be;
}

#league-career-p {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
  text-align: left;
  font-size: 0.9em;
}

h3 {
  text-align: center;
  font-size: 1.50em;
}

#victorious-img {
  margin: 0;
  padding: 0;
  list-style: none;
}

#victorious-img li img {
  border-top: 2px solid #0e86be;
  border-right: 2px solid #0e86be;
  border-bottom: 2px solid #0e86be;
  border-left: 2px solid #0e86be;
}

#victorious-img li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
}

#victorious-img li a p {
  margin: 0;
  padding: 5%;
  font-size: 1em;
  color: #000;
}



/*****************************
PAGE: ABOUT
******************************/

.about-photo {
  display: block;
  max-width: 20%;
  margin: 0 auto 15px;
  border-radius: 20px;
  border-top: 2px solid #0e86be;
  border-right: 2px solid #0e86be;
  border-bottom: 2px solid #0e86be;
  border-left: 2px solid #0e86be;
}



/*****************************
PAGE: CONTACT
******************************/

#contact-h3 {
  text-align: left;
}

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px 0;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}



/*****************************
FOOTER
******************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 25px;
  height: 25px;
  margin: 0 5px;
}

1 Answer

Chris Jardine
Chris Jardine
13,299 Points

Hi Joshua

It's because you have set ".contact-info a" to display as "block". If you place a background color on ".contact-info a" you'll see it streches across the page, which is a link.

Hope this helps.

Joshua Inman
Joshua Inman
2,280 Points

Thanks for the info, I fixed my issue!