The logo element in this page is not centering vertically within the <header> container. The problem is more pronounced on mobile than on desktop. The second element (#forum-link) is aligning correctly.
The flexbox align-items:center rule seems to work for one child div but not the other. Why is that the case and how do you fix it?
html {
max-width: 780px;
margin: 0 auto;
}
body {
background-image: url('https://img.freepik.com/free-vector/retro-styled-pattern-background_1048-6593.jpg');
background-size: 116px;
background-repeat: repeat-x;
}
header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
height:116px;
}
#logo {
margin-left: 15px;
}
#forum-link {
max-width: 110px;
margin-right: 35px;
}
#forum-link a {
color: white;
text-decoration: none;
font-weight: bold;
font-size: x-large;
}
#media only screen and (orientation: portrait) {
html {
margin: 0;
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
header {
display: block;
width: 100%;
position: relative;
height: auto;
margin-bottom: 50px;
}
#logo {
margin: initial;
display: flex;
align-items: center;
justify-content: center;
}
#forum-link {
margin: initial;
max-width: initial;
background: #323232;
height: 27px;
position: absolute;
bottom: -50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#forum-link a {
font-weight: bold;
font-size: .9em;
}
#forum-link a:hover {
text-decoration: underline;
}
<body>
<header>
<div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
<div id="forum-link">Join our Forums!</div>
</header>
</body>
EDIT: Clarified the question
Umm, I think this is what you're after: logo and link is vertically centred on the bg? Only updated for non-mobile solution.
Also, as I said in my comment, repeated here for comprehensiveness: your image isn't vertically centring because it's the height of its parents: the #logo and header.
The link has a smaller height than the header, so it's vertically centring.
If you're referring to the 5px or so of space, just throw a display: block on your #logo's image to remove that spacing. It will still be the height of its parents though.
My solution basically gives your body a height, flex it and your header aligns itself vertically centred.
html {
max-width: 780px;
margin: 0 auto;
}
body {
background-image: url('https://img.freepik.com/free-vector/retro-styled-pattern-background_1048-6593.jpg');
background-size: 116px;
background-repeat: repeat-x;
height: 116px;
margin: 0;
display: flex;
}
header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
width: 100%;
}
#logo {
margin-left: 15px;
}
#logo img {
display: block;
}
#forum-link {
max-width: 110px;
margin-right: 35px;
}
#forum-link a {
color: white;
text-decoration: none;
font-weight: bold;
font-size: x-large;
}
#media only screen and (orientation: portrait) {
html {
margin: 0;
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
header {
display: block;
width: 100%;
position: relative;
height: auto;
margin-bottom: 50px;
}
#logo {
margin: initial;
display: flex;
align-items: center;
justify-content: center;
}
#forum-link {
margin: initial;
max-width: initial;
background: #323232;
height: 27px;
position: absolute;
bottom: -50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#forum-link a {
font-weight: bold;
font-size: .9em;
}
#forum-link a:hover {
text-decoration: underline;
}
<body>
<header>
<div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
<div id="forum-link">Join our Forums!</div>
</header>
</body>
Just add margin: 0 in body :
html {
max-width: 780px;
margin: 0 auto;
}
body {
background-image: url('https://img.freepik.com/free-vector/retro-styled-pattern-background_1048-6593.jpg');
background-size: 116px;
background-repeat: repeat-x;
margin: 0;
}
header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
height:116px;
}
#logo {
margin-left: 15px;
}
#forum-link {
max-width: 110px;
margin-right: 35px;
}
#forum-link a {
color: white;
text-decoration: none;
font-weight: bold;
font-size: x-large;
}
#media only screen and (orientation: portrait) {
html {
margin: 0;
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
header {
display: block;
width: 100%;
position: relative;
height: auto;
margin-bottom: 50px;
}
#logo {
margin: initial;
display: flex;
align-items: center;
justify-content: center;
}
#forum-link {
margin: initial;
max-width: initial;
background: #323232;
height: 27px;
position: absolute;
bottom: -50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#forum-link a {
font-weight: bold;
font-size: .9em;
}
#forum-link a:hover {
text-decoration: underline;
}
<body>
<header>
<div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
<div id="forum-link">Join our Forums!</div>
</header>
</body>
You need to specify the width of your parents for it to center vertically. And then add text-align: center;. Change the styles of your #logo and #forum-link as below.
#logo {
flex: 1;
width: 50%;
text-align: center;
}
#forum-link {
max-width: 110px;
flex: 1;
width: 50%;
text-align: center;
}
I removed your margins because the preview here is very small and you wont notice that the elements were centered vertically. Feel free to put it back in your source code. Check code below
html {
max-width: 780px;
margin: 0 auto;
}
body {
background-image: url('https://img.freepik.com/free-vector/retro-styled-pattern-background_1048-6593.jpg');
background-size: 116px;
background-repeat: repeat-x;
}
header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 23px;
}
#logo {
flex: 1;
width: 50%;
text-align: center;
}
#forum-link {
max-width: 110px;
flex: 1;
width: 50%;
text-align: center;
}
#forum-link a {
color: white;
text-decoration: none;
font-weight: bold;
font-size: x-large;
}
#media only screen and (orientation: portrait) {
html {
margin: 0;
height: 100%;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
header {
display: block;
width: 100%;
position: relative;
height: auto;
margin-bottom: 50px;
}
#logo {
margin: initial;
display: flex;
align-items: center;
justify-content: center;
}
#forum-link {
margin: initial;
max-width: initial;
background: #323232;
height: 27px;
position: absolute;
bottom: -50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#forum-link a {
font-weight: bold;
font-size: .9em;
}
#forum-link a:hover {
text-decoration: underline;
}
<body>
<header>
<div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
<div id="forum-link">Join our Forums!</div>
</header>
</body>
Related
/* GLOBAL STYLES */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1{
Font-Family: 'Ovo', Serif;
font-size: 90px;
}
h2,h3,h4,h5,h6,p{
Font-Family: 'Quattrocento Sans', Sans-Serif;
}
:root{
--bg1: #E8E0D2;
--bg2: #9B9FAE;
--green: #5F6D45;
--font: #F5F1F1;
}
body{
width: 1920px;
max-width: 1920px;
background-color: var(--bg1);
}
.separator{
width: 80%;
margin: auto;
padding: 150px 0;
}
.line{
border-top: 1px solid var(--bg2);
}
html{
max-width: 1920px;
}
/* HEADER */
header{
width: 1920px;
height: 100px;
position: relative;
}
.header-container{
margin: auto;
width: 1520px;
height: inherit;
display: flex;
border-bottom: 1px solid black;
}
.header-container nav{
width: 50%;
height: inherit;
}
.logo{
position: relative;
bottom: 32px;
}
.nav-right{
display: flex;
justify-content: flex-end;
}
.nav-right ul{
width: 75%;
display: flex;
align-items: flex-end;
justify-content: space-between;
}
#nav-link{
display: flex;
display: inline-block;
}
#nav-link a{
float: right;
text-decoration: none;
color: black;
}
.nav-right h2{
font-size: 19px;
}
/* MAIN */
main{
display: flex;
flex-direction: column;
height: 800px;
width: 1920px;
margin: auto;
}
/* HERO */
.hero{
width: inherit;
height: inherit;
/* background-color: teal; */
}
.hero-container{
height: inherit;
display: flex;
justify-content: center;
}
#hero-half{
width: 100%;
/* border: 1px solid red; */
}
.hero-left{
display: flex;
justify-content: end;
}
.hero-left .container{
width: 79%;
height: 80%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.name-intro h2{
color: var(--green);
font-size: 18px;
}
.name-intro h2{
}
.info-box{
position: relative;
top: 100px;
width: 50%;
background-color: var(--green);
padding: 15px;
border-radius: 3px;
box-shadow:-20px -10px var(--bg2);
}
.slogan{
color: white;
font-size: 20px;
letter-spacing: 1.1px;
line-height: 1.3;
text-align: center;
}
.hero-right{
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.img-container{
display: flex;
justify-content: center;
align-items: center;
background-color: var(--green);
width: 650px;
height: 650px;
border-radius: 3px;
background-image: url('./bg texture3.jpg');
background-blend-mode: multiply;
}
.me-img{
position: relative;
right: 75px;
width: 400px;
height: 560px;
}
.me-img img{
width: inherit;
height: inherit;
}
I Use a separator to add space and a horizontal line between the different sections of my webpage so they aren't touching, but whenever I either add margin or padding to the bottom of it the entire width of the page grows a tiny bit and now there's the sidescroll option. The extra width also appears when I add bottom margin directly to the sections themselves. Any help would be appreciated!
I've tried adding max-width to the page, but it still expands.
In your body and header, try changing width: 1920px; to max-width: 100%;. Also, in "hero-left", you may want to change that to "max-width" as well. In most cases, you wouldn't want to use width: 100%;
Currently the text headings which are inside a flexbox (the three divs) are not aligning with the main headings on the rest of the page.
See Image Here
The issue appears to only take place with the character length of the text headings inside the flexbox of three divs are not the same.
See Image of Alignment when character length is the same
I've unsuccessfully tried css alignments, but they do not appear to have an effect. My desired outcome for the three divs is something like this:
See successful reference alignment example
The code is here:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
max-width: 100vw;
list-style: none;
scroll-behavior: smooth;
}
body {
height: 100%;
margin: 0;
background-color: white;
font-family: Poppins;
min-height: 100vh;
}
a {
color: black;
}
/* ----------------------------------------------------------Landing Page -------------------------------------*/
.full-height-grow {
height: 100%;
display: flex;
flex-direction: column;
}
section {
display: flex;
height: 100vh;
width: auto;
max-width: 80vw;
min-width: 75vw;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.about-container {
padding-top: 100px;
height: 100vh;
width: 90vw;
max-width: 90vw;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.about-img {
border-radius: 50%;
height: calc(80px + 40%);
width: auto;
}
.about-h1 {
font-family: 'Poppins', sans-serif;
color: rgb(255, 42, 95);
margin-top: 30px;
margin-right: -30px;
margin-left: -30px;
font-size:calc(12px + 0.8vw) ;
}
.about-h2 {
font-family: 'Poppins', sans-serif;
color: rgb(17, 17, 17);
margin-right: -30px;
margin-left: -30px;
font-size:calc(15px + 2vw) ;
font-weight: 500;
opacity: 0.9;
}
.about-desc {
font-family: Lora;
font-size:calc(10px + 1.2vw);
line-height: 1.8;
color: #888888;
text-align: center;
margin-left: 25vw;
margin-right: 25vw;
overflow:hidden;
z-index: 2;
width: auto;
}
.about-tasks-container {
align-self: center;
background-color: blanchedalmond;
max-width: 80vw;
width: 80vw;
display: flex;
justify-content: space-evenly;
text-align: center;
flex-direction: row;
flex-grow: 1;
}
.about-task-heading {
font-size: 80px;
}
.about-tasks-resources {
}
.about-tasks-learning {
}
<section class="about-section">
<div class="about-container" id="about">
<h2 class="about-h1"> ABOUT</h2>
<h3 class="about-h2">More About Me</h3>
<div class="about-tasks-container">
<div class="about-tasks-tutorials">
<h1 class="about-task-heading">Example</h1>
</div>
<div class="about-tasks-resources" >
<h1 class="about-task-heading">Exampler</h1>
</div>
<div class="about-tasks-learning">
<h1 class="about-task-heading">Examplers</h1>
</div>
</div>
</div>
</div>
</section>
(JSFiddle : https://jsfiddle.net/2cL5h4m6/9/)
Try this code
Idk if this is what you wanted but you can try it and you can see if it was the thing you looked for
* {
margin: 0;
padding: 0;
box-sizing: border-box;
max-width: 100vw;
list-style: none;
scroll-behavior: smooth;
}
body {
height: 100%;
margin: 0;
background-color: white;
font-family: Poppins;
min-height: 100vh;
}
a {
color: black;
}
/* ----------------------------------------------------------Landing Page -------------------------------------*/
.full-height-grow {
height: 100%;
display: flex;
flex-direction: column;
}
section {
display: flex;
height: 100vh;
width: auto;
max-width: 80vw;
min-width: 75vw;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.about-container {
padding-top: 100px;
height: 100vh;
width: 90vw;
max-width: 90vw;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.about-img {
border-radius: 50%;
height: calc(80px + 40%);
width: auto;
}
.about-h1 {
font-family: 'Poppins', sans-serif;
color: rgb(255, 42, 95);
margin-top: 30px;
margin-right: -30px;
margin-left: -30px;
font-size:calc(12px + 0.8vw) ;
}
.about-h2 {
font-family: 'Poppins', sans-serif;
color: rgb(17, 17, 17);
margin-right: -30px;
margin-left: -30px;
font-size:calc(15px + 2vw) ;
font-weight: 500;
opacity: 0.9;
}
.about-desc {
font-family: Lora;
font-size:calc(10px + 1.2vw);
line-height: 1.8;
color: #888888;
text-align: center;
margin-left: 25vw;
margin-right: 25vw;
overflow:hidden;
z-index: 2;
width: auto;
}
.about-tasks-container {
align-self: center;
background-color: blanchedalmond;
max-width: 100vw;
width: 100vw;
display: flex;
justify-content: space-evenly;
text-align: center;
flex-direction: row;
flex-grow: 0;
}
.about-task-heading {
font-size: 30px;
}
.about-tasks-resources {
}
.about-tasks-learning {
}```
Ok so first off I apologise if my title is not very clear! I'm fairly new to css and currently following the landing page project with freecodecamp, I'm at the point where I wanted to start adding media queries to my code (maybe should have added them as I went along). I'm using there example code as a reference to see what I should be doing, but it just seems that no matter what media queries I add the page doesn't respond how I expect it too, or it just messes up the whole css code!
Here is a link to my codepen - https://codepen.io/rorymx/pen/XWmbbzY
and this is some of the html and css from it.
<div id="wrapper">
<header id="header">
<div id="img-div">
<img id="header-img" src="https://i.pinimg.com/236x/2d/50/8b/2d508b7019bf7b8711673825c7bd3252.jpg">
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a> </li>
<li><a class="nav-link" href="#how-it-works">How it works</a> </li>
<li><a class="nav-link" href="#pricing">Pricing</a> </li>
</ul>
</nav>
</header>
</div>
please ignore the look its just temporary as the code is mainly what I'm playing about with.
For example. one of the media queries i was trying to add was
#media (max-width: 650px) header{flex-wrap: wrap;}
to the header
#media (max-width: 650px) {
nav {
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 50px;
}
}
which i got from the example code, which i played about with but it just seemed to mess everything up!
If anyone could shed some light as why this may be happening, or if i've not set some things up properly, or if the code is just complete rubbish and needs starting again!
I do not see a media query in the code example that you provided via the Codepen link (https://codepen.io/rorymx/pen/XWmbbzY) that you have provided. So, the question seems a bit unclear.
That said, from the way the code looks that you have included in your description above in addition to the context that you've provided from the code that you included from your Codepen link ... it could potentially be something as simple as the way you're selecting the nav element, but I can't say this conclusively with the information given.
What I will say, however, is that if I add the following code to the bottom of the stylesheet you have provided from Codepen, it works great! Here's what I wrote:
body{
margin: 0px;
padding: 0px;
backgroun-color:
}
#wrapper{
display: flex;
height: 100vh;
flex-direction: column;
margin: 0px;
padding: 0px;
width: 100%;
}
#header{
width: 100%;
height: 100px;
background-color: grey;
position: fixed;
top: 0;
display: flex;
justify-content: space-around;
align-items: center;
}
#img-div{
display: flex;
position: relative;
background-color: grey;
width: 50%;
height: 100%;
}
#header-img{
display: flex;
position: relative;
height: 100%;
left: 25%;
}
#nav-bar > ul{
display: flex;
justify-content: space-around;
float: right;
flex-direction: row;
width: 30vw;
list-style: none;
font-size: 20px;
}
#body{
flex: 1;
display: block;
background-color: #B2B2B2;
padding-top: 100px;
width: 100vw;
}
#title{
text-align: center;
}
#submit-sec{
margin: 10px;
display:flex;
justfy-content: center;
flex-directon: column;
text-align: center;
align-items: center;
height: 100px;
}
form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto;
}
#email{
width: 25vw;
height: 10vh;
font-size: 18px;
}
#submit{
background-color: yellow;
font-size: 20px;
font-weight: bold;
padding: 5px 15px;
border-radius: 5px;
width: 50%;
margin: 10px 0px;
}
#submit:hover{
background-color: #C4C100 ;
transition: background-color 0.5s;
cursor: pointer;
}
#features{
display: flex;
flex-direction: column;
justify-content: center;
margin: 0px;
padding: 2px;
width: 100vw;
align-items: center;
}
.feature-div{
display: flex;
flex-direction: column;
justify-content: center;
align-items: left;
width: 60vw;
margin: 15px 0px;
}
.feature-div > h2{
margin: 2px 0px;
}
.feature-div > p{
font-size: 17px;
margin: 2px 0px;
}
#how-it-works{
display: flex;
justify-content: center;
margin: 20px 0px;
}
iframe{
max-width: 540px;
width: 100vw;
}
#pricing{
display: flex;
justify-content: center;
width: 100%;
margin: 10px 0px;
}
.price-sec{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: calc(100% / 3);
border: 2px solid #000000;
margin: 50px;
padding: 0px;
border-radius: 4px;
background-color: #FBEDA6;
}
.price-sec > .price-head{
font-size: 20px;
font-weight: bold;
background-color: #E8E8E8;
width: 100%;
text-transform: uppercase;
padding: 10px 0px;
}
.price-sec > ol{
padding: 0px;
}
ol > li{
font-size: 20px;
list-style: none;
padding: 2px;
}
.price-sec > button{
border: 0;
margin: 10px;
font-weight: 400;
font-size: 20px;
padding: 5px 10px;
background-color: #FD0008;
color: white;
}
.price-sec > button:hover{
background-color: #971B1B;
transition: background-color 0.5s;
cursor: pointer;
}
#footer{
background-color: grey;
margin-top: 0px;
padding: 2px;
}
#footer > ul{
display: flex;
justify-content: flex-end;
margin: 5px;
}
#footer > ul > li{
margin: 0px 5px;
padding: 0px 10px;
list-style: none;
}
#footer > span{
display: flex;
justify-content: flex-end;
margin: 5px;
padding: 0px;
}
#media (max-width: 600px) {
nav {
background-color: red;
}
}
Adding my test code seems to work fine from a technical standpoint since a part of the nav element changes its background color from transparent to red when I shrink the window down smaller than a width of 600px as reflected by the media query I wrote. As for the code that you have provided, I was able to successfully add that code as well in the following way:
body{
margin: 0px;
padding: 0px;
backgroun-color:
}
#wrapper{
display: flex;
height: 100vh;
flex-direction: column;
margin: 0px;
padding: 0px;
width: 100%;
}
#header{
width: 100%;
height: 100px;
background-color: grey;
position: fixed;
top: 0;
display: flex;
justify-content: space-around;
align-items: center;
}
#img-div{
display: flex;
position: relative;
background-color: grey;
width: 50%;
height: 100%;
}
#header-img{
display: flex;
position: relative;
height: 100%;
left: 25%;
}
#nav-bar > ul{
display: flex;
justify-content: space-around;
float: right;
flex-direction: row;
width: 30vw;
list-style: none;
font-size: 20px;
}
#body{
flex: 1;
display: block;
background-color: #B2B2B2;
padding-top: 100px;
width: 100vw;
}
#title{
text-align: center;
}
#submit-sec{
margin: 10px;
display:flex;
justfy-content: center;
flex-directon: column;
text-align: center;
align-items: center;
height: 100px;
}
form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto;
}
#email{
width: 25vw;
height: 10vh;
font-size: 18px;
}
#submit{
background-color: yellow;
font-size: 20px;
font-weight: bold;
padding: 5px 15px;
border-radius: 5px;
width: 50%;
margin: 10px 0px;
}
#submit:hover{
background-color: #C4C100 ;
transition: background-color 0.5s;
cursor: pointer;
}
#features{
display: flex;
flex-direction: column;
justify-content: center;
margin: 0px;
padding: 2px;
width: 100vw;
align-items: center;
}
.feature-div{
display: flex;
flex-direction: column;
justify-content: center;
align-items: left;
width: 60vw;
margin: 15px 0px;
}
.feature-div > h2{
margin: 2px 0px;
}
.feature-div > p{
font-size: 17px;
margin: 2px 0px;
}
#how-it-works{
display: flex;
justify-content: center;
margin: 20px 0px;
}
iframe{
max-width: 540px;
width: 100vw;
}
#pricing{
display: flex;
justify-content: center;
width: 100%;
margin: 10px 0px;
}
.price-sec{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: calc(100% / 3);
border: 2px solid #000000;
margin: 50px;
padding: 0px;
border-radius: 4px;
background-color: #FBEDA6;
}
.price-sec > .price-head{
font-size: 20px;
font-weight: bold;
background-color: #E8E8E8;
width: 100%;
text-transform: uppercase;
padding: 10px 0px;
}
.price-sec > ol{
padding: 0px;
}
ol > li{
font-size: 20px;
list-style: none;
padding: 2px;
}
.price-sec > button{
border: 0;
margin: 10px;
font-weight: 400;
font-size: 20px;
padding: 5px 10px;
background-color: #FD0008;
color: white;
}
.price-sec > button:hover{
background-color: #971B1B;
transition: background-color 0.5s;
cursor: pointer;
}
#footer{
background-color: grey;
margin-top: 0px;
padding: 2px;
}
#footer > ul{
display: flex;
justify-content: flex-end;
margin: 5px;
}
#footer > ul > li{
margin: 0px 5px;
padding: 0px 10px;
list-style: none;
}
#footer > span{
display: flex;
justify-content: flex-end;
margin: 5px;
padding: 0px;
}
#media (max-width: 650px) {
nav {
background-color: red;
}
header {
flex-wrap: wrap;
}
nav {
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 50px;
}
}
If you add this code to your stylesheet in the Codepen that you have provided, you will see that the code is in fact working the way it is written. As far as what you wish to achieve, however, this may not be the solution that you are looking for. With a little more guidance on what the end result you wish to achieve is, I'm happy to continue to guide and help where I can.
Try this:
#media (max-width: 650px) {
#nav-bar > ul {
flex-direction: column;
}
}
Here's my issue:
I am trying to create a side-by-side ad where the left side is just an image, and the right side is a background image with an image, text, and 5 responsive flexgrid buttons nested on top of it.
I figured out how to get everything layered on top of the background image, but right now I cannot for the life of me figure out how to get the background image container to scale with the image to its left. I have been tweaking percentages and margins for hours now trying to figure it out.
I managed to get it extremely close on a certain screen size (2560x1440) but as the window is resized the background image container ends up resizing differently than the image. One solution I thought of is just creating like 10 media query breakpoints where I tweak the margins and paddings to make the images the same size, but honestly, I'd rather find a more efficient and cleaner way to do it.
Please don't judge my code, it's incredibly messy I know! I am still learning.
https://jsfiddle.net/y8nz39gL/3/
DESIRED RESULT
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
max-width: 100%;
background-image: url('https://cdn.shopify.com/s/files/1/1017/0995/files/Luckyleo-Custom-Print-Floral-Background.jpg?13173226259512623367');
background-position: 50 50;
background-repeat: no-repeat;
background-attachment: fixed;
padding: 50px 0px 50px 0px;
}
.flex-container2 {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
max-width: 100%;
margin-bottom: -100px;
}
/* NEW */
.flexbottommargin {
margin-bottom: -50px;
}
.less-space-bottom {
margin-bottom: -20px !important;
}
/*NEW OVER*/
.flex-container20 {
padding-top: 35px;
padding-bottom: 35px;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
max-width: 100%;
margin-bottom: -75px;
}
.flex-container21 {
padding-top: 35px;
padding-bottom: 35px;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
max-width: 100%;
margin-bottom: -75px;
}
.flex-container22 {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
max-width: 100%;
margin-bottom: -100px;
margin-top: -2px;
}
.flex-container23 {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
max-width: 100%;
margin-bottom: -100px;
margin-top: -2px;
}
.flex-container-content2 img {
padding-bottom: 15px;
}
.luckyleospacer {
padding-bottom: 20px;
}
.extrabottompadding {
padding-bottom: 12px;
}
.extrabottompadding2 {
padding-bottom: 20px;
}
/* NEW */
.flex-container-content-newyears {
padding-top: 20px;
width: 71%;
/*NEW LINE*/
align-items: center;
align-self: center;
justify-content: center;
padding-bottom: 20px;
text-align: center;
}
.flex-container-content-newyears-banner {
padding-top: 20px;
width: 64%;
align-items: center;
align-self: center;
justify-content: center;
padding-bottom: 20px;
text-align: center;
}
/*NEW OVER*/
.flex-container-content {
padding-top: 35px;
width: 60%;
align-items: center;
align-self: center;
justify-content: center;
padding-bottom: 10px;
}
.flex-container-content2 {
padding-top: 35px;
width: 75%;
align-items: center;
align-self: center;
justify-content: center;
padding-bottom: 35px;
text-align: center;
}
.flex-container-content22 {
padding-top: 35px;
width: 100%;
align-items: center;
align-self: center;
justify-content: center;
}
.flex-container-content23 {
width: 100%;
align-items: center;
align-self: center;
justify-content: center;
}
.flex-container-content23 {
padding-top: 35px;
width: 100%;
align-items: center;
align-self: center;
justify-content: center;
}
.flex-container-content24 {
width: 100%;
align-items: center;
align-self: center;
justify-content: center;
padding-bottom: 55px;
text-align: center;
}
.flex-container-content h1 {
font-family: "Asap", sans-serif;
font-size: 2.4vw;
color: #292929 !important;
text-transform: none !important;
font-weight: 600;
line-height: 1.3em;
letter-spacing: 0px;
padding: 4%;
}
.flexgrid-cell {
margin-bottom: 0px;
}
.flex-container-content h2 {
font-family: "Lavanderia", sans-serif !important;
font-size: 4vw;
color: #292929 !important;
text-transform: none !important;
font-weight: 400;
line-height: 1.4em;
margin-bottom: 35px;
letter-spacing: 0px;
}
.flex-container-content2 h1 {
font-family: "Lavanderia", serif !important;
font-size: 50px;
font-size: 3.5vw;
color: #292929 !important;
text-transform: none !important;
font-weight: 500;
line-height: 1.3em;
letter-spacing: 0px;
}
.flex-container-content2 p {
padding-top: 20px;
color: #292929 !important;
text-transform: none !important;
padding-bottom: 20px;
}
.flex-container {
max-width: 100%;
margin: auto;
//border: 1px solid red;
}
/*Basic flexgrid Styles*/
.flexgrid {
display: flex;
flex-flow: row;
flex-wrap: wrap;
}
.u-textCenter {
text-align: center;
align-items: center;
align-self: center;
justify-content: center;
}
.flexgrid-cell {
width: 100%;
flex: 1;
}
.flexgrid-cell img {
width: 100%;
}
/* Justify per row*/
.flexgrid--right {
justify-content: flex-end;
}
.flexgrid--center {
justify-content: center;
}
/* Alignment per row */
.flexgrid--top {
align-items: flex-start;
}
.flexgrid--bottom {
align-items: flex-end;
}
.flexgrid--center {
align-items: center;
}
/* Alignment per cell */
.flexgrid-cell--top {
align-self: flex-start;
}
.flexgrid-cell--bottom {
align-self: flex-end;
}
.flexgrid-cell--center {
align-self: center;
}
/*===========================================*/
/* Base classes for all media - Mobile first */
.flexgrid--cols-2 > .flexgrid-cell {
flex: 0 0 100%;
}
.flexgrid--cols-3 > .flexgrid-cell {
flex: 0 0 100%;
}
.flexgrid--cols-4 > .flexgrid-cell {
flex: 0 0 100%;
}
.flexgrid--cols-6 > .flexgrid-cell {
flex: 0 0 calc(50% - #{$gutter});
}
.flexgrid--cols-12 > .flexgrid-cell {
flex: 0 0 calc(33.3333% - #{$gutter});
}
/* One of -- columns*/
.flexgrid--1of2 > .flexgrid-cell,
.flexgrid--1of4 > .flexgrid-cell:first-of-type,
.flexgrid--1of3 > .flexgrid-cell:first-of-type {
flex: 0 0 100%;
}
.flexgrid--1of6 > .flexgrid-cell:first-of-type {
flex: 0 0 50%;
}
.flexgrid--fit > .flexgrid-cell {
flex: 1;
}
.flexgrid--full > .flexgrid-cell {
flex: 0 0 100%;
}
/* Tablet (medium) screens */
#media (min-width: 30em) {
.flexgrid--cols-4 > .flexgrid-cell {
flex: 0 0 calc(50% - #{$gutter});
}
.flexgrid--cols-6 > .flexgrid-cell {
flex: 0 0 calc(33.3333% - #{$gutter});
}
.flexgrid--cols-12 > .flexgrid-cell {
flex: 0 0 calc(16.6666% - #{$gutter});
}
.flexgrid--holly-grail {
.aside {
flex: 1 calc(25% - #{$gutter});
}
}
.flexgrid--1of2 > .flexgrid-cell {
flex: 0 0 50%;
}
.flexgrid--1of6 > .flexgrid-cell:first-of-type {
flex: 0 0 30%;
}
.flexgrid--1of4 > .flexgrid-cell:first-of-type {
flex: 0 0 50%;
}
.flexgrid--1of3 > .flexgrid-cell:first-of-type {
flex: 0 0 100%;
}
}
/* Large screens */
#media (min-width: 48em) {
.flexgrid--cols-2 > .flexgrid-cell,
.flexgrid--cols-3 > .flexgrid-cell,
.flexgrid--cols-4 > .flexgrid-cell,
.flexgrid--cols-6 > .flexgrid-cell,
.flexgrid--cols-12 > .flexgrid-cell {
flex: 1;
}
.flexgrid--1of2 > .flexgrid-cell {
flex: 0 0 50%;
}
.flexgrid--1of6 > .flexgrid-cell:first-of-type {
flex: 0 0 16.6666%;
}
.flexgrid--1of4 > .flexgrid-cell:first-of-type {
flex: 0 0 25%;
}
.flexgrid--1of3 > .flexgrid-cell:first-of-type {
flex: 0 0 30%;
}
.flexgrid--gutters.flexgrid--nested {
.flexgrid-cell:first-of-type {
.Demo {
margin-right: 0;
}
}
}
}
/* 2/3rds COLUMN SPLIT */
/* NEW */
.flexgrid--half-l {
flex-basis: 49.1%;
max-width: 49.1%;
margin-right: .6%;
}
.flexgrid--half-r {
flex-basis: 50%;
max-width: 50%;
margin-left: .4%;
}
.flexgrid--1of3 {
flex-basis: 57.188%;
max-width: 57.188;
}
.desktopshowtop {
padding-top: 57px;
}
.desktopshowtopbanner {
padding-top: 57px;
}
/* NEW */
#media only screen and (min-width: 300px) and (max-width: 1024px) {
.flex-container-content h2 {
font-size: 12vw;
}
.flex-container-content h1 {
font-size: 4.2vw;
}
.flex-container-content2 h1,
h2 {
font-size: 40px;
font-size: 6.8vw;
}
}
#media only screen and (min-width: 300px) and (max-width: 419px) {
.flex-container-content2 h1,
h2 {
font-size: 40px;
font-size: 8vw;
}
}
#media only screen and (min-width: 300px) and (max-width: 1267px) {
.whyispaddinghere {
margin-bottom: -115px;
}
.flex-container-content {
width: 90%;
}
.flex-container-content2 {
width: 95%;
}
}
#media only screen and (min-width: 1025px) {
.flex-container21 {
display: none;
}
.flex-container23 {
display: none;
}
}
#media only screen and (min-width: 300px) and (max-width: 1024px) {
.flex-container20 {
display: none;
}
.flex-container22 {
display: none;
}
}
/* NEW LINES - 2018 */
/* With gutters*/
$gutter: 1em;
.flexgrid--gutters {
margin-left: -$gutter;
.flexgrid-cell {
padding-left: $gutter;
}
.flexgrid--nested {
.flexgrid-cell:first-of-type {
margin-right: 1em;
}
}
}
}
.flex-container-content-newyears {
padding-top: 20px;
width: 75%;
/*NEW LINE*/
align-items: center;
align-self: center;
justify-content: center;
padding-bottom: 20px;
text-align: center;
}
.flex-container-newyears {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
max-width: 100%;
}
.content-1of5:hover {
background-color: #a36871;
}
.content-1of5 {
background-color: #8d5760;
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
font-family: "Asap", sans-serif;
align-self: center;
justify-content: center;
align-items: center;
padding-top: 6px;
padding-bottom: 6px;
margin-left: 7px;
margin-right: 7px;
margin-bottom: 7px;
color: #fff;
}
.content-1of5 a {
color: #fff !important;
}
.express-promo-right-side {
background-image: url("https://cdn.shopify.com/s/files/1/2185/4785/files/Express-ShopYourSizebg.jpg?4927879912789524270");
background-position: 0 0;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
margin: auto;
}
.express-promo-right-side img {
padding-top: 5.4%;
margin-top: 12px;
max-width: 40% !important;
margin-bottom: -5%;
}
.express-buttons-margin-top {
padding: 14.0% 2% 4.0% 2%;
margin-bottom: -9px;
}
.flexgrid--half-r {
margin-bottom: 1%;
margin-top: 1%;
}
.shopsizefrontpage {
padding-top: 10%;
margin-bottom: -10%;
font-size: 5vw !important;
line-height: 1.0em;
font-family: 'Poppins';
color: #fff !important;
font-weight: 800;
}
.shopsizefrontpagered {
color: #8d5760 !important;
}
.Grid--nested {
.Grid-cell:first-of-type {
.Demo {
margin-right: 1em;
}
}
}
}
\
<div class="flex-container-newyears">
<div class="flex-container-content-newyears">
<div class="flexgrid flexgrid--gutters flexgrid--cols-3 u-textCenter">
<div class="flexgrid--half-l flexgrid-cell">
<img src="https://cdn.shopify.com/s/files/1/2185/4785/files/Express-ShopYourSize.jpg?4927879912789524270" alt="Luckyleo How to Customize - Step 1" />
</div>
<div class="flexgrid--half-r flexgrid-cell express-promo-right-side"><img src="https://cdn.shopify.com/s/files/1/2185/4785/files/Express-ShopYourSize2-logo.png?5263606338478632237" />
<div class="flexgrid-cell shopsizefrontpage">SHOP <span class="shopsizefrontpagered"> YOUR SIZE</span></div>
<div class="flexgrid flexgrid--gutters flexgrid--cols-4 u-textCenter express-buttons-margin-top">
<div class="flexgrid-cell">
<a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos">
<div class="content-1of5">XXS</div>
</a>
</div>
<div class="flexgrid-cell">
<a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos">
<div class="content-1of5">XXS</div>
</a>
</div>
<div class="flexgrid-cell">
<a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos">
<div class="content-1of5">XXS</div>
</a>
</div>
<div class="flexgrid-cell">
<a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos">
<div class="content-1of5">XXS</div>
</a>
</div>
<div class="flexgrid-cell">
<a href="https://www.luckyleodancewear.com/collections/luckyleoexpress-extra-extra-small-lucky-leos">
<div class="content-1of5">XXS</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Rather than trying to sync behavior of a background-image with an <img>, just use a background-image over the entire element and control the proportion specifying height or min-height at different widths.
Here's a starter. As a side note, I find your markup way too complex for the desired outcome, so I simplified it a bit.
body {
background-color: #f5f5f5;
margin: 0;
font-family: sans-serif;
}
.newyears {
background: url(https://i.stack.imgur.com/oK65C.jpg) no-repeat 50% 50% /cover;
display: flex;
justify-content: flex-end;
min-height: 30vw;
}
.nys-content {
flex: 0 0 50%;
display: flex;
padding: 3rem 0;
flex-direction: column;
align-items: center;
justify-content: center;
border-left: 10px solid white;
}
.nys-content img {
width: 150px;
margin-bottom: 1.5rem;
}
.nys-links {
display: flex;
align-items: center;
justify-content: center;
}
.nys-links a {
background-color: #900;
color: white;
text-decoration: none;
margin: 3px;
padding: .75rem;
flex: 1 .1 20%;
text-align: center;
}
#media (max-width: 768px) {
.nys-links, .nys-links a {
width: 60%;
}
.nys-links {
flex-direction: column;
}
}
#media (max-width: 540px) {
.nys-content {
flex: 1 0 auto;
border-left: none;
}
}
<div class="newyears">
<div class="nys-content">
<img src="https://cdn.shopify.com/s/files/1/2185/4785/files/Express-ShopYourSize2-logo.png?5263606338478632237">
<div class="nys-links">
XXS
XXS
XXS
XXS
XXS
</div>
</div>
</div>
If you prefer jsFiddle, here it is.
Note: This answer does not attempt to sync scaling of background-image with an <img> tag. It's based on comments below the question on how I'd tackle this task. Syncing the two above can be achieved using transforms. Here's an example of how to achieve it.
I've got a header menu which I'm trying to make responsive using CSS flex.
The flex functionality works fine, but the height of the items are always huge for some reason.
The code I'm using is below (the borders are just there to show the elements heights).
The height of the title <div> should shrink to match that of the <p> element. Anybody know how to do this?
#header {
background: #526272;
width: 100%;
max-width: 100vw;
height:auto;
position: fixed;
text-align: center;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-around;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
align-items: center;
color:white;
}
html {
margin: 0;
font-family: 'Raleway', sans-serif;
}
body {
margin: 0;
}
#title {
text-align: center;
padding: 1em;
vertical-align: middle;
font-family: 'Oswald', sans-serif;
font-size: 2em;
border-right: solid red;
width: auto;
height: auto;
}
p {
border-right: solid blue;
}
#menuBar {
height: 100%;
position: relative;
text-align: center;
display: block;
padding: 1em;
vertical-align: middle;
}
#social {
height: auto;
position: relative;
text-align: center;
display: block;
padding: 1em;
vertical-align: middle;
}
<body>
<div id="header">
<div id="title"><p>EXAMPLE SITE NAME</p></div>
<div id="menuBar"><p>Menu</p>
</div>
<div id="social"><p>Socials</p></div>
</div>
</body>
You have padding: 1em on the div.title container. That creates a lot of space on all four sides.
Try this instead:
.title { padding: 0 1em; } /* padding only on the left and right */
Also, p elements come with default margins set by the browser. Make this adjustment:
p { margin: 0; }
#header {
background: #526272;
width: 100%;
max-width: 100vw;
height: auto;
position: fixed;
text-align: center;
display: flex;
justify-content: space-around;
flex-flow: row wrap;
align-items: center;
color: white;
}
html {
margin: 0;
font-family: 'Raleway', sans-serif;
}
body {
margin: 0;
}
#title {
text-align: center;
padding: 0 1em; /* adjusted */
vertical-align: middle;
font-family: 'Oswald', sans-serif;
font-size: 2em;
border-right: solid red;
width: auto;
height: auto;
}
p {
margin: 0; /* new */
border-right: solid blue;
}
#menuBar {
height: 100%;
position: relative;
text-align: center;
display: block;
padding: 1em;
vertical-align: middle;
}
#social {
height: auto;
position: relative;
text-align: center;
display: block;
padding: 1em;
vertical-align: middle;
}
<div id="header">
<div id="title">
<p>EXAMPLE SITE NAME</p>
</div>
<div id="menuBar">
<p>Menu</p>
</div>
<div id="social">
<p>Socials</p>
</div>
</div>