Having trouble aligning items (3) in the center on top of other elements (3) using flexbox

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!

Answer №1

This solution should work perfectly. I recommend incorporating Bootstrap as well, as it simplifies the process of getting started. Best of luck!

#flex-banner {
    justify-content: space-evenly;
    align-items: center;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The validation of the "data" attribute in jQuery MetaData is not working as expected

Trying to utilize the jquery metadata plugin, I have come across an element on my webpage that is structured like this: However, when I validate it using the W3C Validator, an error pops up stating "there is no attribute "data"" Is there something I over ...

The problem with -webkit-center in HTML

I have encountered an issue with some code that I wrote. When utilizing -webkit-center and entering text into a textbox, all the items shift to the right. I have attempted other -webkit alignment settings without any problems, only -webkit-center seems to ...

What is the best way to expand the Bootstrap container's width to the maximum size?

I'm having an issue with implementing a DataTable within a Bootstrap container. When viewing the website at maximum width, the table container adds a scrollbar and cuts off the last column in the table. Attempted solutions such as using a `container- ...

Rails 5 not allow user submission of bootstrap modal form

I am facing an issue with a form inside a modal in my Rails application. When I click on the submit button, nothing happens. How can I use Ajax to submit the modal form and save its content on another page? <button type="button" class="btn btn-primary ...

Improving User Experience with HTML Form Currency Field: Automatically Formatting Currency to 2 Decimal Places and Setting Maximum Length

Hello there, I am currently facing an issue with the currency auto-formatting in a deposit field on my form. The formatting adds 2 decimal places (for example, when a user types 2500, the field displays 25.00). However, the script I wrote does not seem to ...

How can I arrange multiple images within a div to create a circular view?

How can I create a div block with multiple images positioned inside? I'm having trouble applying div CSS properties to the images, and also want them to be displayed in round shapes. ...

correcting mistakes in the design of the website

After inserting Google Adsense on my website, the content of the site moved down. Is there a way to have the content appear alongside the Google Adsense rather than below it? You can view my site here: .wrapper { width: 990px; margin: 0 auto; ...

Guidelines on retrieving an HTML element from a source document

To change a specific HTML section identified by a tag id in source code consisting of both HTML and PHP, I need to use PHP. If the code is purely HTML, a DOM parser can be utilized; otherwise, if there are multiple nested DIVs, regex with preg_match might ...

Tips on utilizing Twitter Boootstrap's form validation tooltip messages

Before anything else, let me clarify that I am not inquiring about creating tooltips from scratch using Bootstrap's javascript guide, which can be found in the documentation. I recently utilized type="email" with version v3.3.1. It automatically vali ...

Issue with Jquery button click event not triggering

I'm facing an issue that seems simple, but the solutions provided for a similar problem don't seem to be working for me. My aim is to trigger an AJAX request when a button is clicked, but it doesn't seem to be happening. Here's an exa ...

Creating a connection to an external website through a JavaScript function within an Angular application

I am currently working on an Angular application. Within the index.html file, there is a header that contains links to external websites. <a href="#" onclick="getExternalUrl('about.html');">Click here </a> <scr ...

Is there a way to incorporate CSS into an element utilizing jQuery when only a class is available for identification, and when the time in the innerHTML is within a 5-minute range from the current time?

I have some HTML code that I need help with: <td class="mw-enhanced-rc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;18:10&nbsp;</td> My goal is to use JavaScript to make the time bold. $('td[class^="mw-enhanced-rc"]').eac ...

Implementing a backdrop while content is floating

I am facing an issue with a div that has 2 columns. The height of the left column is dynamically changing, whereas the right column always remains fixed in height. To achieve this, I have used the float property for both column divs within the container di ...

What causes z-index to be ineffective with sticky elements?

In my website, I've implemented rollover effects in a sticky footer and a responsive menu that stays at the top. However, when the menu is opened and extends over the footer, it covers everything except the rollovers. Closed navigation http://www.mus ...

Incorporating Local Storage into a To-Do List Application

I followed a tutorial from w3schools to create a custom task list, tweaking the code to fit my requirements. My goal is to ensure that when I click the save button in the toolbar at the top and then refresh the page, the added tasks are preserved. I&apos ...

Issue encountered while attempting to implement custom fonts through CSS

When attempting to implement a custom font on my website using the CSS file, I am having trouble getting it to display correctly. Instead of seeing the desired font, only the default font is showing up. Can someone please review the CSS code below and le ...

Is it possible to create a Footer with a 100% width in CSS?

I have a simple HTML page with all elements contained within a mainWrapper div and secondWrapper div. Everything is currently sized to 960px, including the pageHeader, pageContent, and pageFooter. However, I need to keep everything at 960px except for th ...

Load the page's content gradually, without needing to wait for all the content to be fully loaded

I am facing an issue with a webpage that displays 10 different items, each of which has a slow loading time. Currently, the entire page waits for all 10 items to fully load before displaying anything. I am interested in finding out if it is feasible to sh ...

The true meaning of CSS3 transition is often misconstr

I'm trying to create a simple linear transition effect, but for some reason it's not working. Any suggestions on what might be causing the issue? HTML <div class="button-modern" style="background-color:#e73032"> <span style="color: ...

Is there a way to switch the main image by clicking on different thumbnails in a sidebar using javascript/jQuery

Currently on my page, I have a large plot created with jqplot along with a sidebar containing several smaller plots. I am trying to find a way to dynamically change the large plot based on which of the smaller plots the user clicks on, without needing to ...