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 Stu Cowley
Stu Cowley
26,287 Points

HELP! Problem with Links and Padding

Hi everyone,

I am building out my portfolio site and I have hit a bit of a snag with adding padding to a link.

I have decided that I will have a box where a site visitor can click on and be taken to the respective project. I have created a Workspace so you can easily see what I mean incase I'm not making much sense.

I know that this can be fixed by using media queries but I'm having trouble figuring out which one works best, as all seem to be breaking the layout.

I have a div that is acts as the background and then the link, this is where I added the padding that I'm having problems with.

If anyone can help me out with this I will be very grateful, as this has simple problem has been kicking my a** for days!

Stu

Keith Greatz
Keith Greatz
4,377 Points
Keith Greatz
Keith Greatz
4,377 Points

Not sure i can help, but that workspace link appears to be broken, I didn't know you could share workspaces, cool feature if they do, but as said link is broken.

Stu Cowley
Stu Cowley
26,287 Points

That's silly, I can load it all OK, maybe you can't share WorkSpaces publicly.

I'll just add the code the old way then:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Portfolio | Stu Cowley.</title>

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/grid.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-4 link-fade project">
                <h3><a href="#">Click me</a></h3>
            </div>
        </div>
        <p>I've been experimenting with this for a couple of days now and I just can't seem to get the entire orange area to be clickable. I have tried adding padding to the link, but it just breaks as I adjust the viewport. I'm not 100% on what media query would be best for this situation.</p>
    </div>
</body>

body {
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight:300;
    color: rgb(150,159,169);
    line-height:1.5;
}

.container {
  width: 80%;
  margin: 0 auto;
}

.project {
    background: #ff9b71;
    text-align: center;
    border-radius: 5px;
    margin-top: 50px;
    margin-bottom: 1.59%;
    padding:8%;
    box-shadow:0 3px 0 #e58c69;
}

.project p {
    color: #fff;
}

.project a {
    color: #fff;
    font-weight: 600;
    text-shadow: 0 2px 0 rgba(0,0,0, 0.15);
    text-decoration:none;
    border: 1px solid lightgrey;
    padding: 25%;
}
Keith Greatz
Keith Greatz
4,377 Points
Keith Greatz
Keith Greatz
4,377 Points

I'll have a look at it, i need to learn stuff also, Not sure i need your grid.css, can you add that also incase?

Stu Cowley
Stu Cowley
26,287 Points 
/* Grid Styles ------------- */
.row {
   padding-left: 10px;
   padding-right: 10px;
   margin-left: auto;
   margin-right: auto;
}

@media (min-width: 1px) and (max-width: 767px)  {
   .row > [class^="col-"] {
      padding-top: 5px;
      padding-bottom: 5px;
   }
   .hide-mobile {
      display: none;
   }
}

@media (min-width: 768px) {

   .row > [class^="col-"] {
      float: left;
      min-height: 1px;
      padding-left: 10px;
      padding-right: 10px;
      margin-left: 2%;
   }
   .row > [class^="col-"]:first-child {
      margin-left: 0;
   }
   .row > [class^="col-"]:last-child {
      float: left;
   }

   .col-1 {
      width: 6.5%;
   }
   .col-2 {
      width: 15%;
   }
   .col-3 {
      width: 23.5%;
   }
   .col-4 {
      width: 32%;
   }
   .col-5 {
      width: 40.5%;
   }
   .col-6 {
      width: 49%;
   }
   .col-7 {
      width: 57.5%;
   }
   .col-8 {
      width: 66%;
   }
   .col-9 {
      width: 74.5%;
   }
   .col-10 {
      width: 83%;
   }
   .col-11 {
      width: 91.5%;
   }
   .col-12 {
      width: 100%;
   }

   .row::after,
   .group::after {
     content: " ";
     display: table;
     clear: both;
   }
}

@media (min-width: 1200px) {
   .row {
      max-width: 980px;
   }
}

@media (min-width: 1200px) {
  .row {
    max-width: 1200px;
  }
}
Stu Cowley
Stu Cowley
26,287 Points

I created a CodePen for what I'm talking about seeing that Workspaces doesn't work.

Keith Greatz
Keith Greatz
4,377 Points
Keith Greatz
Keith Greatz
4,377 Points

Im kinda new to all this but love to troubleshoot and see what does what, Its obvious using developer tools the issue lies that the "a" element doesn't fill the 'col-4 link-fade project" div... Im sure you knew that though, Sorry dude, Im as keen as you are to find out why. I personally am having a lot of difficulties with positioning and "sizing" elements.

Stu Cowley
Stu Cowley
26,287 Points

That's cool Keith, thanks for helping me out, I would've thought I could do this simple piece of styling, since I've been using CSS since 2006. Maybe Guil Hernandez could help me out too, he's the king of CSS!

3 Answers

Markus Ylisiurunen
Markus Ylisiurunen
15,034 Points
Markus Ylisiurunen
Markus Ylisiurunen
15,034 Points

Hi Stu!

I forked your pen and did some changes to it. I think you can see those changes just by looking at the code but I'll walk you through. So first of all I did some slight changes to the markup. It's not a good idea to modify columns with other classes. It might reveal some serious problems in the long run.

Next the CSS. So after the markup changes I removed few blocks of CSS as they were unnecessary and added few styles to the .project and .project a. You can see those changes by looking at the code.

Here's the pen: Fixed Pen

Hopefully this will help you!

Stu Cowley
Stu Cowley
26,287 Points
Stu Cowley
Stu Cowley
26,287 Points

You'll get there, just read each comment and do all of the CSS Basics, CSS Selectors and CSS Beyond the basics until it all sticks. As I said earlier I've been a CSS Head since 2006 and I'm still learning cool new things.

Stu Cowley
Stu Cowley
26,287 Points
Stu Cowley
Stu Cowley
26,287 Points

You're an absolute champ Markus! This solved the problem for me perfectly, When I initially started this out I just scribbled it out in CSS and thought, that looks great and didn't realize I was using columns with other classes, I must've been sleep deprived at the time. I'm using quite proficient with CSS, I must be getting a bit out of touch.

Thanks again!

Stu : D

Keith Greatz
Keith Greatz
4,377 Points
Keith Greatz
Keith Greatz
4,377 Points

Glad You got some help, I'm a little lost with the changes though :), more specific Divs from what i could gather.