Question posted in 
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
ptag outside theatag. This makes the text disappear completely and totally offsets the images (Folders). - Binding the
atags with a class to a width, this does not work. I also can’t speak to theatag 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.
3
Answers
I have managed to solve the problem. I gave the
atags a class attributeprojectHrefand called that in the CSS file.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.
Try setting it to 25%, with some padding.
It’s not completely clear what you want, but if it is what I think, you should remove the flex settings from
.projectTextand give itwidth: 100pxandtext-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: