Currently, I am working on developing a community blog/website called THPSBlog. Utilizing the FlexBox feature, I divided and designed a banner with three distinct sections.
NEWS | MEDIA | COMMUNITY
The banner consists of three icons at the top, followed by three information boxes below. Despite numerous attempts to align and justify the content properly, I have been unable to centrally position the icons above the information boxes.
Banner
#flex-banner {
display: flex;
position: absolute;
width: 100%;
height: 60%;
justify-content: space-between;
align-items: baseline;
background-color: rgba(102, 102, 102, 0.308);
}
Icons
.icon {
display: flex;
margin-bottom: 16px;
}
Information Boxes
.box {
text-align: center;
margin-top: 12px;
}
iPhone 6S Media Query
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
.navbar {
justify-content: center;
align-content: flex-start;
display: flex;
height: auto;
}
.navbar ul {
display: block;
width: auto;
}
#flex-banner {
display: flex;
justify-content: center;
align-items: baseline;
height: 100%;
width: auto;
}
}
HTML Code Excerpt
<!DOCTYPE html>
<html>
<div id="flex-banner">
<!-- 1ST BOX-->
<div class="box">
<img class="icon" src="icon-news.svg" alt="newsicon"/ width="125px">
<a href="https://drive.google.com/file/d/1SNivhvHi-4PjPDy1tob-91HYs3x3R_z9/view">
<img src="./customlevels-icon.png" width="250px"/></a>
<h3>100+ Custom Levels in ONE pack</h3>
</div>
<!-- 2ND BOX-->
<div class="box">
<img class="icon" src="./icon-media.svg" alt="thpsvideoicon" width="90px"/>
<iframe width="390" height="245" src="https://www.youtube.com/embed/uvW0lsyttKw"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<h3>Check tLT's pure ownage in their 2015 Team Video</h3>
</div>
<!-- 3RD BOX-->
<div class="box">
<img class="icon" src="./icon-community.svg" alt="thpscommunity" width="110px"/>
<a href="http://thpsx.com/cap-contest-8/">
<img src="./graveyard-scene.jpg" alt="graveyardtheme" width="400px" /></a>
<h3>Cap Contest #8 Theme: Graveyard</h3>
</div>
</div>
</body>
</html>
I am seeking assistance to correctly display this information, with three centered icons aligned horizontally above the remaining three box elements. While portrait mode on my iPhone 6S is acceptable (not perfectly centered but displayed in a column format), landscape mode presents challenges. Thank you!