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 Nadiya Yeroshkina
Nadiya Yeroshkina
8,612 Points

The clickable area is too small. How to improve?

I followed the tutorial in code pan and the area where you can click is really small. I was trying to play with offsets, but wasn't successful. How can I make the entire page clickable? And why when you run it locally it works just fine? Any advice is much appreciated.

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

What is "code pan"? And to facilitate a practical answer, please show the actual code (or provide a link to where it can be seen).

Nadiya Yeroshkina
Nadiya Yeroshkina
8,612 Points

Forgot to include codepen: https://codepen.io/Nad1900/pen/ZRBPXW

2 Answers

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

I see .. code pen (not "pan").

Because of the absolute positioning, the root (html) and body collapse down to a line so only the circle itself remains as the clickable component. But you can fix this by giving this property to either the "html" or "body" element: "height: 100vh;"

And for the offsets, don't forget to consider the body padding.

Nadiya Yeroshkina
Nadiya Yeroshkina
8,612 Points

Thank you, Steven. That makes perfect seance.

Abbey Tipton
Abbey Tipton
16,846 Points
Abbey Tipton
Abbey Tipton
16,846 Points

Hi there! Some more information and your existing code would be great! Generally, when you want to increase the size of a "clickable area" you can increase the padding, which will make the area bigger. Such as:

<a class="big-link" href="website.com">Click here</a>

and then your CSS would be:

.big-link {
      padding: 10px;
}

which would increase the area around the link by 10px all the way around. The higher the padding, the more space around the link there will be. You can also change it to be different sizes all the way around by using padding-top, padding-left, padding-bottom, and padding-right. I hope that helps!

Nadiya Yeroshkina
Nadiya Yeroshkina
8,612 Points

Thank you for your suggestion! Here is my code pen https://codepen.io/Nad1900/pen/ZRBPXW. With link it makes perfect seance tho.