Johani:
.categories-and-latest {
flex-direction: column;
}
.category-list {
thead,
.topics,
.subcategories,
.category-description {
display: none;
}
tbody {
text-align: center;
tr {
display: inline-block;
width: 250px;
height: 250px;
margin: 0.75em;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
border-left-color: transparent;
}
.category {
padding: 0;
border-width: 0;
display: block;
width: 100%;
height: 100%;
position: relative;
> div {
height: 100%;
background: #f2f2f2;
}
.category-logo {
float: unset;
margin: 0 auto;
}
.category-name {
margin-top: 1.25em;
}
h3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
a[href] {
display: flex;
flex-direction: column-reverse;
width: 250px;
}
}
&:after {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: "";
z-index: 1;
box-sizing: border-box;
pointer-events: none;
border-left: 6px solid;
opacity: 0.35;
border-color: inherit;
}
}
}
}
For some reason, when I use the exact same code, the text is not centered in the box. The images are however. I tried entering the text, but the pictures are moving with with the text. Does anybody know what I am doing wrong?