Flexbox help - center on mobile - left on desktop

Screenshot 2023-01-13 125503

Hello! I am attempting to center an image within a div horizontally and vertically on mobile and then once reaching a specific media query I would like to remain vertically centered within the div but move left while staying within the boundaries of my site template (1200px). I can achieve everything I want with the mobile view but I cannot for the life of me achieve the desktop. I can move it left but am unable get the 1200px outer div to center while keeping my logo to the left.

Not sure why but the html section didn’t take all my pasted code. Here is a screenshot:


<div class="header-section">
      
        <div class="header-section__logo-container">
          
          <img src="/images/uploaded/IMG_HEADER_LOGO_BRAVE.png" alt="Brave logo" />
          
        </div>
      
    </div>

CSS:

Mobile:

.header-section {
    display:flex;
    justify-content: center;
    align-items: center;
    background-image: url("/images/uploaded/IMG_BRAVE_HEADER.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
    margin-top:-50px;
}

.header-section__logo-container {
    
}

.header-section img {
    width:100%;
    height: auto;
    padding: 50px;
}

Desktop:

.header-section {
        justify-content:start;
        height: 450px;
        margin-top:-30px;
    }
    
    .header-section__logo-container {
        
           
    }

    .header-section img {
    width: 50%;
    
    }

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

We might need all of your HTML and CSS in order to help you. Or even better, maybe you could have a live version of it running somewhere and give us a link (that way we can see the images).

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.