I want to make this responsive design using html and css with flexbox:
this is my code:
span {
font-weight: bold;
color: aqua;
}
.parent {
display: flex;
width: 100%;
height: 100px;
background-color: white;
justify-content: space-around;
align-items: center;
}
.child {
display: flex;
width: 18%;
height: 71px;
background-color: #eee;
align-items: center;
justify-content: center;
}
/*small screen*/
#media (max-width: 991px) {
span {
font-weight: bold;
color: black;
}
.parent {
display: flex;
width: 100%;
background-color: white;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.child {
display: flex;
width: 100%;
height: 71px;
background-color: #eee;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
}
/*medium screen*/
#media (min-width: 992px) {
span {
font-weight: bold;
color: red;
}
.parent {
display: flex;
width: 100%;
background-color: white;
align-items: center;
flex-wrap: wrap;
}
.child {
display: flex;
width: 45%;
height: 71px;
background-color: #eee;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
}
/*large screen*/
#media (min-width: 1200px) {
span {
font-weight: bold;
color: aqua;
}
.parent {
display: flex;
width: 100%;
height: 100px;
background-color: white;
justify-content: space-around;
align-items: center;
}
.child {
display: flex;
width: 18%;
height: 71px;
background-color: #eee;
align-items: center;
justify-content: center;
}
}
<div class="parent">
<div class="child"><span>Product one</span>This Is Product</div>
<div class="child"><span>Product two</span>This Is Product</div>
<div class="child"><span>Product three</span>This Is Product</div>
<div class="child"><span>Product four</span>This Is Product</div>
</div>
there is many differences between my code and the design above
how can I fix the problems in the code to have like this design?
small screen: max-width: 991px.
medium screen: min-width: 992px.
large screen: min-width: 1200px.
You should add flex-direction:column; to .child class.
Related
The fourth block's red cards (the block on middle right of the image) will not respond to look like this image in figma.
They currently look like this on my live server from VScode.
Here is my HTML.
Below is my latest effort in CSS.
I have been trying to fix this since last Wednesday.
I'm completely new to this field and this is my first class (front end web dev).
What am I fundamentally misunderstanding here?
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 1152px;
margin: auto;
background-color: #370617;
}
.container {
background-color: #F48C06;
border: none;
border-radius: 8px;
width: 468px;
height: 160px;
position: relative;
margin: 20px;
display: flex;
}
.card {
background-color:#9D0208;
border: none;
border-radius: 4px;
width: 78px;
height: 78px;
margin: 15px;
display: flex;
justify-content: center;
align-items: center;
}
.first-block {
display: flex;
justify-content: flex-start;
align-items: flex-end;
width: 468px;
height: 160px;
margin: 20px
}
.second-block {
display: flex;
justify-content: center;
align-items: center;
width: 468px;
height: 160px;
margin: 20px;
}
.sb-cardone {
height: 120px;
}
.sb-cardtwo {
height: 120px;
}
.sb-cardthree {
height: 120px;
}
.third-block{
display: flex;
justify-content: flex-end;
align-items: center;
}
.fourth-block {
display: flex;
width: 468px;
height: 160px;
}
.fb-cardone {
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-top: 20px;
margin-left: 20px;
}
.fb-cardtwo {
display: flex;
justify-content: center;
align-self: center;
}
.fb-cardthree {
display: flex;
justify-content: flex-end;
align-self: flex-end;
}
body {
background-color: #370617;;
margin: 0;
min-height: 100vh;
}
I'm making web-site , and i need make adaptive site. So i began use media-quires and got a trouble. When screen resolution has been changing in example since 2560px to 1920px , some styles remain in site, however they hasn't written in code CSS, why ?
#media only screen and (max-width: 2560px ) {
body {
background-color: #344B56;
color: white;
font-family: Montserrat;
margin: 0px;
padding-top: 20px;
}
.container {
margin: 0 auto;
}
.info {
display: flex;
justify-content: space-around;
align-items: flex-start;
padding-bottom: 5px;
}
.company {
text-decoration: none;
color: white;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
font-size: 30px;
text-align: center;
}
.company p {
margin: 0px;
}
.hours, .adress, .callback {
display: flex;
align-items: flex-start;
}
.logo {
width: 50px;
padding-top: 12px;
padding-right: 10px;
}
.navbar {
display: flex;
justify-content: space-evenly;
padding: 20px;
border-top: 1px white solid;
border-radius: 50px;
}
.completed {
font-size: 20px;
font-family: Montserrat;
border-bottom: 2px skyblue solid;
border-radius: 5px;
margin: 0px;
padding: 0px;
}
.navbar a {
letter-spacing: -2px;
color: white;
font-size: 20px;
font-family: Montserrat;
text-decoration: none;
}
.navbar a:hover {
color: skyblue;
}
.company_info {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #323a42;
}
.company_text {
display: flex;
flex-direction: column;
width: 500px;
padding: 50px;
}
.infoCompany {
background-image: url("./images/companyBack.jpeg");
background-position: center center;
background-size: cover;
width: 100%;
height: 600px;
}
.infoCompany__Text {
display: flex;
flex-direction: column;
color: white;
width: 100%;
font-size: 26px;
}
.infoCompany__Text_Company {
display: flex;
margin-top: 100px;
margin-left: 200px;
}
.Service {
margin-top: 50px;
margin-left: 200px;
margin-right: 200px;
color: white;
font-size: 24px;
}
.Service__Products {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.Service__Products_Product {
display: flex;
flex-direction: column;
margin-top: 50px;
}
.Service__Products_Product:not(first-child) {
margin-left: 150px;
}
.Product__img {
width: 500px;
height: 402px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
.Product__DownPartCard {
display: flex;
}
.Product__LeftDivCard {
width: 24px;
height: 98px;
background-color: #1A81AD;
}
.Product__NameCardDiv {
width: 476px;
height: 98px;
background: white;
}
.Product__DownPartCard_Text {
font-size: 18px;
display: flex;
color: black;
padding-left: 15px;
padding-top: 30px;
}
.Garant {
color: white;
margin-top: 100px;
margin-left: 200px;
margin-right: 200px;
color: white;
font-size: 24px;
}
.Garant__Garants {
margin-top: 70px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.Garant__Card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.Gatant__Card_Img {
width: 150px;
height: 150px;
}
.Gatant__Card_Text {
font-size: 16px;
}
footer {
margin-top: 70px;
position: absolute;
width: 100%;
border-top: 1px white solid;
}
.invisible {
opacity: 0;
}
}
#media only screen and (max-width: 1920px ) {
body {
background-color: #344B56;
color: white;
font-family: Montserrat;
margin: 0px;
padding-top: 20px;
}
.container {
margin: 0 auto;
}
.info {
display: flex;
justify-content: space-around;
align-items: flex-start;
padding-bottom: 5px;
}
.company {
text-decoration: none;
color: white;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
font-size: 30px;
text-align: center;
}
.company p {
margin: 0px;
}
.hours, .adress, .callback {
display: flex;
align-items: flex-start;
}
.logo {
width: 50px;
padding-top: 12px;
padding-right: 10px;
}
.navbar {
display: flex;
justify-content: space-evenly;
padding: 20px;
border-top: 1px white solid;
border-radius: 50px;
}
.completed {
font-size: 20px;
font-family: Montserrat;
border-bottom: 2px skyblue solid;
border-radius: 5px;
margin: 0px;
padding: 0px;
}
.navbar a {
letter-spacing: -2px;
color: white;
font-size: 20px;
font-family: Montserrat;
text-decoration: none;
}
.navbar a:hover {
color: skyblue;
}
.company_info {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #323a42;
}
.company_text {
display: flex;
flex-direction: column;
width: 500px;
padding: 50px;
}
.infoCompany {
background-image: url("./images/companyBack.jpeg");
background-position: center center;
background-size: cover;
width: 100%;
height: 600px;
}
.infoCompany__Text {
display: flex;
flex-direction: column;
color: white;
width: 100%;
font-size: 26px;
}
.infoCompany__Text_Company {
display: flex;
margin-top: 100px;
margin-left: 200px;
}
.Service {
margin-top: 50px;
margin-left: 200px;
margin-right: 200px;
color: white;
font-size: 24px;
}
.Service__Products {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.Service__Products_Product {
display: flex;
flex-direction: column;
margin-top: 50px;
}
.Product__img {
width: 400px;
height: 302px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
.Product__DownPartCard {
display: flex;
}
.Product__LeftDivCard {
width: 12px;
height: 98px;
background-color: #1A81AD;
}
.Product__NameCardDiv {
width: 388px;
height: 98px;
background: white;
}
.Product__DownPartCard_Text {
font-size: 15px;
display: flex;
color: black;
padding-left: 15px;
padding-top: 30px;
}
.Garant {
color: white;
margin-top: 100px;
margin-left: 200px;
margin-right: 200px;
color: white;
font-size: 24px;
}
.Garant__Garants {
margin-top: 70px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.Garant__Card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.Gatant__Card_Img {
width: 150px;
height: 150px;
}
.Gatant__Card_Text {
font-size: 16px;
}
footer {
margin-top: 70px;
position: absolute;
width: 100%;
border-top: 1px white solid;
}
.invisible {
opacity: 0;
}
}
#media only screen and (max-width: 1500px) {
body {
background-color: #344B56;
color: white;
font-family: Montserrat;
margin: 0px;
padding-top: 20px;
}
.container {
margin: 0 auto;
}
.info {
display: flex;
justify-content: space-around;
align-items: flex-start;
padding-bottom: 5px;
}
.company {
text-decoration: none;
color: white;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
font-size: 30px;
text-align: center;
}
.company p {
margin: 0px;
}
.hours, .adress, .callback {
display: flex;
align-items: flex-start;
}
.logo {
width: 50px;
padding-top: 12px;
padding-right: 10px;
}
.navbar {
display: flex;
justify-content: space-evenly;
padding: 20px;
border-top: 1px white solid;
border-radius: 50px;
}
.completed {
font-size: 20px;
font-family: Montserrat;
border-bottom: 2px skyblue solid;
border-radius: 5px;
margin: 0px;
padding: 0px;
}
.navbar a {
letter-spacing: -2px;
color: white;
font-size: 20px;
font-family: Montserrat;
text-decoration: none;
}
.navbar a:hover {
color: skyblue;
}
.company_info {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #323a42;
}
.company_text {
display: flex;
flex-direction: column;
width: 500px;
padding: 50px;
}
.infoCompany {
background-image: url("./images/companyBack.jpeg");
background-position: center center;
background-size: cover;
width: 100%;
height: 600px;
}
.infoCompany__Text {
display: flex;
flex-direction: column;
color: white;
width: 100%;
font-size: 26px;
}
.infoCompany__Text_Company {
display: flex;
margin-top: 100px;
margin-left: 200px;
}
.Service {
color: white;
font-size: 24px;
text-align: center;
}
.Service__Products {
display: flex;
flex-wrap: wrap;
}
.Service__Products_Product {
width: 100%;
display: flex;
flex-direction: column;
margin: 50px 0 0 0;
}
.Product__img {
width: 400px;
height: 302px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
.Product__downPartCard {
display: flex;
}
.Product__leftDivCard {
width: 12px;
height: 98px;
background-color: #1A81AD;
}
.Product__NameCardDiv {
width: 388px;
height: 98px;
background: white;
}
.Product__DownPartCard_Text {
font-size: 15px;
display: flex;
color: black;
padding-left: 15px;
padding-top: 30px;
}
.Garant {
color: white;
margin-top: 100px;
margin-left: 200px;
margin-right: 200px;
color: white;
font-size: 24px;
}
.Garant__Garants {
margin-top: 70px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.Garant__Card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.Gatant__Card_Img {
width: 150px;
height: 150px;
}
.Gatant__Card_Text {
font-size: 16px;
}
footer {
margin-top: 70px;
position: absolute;
width: 100%;
border-top: 1px white solid;
}
.invisible {
opacity: 0;
}
}
So "margin-left: 150px ;" from media 2560px somehow using in 1920px, why ?
.Service__products_Product:not(first-child) {
margin-left: 150px ;
}
/* Extra small devices (phones, 360px) to Large devices (laptops/desktops, 1920px) */
#media screen and (min-width: 360px) and (max-width: 1920px) { css here...}
/* Extra Large devices (laptops/desktops, 1921px and up) */
#media screen and (min-width: 1921px) {css here...}
So when testing in Chrome, I used a Window Resizer to check the viewport sizes and everything looked amazing. After deployment, I ended up getting this:
The application is ReactJS and is hosted using Nginx on an Ubuntu server (not that that should matter).
styles.css
.header-text {
font-size: 212px !important;
color: white;
line-height: 0.8 !important;
}
.subheader-text {
line-height: 1;
font-size: 44px !important;
}
.content-boxes {
display: flex;
flex-direction: column;
position: relative;
}
.content-box {
align-self: center;
width: 400px;
height: 400px;
border-radius: 32px;
background-color: #27285C;
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: 50px;
}
.content-box-header {
font-size: 72px !important;
text-align: center;
}
.content-box-container {
grid-area: content-box-container;
width: 400px;
height: 400px;
border-radius: 32px;
background-color: #27285C;
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: 50px;
margin-left: 250px;
justify-self: center;
}
.content-box-description {
grid-area: content-box-description;
justify-self: left;
}
.fullscreen-content {
display: flex;
flex-direction: column;
}
#media(max-width: 1200px) {
.header-text {
font-size: 144px !important;
}
.subheader-text {
font-size: 44px !important;
}
.fullscreen-content {
margin-top: -20px !important;
}
.content-box {
width: 200px;
height: 200px;
}
.content-boxes-container {
display: flex !important;
flex-direction: column !important;
justify-content: center;
padding: 15px;
margin-bottom: 15px;
}
.content-box-container {
align-self: center;
margin-left: 0px;
}
.content-box-description {
max-width: 80%;
color: #27285C;
align-self: center;
justify-self: left;
margin-top: -15px;
}
.cards-container {
display: flex;
justify-content: center;
flex-direction: column !important;
margin: 0px !important;
z-index: 1;
}
.image-card {
margin-right: 0px !important;
}
}
#media(min-width: 1201px) {
.header-text {
font-size: 212px !important;
}
.fullscreen-content {
margin-top: -350px !important;
overflow-y: hidden;
}
.content-boxes-container {
display: grid;
grid-template-columns: 0.9fr 0.3fr 1.8fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"content-box-container content-box-container content-box-description"
"content-box-container content-box-container content-box-description";
align-items: center;
margin-left: 200px;
}
.content-box-description {
max-width:60%;
color: #27285C;
margin-top: -50px !important;
}
.about-section {
width: 60% !important;
text-indent: 64px;
}
}
.cards-container {
display: flex;
justify-content: center;
flex-direction: row;
margin: 15px;
z-index: 1;
}
.image-card {
align-self: center;
width: 532px;
height: 832px;
background-color: white;
border-radius: 32px;
margin-bottom: 15px;
margin-right: 45px;
}
.cards-container .picture-card {
align-self: center;
}
.about-section {
width: 90%;
display: flex;
flex-direction: column;
align-self: center;
margin: 45px;
}
#font-face {
font-family: 'JockeyOne-Regular';
src: local('JockeyOne-Regular'), url('../layouts/fonts/JockeyOne-Regular.ttf') format('truetype');
/* other formats include: 'woff2', 'truetype, 'opentype',
'embedded-opentype', and 'svg' */
}
Any help would be appreciated! Thanks.
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>
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.