apologies. Just after some help, I can't get the button to centre and to fit correctly on a mobile device. I have a hidden div so when you click on the button it appears and that seems to be working ok.
I don't think I'm structuring the CSS well so any help would be appreciated. Thanks.
HTML
<div class="container">
<button type="button" data-toggle-page="#home" class="button">Home
designing</button>
</div>
<div id="home" class="page">
<div class="section">
<h2 class="kitchen">Kitchen</h2>
</div>
<div class="section">
<h2><a style="text-decoration: none" href="Lounge">Lounge</a></h2>
</div>
<div class="section">
<h2><a style="text-decoration: none" href="Dining">Dining room</a></h2>
</div>
<div class="section">
<h2><a style="text-decoration: none" href="Hall">Hallway</a></h2>
</div>
</div>
CSS
body {
font-family: 'Montserrat', sans-serif;
background: url(image.jpg) no-repeat center center;
background-attachment: fixed;
background-size: 100% 100%;
}
.container {
text-align: center;
max-width: 100%;
}
.button {
background-color: rgba( 0, 0, 0, 0);
/* text-align: center;*/
margin-top: 200px;
font-size: 100px;
color: #fff;
font-family: 'Montserrat Subrayada', sans-serif;
border: none;
outline: none;
}
.page {
position: absolute;
visibility: hidden;
pointer-events: none;
text-align: center;
}
You could center the element with flexbox:
.container {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
max-width: 100%;
}
align-items: center; will center vertically.
justify-content: center; will center horizontally.
Related
I am working on a website (one pager) which is built after a cross. The vertical scroll works well and is solved with CSS (scroll-snap-type etc.) The problem is in the horizontal scroll and namely the problem is that if you scroll horizontally and then scroll vertically logically comes a blank page. How to solve this problem best (as explained in the sketch (arrow 1)) that the page info is called. Every "page" has a vh 100. The vertical Scroll is with vh 100 and vw200 (2 Pages)
EDIT: If you run the code snipped you can see, that if you use the horizontal slide the second slide is blocked if you scroll down. This is my Problem. I want to jump to the site infos / (subscription-container)
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
color: white;
}
h1{
font-weight: normal;
}
#font-face {
font-family: 'besom_extendedregular';
src: url('../src/webfonts/besom-extended-webfont.woff2') format('woff2'),
url('../src/webfonts/besom-extended-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.main-container{
scroll-snap-type: y mandatory;
overflow-y: scroll;
overflow-x: hidden;
height: 100vh;
scroll-behavior: smooth;
}
.navi{
position: fixed;
}
.hero{
height: 100vh;
background-color: beige;
background-position: center;
background-size: cover;
scroll-snap-align: start;
}
.logo-section{
justify-content: center;
display: flex;
padding: 150px;
/* height: 100vh; */
}
.logo-section img{
/* position: absolute; */
max-width: 70%;
max-height: 270px;
}
.content-container{
height: 100vh;
width: 400vw;
background-color: black;
scroll-snap-align: start;
flex-direction: row;
display: flex;
}
.content-container .first{
width: 100vw;
height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 8em;
background-color: brown;
}
.content-container .story{
width: 100vw;
height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 8em;
background-color: red;
}
.subscription-container{
height: 100vh;
background-color: black;
scroll-snap-align: start;
padding-top: 80px;
padding-left: 150px;
padding-right: 150px;
}
.bottom-container{
height: 100vh;
background-color: black;
scroll-snap-align: start;
padding-top: 80px;
}
.footer-nav-main{
float: left;
display: flex;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
margin-left: 35px;
margin-right: 35px;
}
.footer-main{
margin-top: 80vh;
}
<div class="main-container">
<section class="hero">
<div class="logo-section">
<img class="logo" src="" alt="Logo">
</div>
<div class="announcement-head">
<p>
Title
</p>
</div>
<div class="announcement-text">
<p>
Subtitle
</p>
</div>
</section>
<div id="content-container" class="content-container">
<section id="first" class="first">
<div>
<h1>First</h1>
Story
</div>
</section>
<section id="story" class="story">
<div>
<h1>Story 1</h1>
First
</div>
</section>
</div>
<section class="subscription-container">
<div class="main-head">
<h1>Dream with us !</h1>
</div>
<div class="main-text">
<p>
text section
</p>
</div>
</section>
<section class="bottom-container">
<div><h1>Bottom Container</h1></div>
<div class="footer-main">
<ul class="footer-nav-main">
<li>Foot1</li>
<p>/</p>
<li>Foot2</li>
<p>/</p>
<li>Foot3</li>
</ul>
<p class="bottom-text-copyright">© </p>
</div>
</section>
</div>
to block horizontally scrolling you can use overflow-y css property.add this code into your css file:
.body{
overflow-y: hidden;
overflow-x: auto;
}
this code automaticly removes horizontal scrool bar.
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 5 months ago.
header {
display: flex;
justify-content: space-between;
}
nav {
display: flex;
text-align: right;
align-items: center;
}
body {
font-size: 20px;
margin: 0px;
justify-content: center;
}
.logo {
text-align: left;
align-items: center;
}
.menu {
margin-left: 10px;
}
a {
text-decoration: none;
color: #000000;
}
.welcome {
background-color: #76a5d5;
width: 100%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.welcome .p1 {
font-size: 40px;
}
main {
width: 1200px;
background-color: #76a5d5;
margin: 10px;
display: flex;
justify-content: center;
}
main>.item {
flex: none;
width: 580px;
height: 50px;
margin: 10px;
background-color: #000000;
}
<header>
<div class="logo">My Website</div>
<nav>
<div class="menu">
<a class="navitem_text" href="##">item1</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item2</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item3</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item4</a>
</div>
</nav>
</header>
<div class="welcome">
<div class="p1">Welcome to MyHome</div>
</div>
<main>
<div class="item">
</div>
</main>
hi I just started learning coding.I wanted to create a rwd page.Now I'm facing a problem is that I want to move my main area to the center of the page but I couldn't do it. I've tried to add display:flex to body. But everything would move. Should I add a div in the main? Can't figure it out. What should i do now? Here's the code.Thanks
You want to center the main element right?
main{
width: 1200px;
background-color: #76a5d5;
/*See here 10px will be used for top and bottom and for left and right
it will automatically divide equally both sides using auto.
*/
margin: 10px auto;
display: flex;
justify-content: center;
}
Try replacing this ruleset in your css.
Using auto for the left and right margin gives the desired result.
header {
display: flex;
justify-content: space-between;
}
nav {
display: flex;
text-align: right;
align-items: center;
}
body {
font-size: 20px;
margin: 0px;
justify-content: center;
}
.logo {
text-align: left;
align-items: center;
}
.menu {
margin-left: 10px;
}
a {
text-decoration: none;
color: #000000;
}
.welcome {
background-color: #76a5d5;
width: 100%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.welcome .p1 {
font-size: 40px;
}
main {
width: 1200px;
background-color: #76a5d5;
margin: 10px auto;
display: flex;
justify-content: center;
}
main>.item {
flex: none;
width: 580px;
height: 50px;
margin: 10px;
background-color: #000000;
}
<header>
<div class="logo">My Website</div>
<nav>
<div class="menu">
<a class="navitem_text" href="##">item1</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item2</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item3</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item4</a>
</div>
</nav>
</header>
<div class="welcome">
<div class="p1">Welcome to MyHome</div>
</div>
<main>
<div class="item">
</div>
</main>
Answer
You can do this with CSS align-self property.
First, we need give the <body> display flex and set the direction to column (vertical).
body {
font-size: 20px;
margin: 0px;
display: flex;
flex-direction: column; /* this change the direction to vertical */
}
then change the main area to center
main {
width: 1200px;
background-color: #76a5d5;
margin: 10px;
align-self: center; /* this move the element to center */
}
Demo
header{
display: flex;
justify-content: space-between;
}
nav{
display: flex;
text-align: right;
align-items: center;
}
body{
font-size: 20px;
margin: 0px;
display: flex;
flex-direction: column;
}
.logo{
text-align: left;
align-items: center;
}
.menu{
margin-left: 10px;
}
a{
text-decoration: none;
color:#000000;
}
.welcome{
background-color: #76a5d5;
width: 100%;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.welcome .p1{
font-size: 40px;
}
main{
width: 1200px;
background-color: #76a5d5;
margin: 10px;
align-self: center;
}
main>.item{
flex: none;
width: 580px;
height: 50px;
margin: 10px;
background-color: #000000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=divice-width, initial-scale=1">
<link rel="stylesheet" href="RWDstyle.css"/>
<title>RWD test</title>
</head>
<body>
<header>
<div class="logo">My Website</div>
<nav>
<div class="menu">
<a class="navitem_text" href="##">item1</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item2</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item3</a>
</div>
<div class="menu">
<a class="navitem_text" href="##">item4</a>
</div>
</nav>
</header>
<div class="welcome">
<div class="p1">Welcome to MyHome</div>
</div>
<main>
<div class="item">
</div>
</main>
</body>
</html>
I am trying to make it so the second section or the first section will align center with the top.
What I don't understand is the relationship between items with display flex vs items that have display block.
First Question: Is there a way with flex so the top logo doesn't look "off" center compared to the centered text in the second section?
Link To Pen: https://codepen.io/skella1/pen/vYZLdVN
<div class="header">
<img src="https://via.placeholder.com/100x50" alt="">
<p>Text Goes Here</p>
</div>
<div class="secHeader">
<h1>Welcome</h1>
<p>This is a page to login</p>
</div>
<div class="content">
<div class="login">
<p style="padding-right: 10px;">Login</p>
<input type="text">
<button>Login</button>
</div>
</div>
body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px;
img {
margin: 0 auto;
}
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
h1 {
text-transform: uppercase;
font-weight: 900;
}
}
.content{
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
.login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
}
Center the image using justify-content: center on the flex parent element and then set the P elements position to absolute and position it using the top/right properties.
Right now you have two elements that are taking up space in the flex parent elements width. The image and the P tags content. Using justify-content: space-between will place the remainder of the width the elements do not use, between them. In turn skewing the look of the image from being in the center regardless of your margin set to 0 auto, as that only places it in the center of the space it takes up from the parent.
body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.header p {
position: absolute;
top: 0;
right: 20px;
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
}
.secHeader h1 {
text-transform: uppercase;
font-weight: 900;
}
.content {
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
}
.content .login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
<div class="header">
<img src="https://via.placeholder.com/100x50" alt="">
<p>Text Goes Here</p>
</div>
<div class="secHeader">
<h1>Welcome</h1>
<p>This is a page to login</p>
</div>
<div class="content">
<div class="login">
<p style="padding-right: 10px;">Login</p>
<input type="text">
<button>Login</button>
</div>
</div>
Answer to Question 1) A really quick fix to this was using the transform property in CSS to center the image with respect to the current position
Answer to Question 2) Simply set the max-width property on the .content class to prevent the scrolling you talked about
body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
width:100%;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0px;
img {
margin: 0 auto;
transform:translate(50%,0%); /* MODIFIED CODE HERE */
}
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
h1 {
text-transform: uppercase;
font-weight: 900;
}
}
.content{
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
height: 100vh;
max-width:100vw; /* MODIFIED CODE HERE */
position: relative;
.login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
}
If you're insisting on using flexbox for the header, what you can do is the following:
<div class="header">
<div>
</div>
<div class="text-center">
<img src="https://via.placeholder.com/100x50" alt="">
</div>
<div class="text-right">
<p>Text Goes Here</p>
</div>
</div>
.header {
height: 50px;
display:flex;
padding: 0px;
justify-content: space-between;
div {
flex:1;
}
div.text-center {
text-align:center;
}
div.text-right{
text-align:right;
}
}
Please note that this is just a workaround, flexbox is not the only solution here. You might use position:absolute for this.
I'm creating a grid in flexbox that has images on one side and then text on the other. The problem I'm facing is that the images aren't aligning properly in the grid.
Here is my code:
/* iPhone */
#media only screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.body-img {
background: url('background-mobile.png') no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
height: 100vh;
width: 100%;
}
.search-img {
background: url('search-img-mobile.png') no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
height: 100vh;
padding-bottom: 10%;
}
.logo {
width: 150px;
margin-top: 15%;
}
h1,
h2 {
font-family: 'Open Sans', sans-serif;
color: #ffffff;
font-weight: 300;
padding-top: 20%;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.5em;
padding-bottom: 15%;
}
h3 {
font-family: 'Open Sans', sans-serif;
font-size: 1.0em;
font-weight: 400;
}
.searchbar {
margin-top: 15%;
}
.btn {
background-color: #1075C1;
color: #ffffff;
border-radius: 0px;
}
#keyframes bouncing {
0% {
bottom: 0;
}
50% {
bottom: 20px;
}
100% {
bottom: 0;
}
}
.arrow {
animation: bouncing 1s infinite ease-in-out;
bottom: 0;
display: block;
height: 26px;
left: 50%;
margin-left: -25px;
position: absolute;
width: 26px;
}
.left {
background-color: #1075C1;
}
.col-md-12 {
min-height: 0px;
}
.container-flex {
display: flex;
flex-direction: column-reverse !important;
justify-content: space-between;
}
.container-flex2 {
display: flex;
flex-direction: column-reverse !important;
justify-content: space-between;
}
.searchbox {
background-color: rgba(255, 255, 255, 0.6);
padding-top: 5%;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 5%;
}
.form-check-label {
font-size: 0.8em;
}
.btn-lg {
padding-left: 25%;
padding-right: 25%;
padding-top: 5%;
padding-bottom: 5%;
}
.btn-lg:hover {
background-color: #003e6c;
}
}
#media only screen and (min-width: 1024px) {
body {
overflow-x: hidden;
}
.body-img {
background: url('nathan-dumlao-609935-unsplash.png') no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
height: 100vh;
width: 100%;
}
.logo {
width: 250px;
margin-top: 15%;
}
h1,
h2 {
font-family: 'Open Sans', sans-serif;
color: #ffffff;
font-weight: 300;
padding-top: 5%;
}
.searchbar {
margin-top: 8%;
}
.btn {
background-color: #1075C1;
color: #ffffff;
border-radius: 0px;
}
.arrow {
display: none;
}
.container-flex {
display: flex;
flex-direction: row !important;
justify-content: space-between;
background-color: #1075C1;
}
.container-flex2 {
display: flex;
flex-direction: row-reverse;
background-color: #1075C1;
justify-content: space-between;
}
.left {
background-color: #1075C1;
}
.description {
background-color: #1075C1;
}
}
<section id="one">
<div class="container-flex">
<div class="left">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 text-center">
<h2>Sign up for our career guide and receive free insight into available jobs</h2>
</div>
</div>
</div>
<div class="right">
<img src="section1-mobile.png" class="img-fluid">
</div>
</div>
<div class="container-flex2">
<div class="left">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 text-center">
<h2>Answer questions as we help you with your job search</h2>
</div>
</div>
</div>
<div class="right">
<img src="section2.png" class="img-fluid">
</div>
</div>
<div class="container-flex">
<div class="left">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 text-center">
<h2>Get matched with companies looking for talent like you</h2>
</div>
</div>
</div>
<div class="right">
<img src="section3.png" class="img-fluid">
</div>
</div>
</section>
The end result I'm looking for.
I'm not sure what I'm doing wrong in the CSS?
There's a few things to point out here that might help you in getting things how you want them to look.
Firstly, your indentation in your markup is a wee bit skew, so, at first glance, it's a little bit tricky to figure out, sorting the indentation in both your markup and css will make it easier for you, and others, to debug.
Secondly, you've got a lot of superfluous styles / class in your markup that look like they're from bootstrap. These could potentially be affecting your own custom styles and causing conflicts.
Thirdly you've got an awful lot going on in terms nesting in your markup that makes it difficult to apply styles too.
I would suggest simplifying your markup first.
I would also suggest stripping back your css to the bare minimum needed, removing your vendor prefixes (-webkit-, -o-), the #keyframes declaration (or at the very least commenting them out). You can always add them after or put you css through a preprocessor or autoprefixer afterwards but for debugging they can make things difficult.
Flexbox can be a bit tricky at times, so I put together a pen on codepen showing how I would approach your mockup (full code below). It's just a quick draft but maybe some other community members will have some input / suggestions. In the meantime have a play around with the values and look at the outcome.
I'd also recommend this SO question regarding flexbox, the top answer is fairly concise about horizontal and vertical alignment. I'd also recommend checking out flex box froggy for honing you flex box skills.
markup:
<section class="section">
<div class="row">
<div class="content">
<span class="icon">🎨</span>
<span class="text">here is some text</span>
</div>
<img class="image" src="http://lorempixel.com/400/200" />
</div>
<div class="row">
<div class="content">
<span class="icon">🐳</span>
<span class="text">here is some other text</span>
</div>
<img class="image" src="http://lorempixel.com/400/200" />
</div>
<div class="row">
<div class="content">
<span class="icon">💰</span>
<span class="text">here is some more text</span>
</div>
<img class="image" src="http://lorempixel.com/400/200" />
</div>
</section>
css:
body {
width: 100%;
text-align: center;
font-family: sans-serif;
}
.section, .row {
width: 75vw;
background: dodgerblue;
color: #fff;
font-size: 1.5em;
}
.section {
display: inline-block;
}
.row {
display: flex;
justify-content: space-between;
flex-direction: row;
}
.row:nth-child(odd) {
flex-direction: row-reverse;
}
.content {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.text {
width: 50%;
text-align: center;
}
.image {
width: 50%;
height: auto;
}
.icon {
font-size: 1.5em;
}
I hope this helps.
I have tested both snippets on screen size (1024x786) and ipad pro (1024x1366)
/* iPhone */
.left {
width: 50%;
left: 0px;
}
.right {
width: 50%;
right: 0px;
}
h2 {
font-family: arial !important;
}
#media only screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.body-img {
background: url('background-mobile.png') no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
height: 100vh;
width: 100%;
}
.search-img {
background: url('search-img-mobile.png') no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
height: 100vh;
padding-bottom: 10%;
}
.logo {
width: 150px;
margin-top: 15%;
}
h1, h2 {
font-family: 'Open Sans', sans-serif;
color: #ffffff;
font-weight: 300;
padding-top: 20%;
}
h1 {
font-size: 1.3em;
}
h2 {
font-size: 1.3em;
padding-bottom: 15%;
}
h3 {
font-family: 'Open Sans', sans-serif;
font-size: 1.0em;
font-weight: 400;
}
.searchbar {
margin-top: 15%;
}
.btn {
background-color: #1075C1;
color: #ffffff;
border-radius: 0px;
}
.arrow {
animation: bouncing 1s infinite ease-in-out;
bottom: 0;
display: block;
height: 26px;
left: 50%;
margin-left: -25px;
position: absolute;
width: 26px;
}
.left {
background-color: #1075C1;
}
.col-md-12 {
min-height: 0px;
}
.container-flex {
display: flex;
justify-content: space-between;
}
.container-flex2 {
display: flex;
justify-content: space-between;
}
.searchbox {
background-color: rgba(255, 255, 255, 0.6);
padding-top: 5%;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 5%;
}
.form-check-label {
font-size: 0.8em;
}
.btn-lg {
padding-left: 25%;
padding-right: 25%;
padding-top: 5%;
padding-bottom: 5%;
}
.btn-lg:hover {
background-color: #003e6c;
}
.text-center {
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
.text-center h2 {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
}
#media only screen and (min-width: 1024px) {
body {
overflow-x: hidden;
}
.body-img {
background: url('nathan-dumlao-609935-unsplash.png') no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
height: 100vh;
width: 100%;
}
.logo {
width: 250px;
margin-top: 15%;
}
h1, h2 {
font-family: 'Open Sans', sans-serif;
color: #ffffff;
font-weight: 300;
padding-top: 5%;
}
.searchbar {
margin-top: 8%;
}
.btn {
background-color: #1075C1;
color: #ffffff;
border-radius: 0px;
}
.arrow {
display: none;
}
.container-flex {
display: flex;
justify-content: space-between;
background-color: #1075C1;
}
.container-flex2 {
display: flex;
flex-direction: row-reverse;
background-color: #1075C1;
justify-content: space-between;
}
.left {
background-color: #1075C1;
}
.description {
background-color: #1075C1;
}
.text-center {
height: 500px;
line-height: 500px;
text-align: center;
border: 2px dashed #f69c55;
}
.text-center h2 {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="one">
<div class="container-flex">
<div class="left">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 text-center">
<h2>Sign up for our career guide and receive free insight into available jobs</h2>
</div>
</div>
</div>
<div class="right">
<img src="https://dummyimage.com/500x500/000/fff" class="img-fluid">
</div>
</div>
<div class="container-flex2">
<div class="right">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 text-center">
<h2>Answer questions as we help you with your job search</h2>
</div>
</div>
</div>
<div class="left">
<img src="https://dummyimage.com/500x500/000/fff" class="img-fluid">
</div>
</div>
<div class="container-flex">
<div class="left">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 text-center">
<h2>Get matched with companies looking for talent like you</h2>
</div>
</div>
</div>
<div class="right">
<img src="https://dummyimage.com/500x500/000/fff" class="img-fluid">
</div>
</div>
</section>
</body>
</html>
I also attached output screenshots for both size
Hope, you find your solution.
Use <img> instead of background image, because you can make them responsive more easy with
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
Therefore use big sizes for the images so that they always fill up the space.
Use flex-basis to handle width, e.g. 60% for the left side and 40% for the right side.
Make the container flex-wrap: wrap so that the columns in the container are wrapped and not in a row.
Set the column inside a container
.container > div {
display: flex;
flex-direction: column;
justify-content: center; // Center vertically
align-items: center; // Center horizontally
}
to center the content within horizontally and vertically.
Example
body {
background: black;
}
.container {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
max-width: 960px;
border: 3px solid white;
background: #0F75C0;
}
.container>div {
display: flex;
flex-direction: column;
box-sizing: border-box;
justify-content: center;
align-items: center;
}
/* Columns on the left side */
.container>div:nth-child(odd) {
flex-basis: 60%;
}
/* Columns on the right side */
.container>div:nth-child(even) {
flex-basis: 40%;
}
/* Make images responsive */
.container>div>img {
display: block;
height: auto;
max-width: 100%;
}
.container .info {
max-width: 70%;
text-align: center;
padding: 15px;
font-size: 22px;
color: white;
}
#media screen and (max-width: 320px) {
.container {
flex-direction: column;
}
}
<div class="container">
<div>
<div class="info">
<img src="http://via.placeholder.com/48x48?text=icon" alt="">
<p>Sign up for our career guide</p>
</div>
</div>
<div>
<img src="http://via.placeholder.com/800x600" alt="">
</div>
<div>
<img src="http://via.placeholder.com/1000x500" alt="">
</div>
<div>
<div class="info">
<img src="http://via.placeholder.com/48x48?text=icon" alt="">
<p>Answer a few questions as we aid you in your job search</p>
</div>
</div>
<div>
<div class="info">
<img src="http://via.placeholder.com/48x48?text=icon" alt="">
<p>Get matched with companies looking for talent like you</p>
</div>
</div>
<div>
<img src="http://via.placeholder.com/800x600" alt="">
</div>
</div>
I'm trying to align text and button vertically as well as horizontally and cannot make it...
What I want ultimately is that alignment was responsive.
My code:
HTML:
<div id="stage">
<div id="stage-caption">
<h1 class="display-3">Gallery Nellija</h1>
<p>Some description</p>
Sign up now
</div>
</div>
CSS:
#stage {
background: url('img/stage.jpg') center center no-repeat;
background-size: cover;
color: white;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#stage-caption {
font-size: 1.4rem;
font-weight: 200;
max-width: 60rem;
margin: 0 auto;
}
#stage-caption h1 {
color: white;
font-weight: bold;
text-transform: uppercase;
}
For now it looks like that:
Thanks in advance!
Add text-align:center to #stage