Html - Link of a tag extends even though the text is limited to a width of 50%

bdbekhof
March 13, 2024
219 views
2 votes
3 Answers

I’m running into the following problem and can’t figure out why it’s happening.
When changing the text underneath the image the a link starts sizing too far even when it’s limited to a width of 50%. It should be the size as seen with the blue folder image.

There is an image included to visualize the problem.

.projectsContainer {
  display: block;
  width: 80%;
  align-items: center;
  margin: auto;
}

.projectLink {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 20px;
  border: 2px yellow solid;
}

.projectText {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 50%;
}

a {
  border: 2px red solid;
}

img {
  height: 150px;
  width: 200px;
  border: 2px orange solid;
}

#topText {
  color: #ffffff;
  margin: 5px 5px 5px 5px;
  text-align: center;
}

<main>
  <h1 id="topText">These are the projects I have worked on!</h1>
  <div class="projectsContainer">
    <div class="projectLink">

      <!-- TODO: Fix out of bounds a link -->
      <a href="https://legacy.curseforge.com/minecraft/mc-addons/enhanced-blast-furnace-datapack" target="_blank">
        <img src="../images/Yellow_Folder.png" loading="lazy" />
        <p class="projectText">Enhanced Blast Furnace. A datapack for Minecraft</p>
      </a>

      <a href="" target="_blank">
        <img src="../images/Green_Folder.png" loading="lazy">
        <p class="projectText">Enhanced Blast Furnace. A datapack for Minecraft</p>
      </a>
      <a href="">
        <img src="../images/Blue_Folder.png" loading="lazy">
        <p class="projectText">Project</p>
      </a>
    </div>
  </div>
</main>

I have tried the following:

Putting the p tag outside the a tag. This makes the text disappear completely and totally offsets the images (Folders).
Binding the a tags with a class to a width, this does not work. I also can’t speak to the a tag in general in CSS because that would break my navbar.
I have tried giving the CSS different display attributes, however it does not respond to any of that. Probably because it inherits from parents.

I have managed to solve the problem.
I gave the a tags a class attribute projectHref and called that in the CSS file.

.projectText {
    display: flex;
    flex-direction: column;
    text-align: center;
}

a.projectHref {
    /*border: 2px red solid;*/
    width: 200px;
}

By forcing the width the same as the folder image. This is (most) probably not the prettiest/best solution but it works.

If anyone has a way or idea to improve the code, feel free to post it here.

Tags: css html

Answers

Chosen as BEST ANSWER
- bdbekhof
- March 13, 2024 at 4:20 pm
- 0 votes
0
I have managed to solve the problem. I gave the a tags a class attribute projectHref and called that in the CSS file.
```
.projectText {
    display: flex;
    flex-direction: column;
    text-align: center;
}

a.projectHref {
    /*border: 2px red solid;*/
    width: 200px;
}
```
By forcing the width the same as the folder image. This is (most) probably not the prettiest/best solution but it works.

If anyone has a way or idea to improve the code, feel free to tell.

(Edit)

Try setting it to 25%, with some padding.

.projectsContainer {
  display: block;
  width: 80%;
  align-items: center;
  margin: auto;
}

.projectLink {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 20px;
  border: 2px yellow solid;
}

.projectText {
  display: flex;
  flex-direction: column;
  text-align: center;
width: 100px;
  
}
.projectText a {
 
}
a {
  border: 2px red solid;
}

img {
  height: 150px;
  width: 200px;
  border: 2px orange solid;
}

#topText {
  color: #ffffff;
  margin: 5px 5px 5px 5px;
  text-align: center;
}

<main>
  <h1 id="topText">These are the projects I have worked on!</h1>
  <div class="projectsContainer">
    <div class="projectLink">

      <!-- TODO: Fix out of bounds a link -->
      <a href="https://legacy.curseforge.com/minecraft/mc-addons/enhanced-blast-furnace-datapack" target="_blank">
        <img src="../images/Yellow_Folder.png" loading="lazy" />
        <p class="projectText">Enhanced Blast Furnace. A datapack for Minecraft</p>
      </a>

      <a href="" target="_blank">
        <img src="../images/Green_Folder.png" loading="lazy">
        <p class="projectText">Enhanced Blast Furnace. A datapack for Minecraft</p>
      </a>
      <a href="">
        <img src="../images/Blue_Folder.png" loading="lazy">
        <p class="projectText">Project</p>
      </a>
    </div>
  </div>
</main>

It’s not completely clear what you want, but if it is what I think, you should remove the flex settings from .projectText and give it width: 100px and text-align: center;

Since you have a fixed width for the images (200px), 50% of it can as well be written as a fixed width (-> 100px), and the centering within it can be done with plain text centering instead of flex:

.projectsContainer {
  display: block;
  width: 80%;
  align-items: center;
  margin: auto;
}

.projectLink {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 20px;
  border: 2px yellow solid;
}

.projectText {
  width: 100px;
  text-align: center;
}

a {
  border: 2px red solid;
}

img {
  height: 150px;
  width: 200px;
  border: 2px orange solid;
}

#topText {
  color: #ffffff;
  margin: 5px 5px 5px 5px;
  text-align: center;
}

<main>
  <h1 id="topText">These are the projects I have worked on!</h1>
  <div class="projectsContainer">
    <div class="projectLink">

      <!-- TODO: Fix out of bounds a link -->
      <a href="https://legacy.curseforge.com/minecraft/mc-addons/enhanced-blast-furnace-datapack" target="_blank">
        <img src="../images/Yellow_Folder.png" loading="lazy" />
        <p class="projectText">Enhanced Blast Furnace. A datapack for Minecraft</p>
      </a>

      <a href="" target="_blank">
        <img src="../images/Green_Folder.png" loading="lazy">
        <p class="projectText">Enhanced Blast Furnace. A datapack for Minecraft</p>
      </a>
      <a href="">
        <img src="../images/Blue_Folder.png" loading="lazy">
        <p class="projectText">Project</p>
      </a>
    </div>
  </div>
</main>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Link of a tag extends even though the text is limited to a width of 50%

Answers