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

Bryan Thien
Bryan Thien
10,973 Points
Posted by Bryan Thien
Bryan Thien
10,973 Points

<a> link padding pushing image out of <div>

I wanted to increase the click area for the image links for this mobile site but when I add padding to the <a> attribute the images get pushed to the right out of the <div>. I just want to find a way to increase the link click area without affecting the layout.

Image of the problem https://imgur.com/a/mhFrHeD

Codepen with code (https://codepen.io/eonearth/pen/yjYgGP) View in mobile dimensions

1 Answer

Dillon Wyatt
Dillon Wyatt
5,990 Points
Dillon Wyatt
Dillon Wyatt
5,990 Points

It sounds like you have the <a> tag inside the <image> tag, right?

Perhaps you could move the <a> tag up one level above the <image> tag.

You might also just be padding one side of the image, thus why it is pushing it to one side. Check to see if it is only padding to one side.

If you had the code itself listed, I might be able to give more detailed advice.

Bryan Thien
Bryan Thien
10,973 Points
Bryan Thien
Bryan Thien
10,973 Points

I posted a link to codepen which contains all of the html and css code. Did I forget something to allow people to access it? Ok it seems the <a> is breaking out of the <div> and causing the image to move for some reason. When I change the display of the <a> to inline-block or block it seems to fix it.