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

CSS

Posted by jacobproffer
jacobproffer
24,604 Points

Link is clickable outside of text.

Hey folks,

I've noticed an interesting but annoying aspect of the navigation of the portfolio site that's part of the Web Design track.

It appears that the h1, which is wrapped inside of an anchor tag, is active outside of the text. For example, all of the space to the right of the h1 is still a link up until it hits the nav element.

I've gone ahead and created a CodePen to simulate the issue. My guess is that because the header element is set to 100%, the h1 and the nav element are being given equal widths. Yet I'm unsure why the link can still be clicked.

Any feedback or suggestions is greatly appreciated.

http://codepen.io/anon/pen/yyPBBd

3 Answers

adamdonatello
adamdonatello
27,485 Points
adamdonatello
adamdonatello
27,485 Points

Hi Jacob,

The anchor tag wrapped around the H1 element has an ID of #logo which has some CSS assigned to it inside the Media query.

@media screen and (min-width: 660px) {

    #logo {
    float: left;
    margin-left: 5%;
    text-align: left;
    width: 45%;
    }

As you can see the width for the anchor element is set to 45%. I think this will be causing the issue.

Hope this helps you out :)

shezazr
shezazr
8,275 Points
shezazr
shezazr
8,275 Points

This happens because you have given #logo a width of 45% which happens to be an anchor element.

You don't want to do that, do this instead:

<div id="logo">
   <a href="">....</a>
</div>
jacobproffer
jacobproffer
24,604 Points
jacobproffer
jacobproffer
24,604 Points

Oh geeze, Thank you, everyone. I'm not sure why I didn't consider the responsive stylesheet.

I've taken out the width of 45%, which fixes the problem on the devices larger than 660px. However, the link still spans to 100% below that. Do I need to write another media query to fix that?

adamdonatello
adamdonatello
27,485 Points
adamdonatello
adamdonatello
27,485 Points

There are a few different ways to resolve this. I would do the following:

1) Change your HTML

<div id="logo">
<a href="index.html"><h1>test</h1></a>
</div>

2) Add some CSS

@media screen and (max-width: 660px) { 
#logo{
  max-width:200px;
  margin:0 auto;
}  
}

Just change the max-width for #logo to achieve your desired result :)

adamdonatello
adamdonatello
27,485 Points
adamdonatello
adamdonatello
27,485 Points

Let me know if you have any issues

jacobproffer
jacobproffer
24,604 Points

Thanks a lot, Adam. That did the trick.

I think I'm going to re-build the nav from the ground up to make sure I fully understand everything. I'll make sure to watch out for the widths now.