Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:

I can’t change the border radius of my text elements below the link images. I want to have the bottom borders rounded like the other corners. I can do it for the link button to the other works, but not for the text button bellow the link images.
IE:

Tribute

Here’s the codepen if it helps understand better

Your code so far

HTML 
<div id="projects" class="div-fcc">
    <h2 class="project-title">Certification Projects</h2>
   
    <div class="grid-projects">
      
      <div class="grid-item">
        <a href="https://tinyurl.com/ylavck3w" target="_blank" class="project-tile">
        <img class="project-image" src="https://tinyurl.com/yq29vlau" alt="project"/>
        <div class="code">Survey Form</div>
      </a>
      </div>
      
      <div class="grid-item">
        <a href="https://tinyurl.com/ywwfcypc" target="_blank" class="project-tile">
          <img class="project-image" src="https://tinyurl.com/yukp7bkg" alt="project"/>
          <div class="code">Tribute</div>
          </a>
      </div>

      <div class="grid-item">
        <a href="https://tinyurl.com/yqsq2v79" target="_blank" class="project-tile">
          <img class="project-image" src="https://tinyurl.com/yuce7vy2" alt="project"/>
          <div class="code">Technical Documentation</div>
          </a>
      </div>

      <div class="grid-item">
        <a href="https://tinyurl.com/ywaqyu2s" target="_blank" class="project-tile">
          <img class="project-image" src="https://tinyurl.com/ymmjeumw" alt="project"/>
          <div class="code">Product Landing</div>
          </a>
      </div>

          <a href="https://tinyurl.com/yvjucn86" class="grid-button" target="_blank" id="profile-link">
            See my other works</a>

CSS:
.div-fcc {
  background-color: rgb(64, 61, 57);
  flex-grow:6;
  padding: 20px;
  border-radius: 1em;
}

.grid-projects {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-evenly;
  justify-items: center;
  align-content: space-evenly;
  align-items: center;
}

.grid-item {
  display: block;
  text-align: center;
  margin: 30px 0;
  width:min-content;
  background-color: #EB5E28;
}

.code, .grid-button {
  background-color: #EB5E28;
  font-size: 1.5rem;
  font-weight: bold;
}

.grid-button {
  color: whitesmoke;
  padding: 5px;
  border: none;
  width: 40%;
  text-align: center;
  grid-column: 1 / 3;
  margin: 25px 0;
}

.grid-button:hover {
  color: #252422;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

2 Likes
2

Not sure I understand what element it is you want the border-radius on. It sounds like it is the .grid-item

.grid-item {
  display: block;
  text-align: center;
  margin: 30px 0;
  width: min-content;
  background-color: #eb5e28;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}
3 Likes
3

You’re a wizard Harry! This solves the question. But seriously, what does the overflow:hidden do that it allows for this to work?
I tried before going for the border radius values, just doing the good old 0 20px 0 20 px and It just didn’t change anything. Thank you anyways for the solution.

2 Likes
4

Child elements inside a parent with a border-radius will overflow the corners. The same will happen with your images if you add a border radius to the top corners, they will overflow.

Technically, if the .code element that is inside .grid-item didn’t have the same background color it would work without the overflow hidden because it would be transparent and you wouldn’t see the overflow (it would still overflow).

.grid-item {
  display: block;
  text-align: center;
  margin: 30px 0;
  width: min-content;
  background-color: #eb5e28;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
/*   overflow: hidden; */
}

.code,
.grid-button {
/*   background-color: #eb5e28; */
  font-size: 1.5rem;
  font-weight: bold;
}

Obviously, as you are also coloring the button in that selector you would have to create a separate selector for it.

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.