I am customizing a Ghost theme to create a 2 column/2 row grid with svg images, urls, and text centered below.
A work in progress can be seen at https://country-musicfy.ghost.io/home
I cannot figure out how to make the svg images the same height, nor make the text below centered and 20px
I am open to creating buttons with the svg images and text if anyone has suggestions.
Below is html and css:
<div class="row">
<div class="column">
<a href="https://country-musicfy.ghost.io/lofi"><img src="https://country-
musicfy.ghost.io/content/images/2022/03/music-alt.svg" width="100%" loading="lazy"
class="svg-icon" class="svg-text" alt=""><p>LoFi 128</p></a>
</div>
<div class="column">
<a href="https://country-musicfy.ghost.io/prime"><img src="https://country-
musicfy.ghost.io/content/images/2022/03/music.svg" width="100%" loading="lazy"
class="svg-icon" alt=""></a>
</div>
<div class="column">
<a href="https://country-musicfy.ghost.io/hifi"><img src="https://country-
musicfy.ghost.io/content/images/2022/03/speaker.svg" width="100%" loading="lazy"
class="svg-icon" alt=""></a>
</div>
<div class="column">
<a href="https://country-musicfy.ghost.io/master"><img src="https://country-
musicfy.ghost.io/content/images/2022/03/headphones-alt.svg" width="100%" loading="lazy"
class="svg-icon" alt=""></a>
</div>
</div>
<style>
/* Two image containers (use 25% for four, and 50% for two, etc) */
.column {
float: left;
width: 50%;
padding: 5px;
background: #282A2D;
}
.svg-icon {filter: invert(65%) sepia(14%) saturate(3161%) hue-rotate(185deg)
brightness(103%) contrast(105%);}
.svg-text {
text-align: justify;
width: 100%;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
You can use CSS Flexbox to reach that easily. Please take a look to the code below. Then if you want, you can play with the height or padding of the text below the svg image or size of the image itself.
/* Two image containers (use 25% for four, and 50% for two, etc) */
.kg-canvas {
justify-items: center;
}
.row {
width: 100%;
display: flex;
text-align: center;
flex-wrap: wrap;
}
.column {
background: #282A2D;
margin: 0;
flex-basis: 50%;
}
.column a {
display: flex;
flex-direction: column;
padding: 10px;
}
.svg-icon {filter: invert(65%) sepia(14%) saturate(3161%) hue-rotate(185deg)
brightness(103%) contrast(105%);
height: 100px;
}
.svg-text {
text-align: justify;
width: 100%;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}<div class="row">
<div class="column">
<a href="https://country-musicfy.ghost.io/lofi"><img src="https://country-musicfy.ghost.io/content/images/2022/03/music-alt.svg" width="100%" loading="lazy" class="svg-icon" class="svg-text" alt=""><p>LoFi 128</p></a>
</div>
<div class="column">
<a href="https://country-musicfy.ghost.io/prime"><img src="https://country-musicfy.ghost.io/content/images/2022/03/music.svg" width="100%" loading="lazy" class="svg-icon" alt=""><p>LoFi 128</p></a>
</div>
<div class="column">
<a href="https://country-musicfy.ghost.io/hifi"><img src="https://country-musicfy.ghost.io/content/images/2022/03/speaker.svg" width="100%" loading="lazy" class="svg-icon" alt=""><p>LoFi 128</p></a>
</div>
<div class="column">
<a href="https://country-musicfy.ghost.io/master"><img src="https://country-musicfy.ghost.io/content/images/2022/03/headphones-alt.svg" width="100%" loading="lazy" class="svg-icon" alt=""><p>LoFi 128</p></a>
</div>
</div>