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%;
}