This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I want to know why the video and the second container don't center in the middle of the page when I gave it the justify-content as you see in the third and fourth container the boxes align in the middle.
I tried everything, from margin to float to grid, but it's not working.
Again sorry for the question but I'm a beginner in this game.
/* body and root stuff */
body {
margin: 0;
font-size: 0.813rem;
font-family: "Assistant", sans-serif;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: white;
}
img {
width: 20%;
}
header {
text-align: center;
background: rgb(255, 123, 0);
color: white;
padding: 2em auto;
}
/* body and root stuff end */
/* header stuff */
.main-container {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
.main-container-flex {
display: flex;
flex-direction: row;
justify-content: center;
}
.logo-container {
width: 50%;
height: 50%;
margin-right: 8em;
align-self: center;
}
#header-img {
width: 50%;
margin-top: 0.75em;
margin-bottom: 0;
}
nav,
ul {
list-style-type: none;
font-size: 0.75rem;
text-transform: uppercase;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.current-page {
border-bottom: 1px solid black;
}
a {
text-decoration: none;
color: white;
font-weight: 600;
}
a:hover {
color: orange;
border-bottom: none;
}
#media (min-width: 675px) {
.main-container {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
.main-container-flex {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.logo-container {
width: 15%;
height: 15%;
align-self: center;
}
#header-img {
width: 100%;
margin-top: 0.75em;
margin-bottom: 0;
padding-bottom: 0.4em;
}
nav,
ul {
list-style-type: none;
font-size: 1rem;
text-transform: uppercase;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
}
li {
color: white;
margin-left: 2em;
align-self: center;
}
.current-page {
border-bottom: 1px solid white;
}
a {
text-decoration: none;
color: white;
font-weight: 650;
}
a:hover {
color: orange;
border-bottom: none;
}
}
/* header stuff ends */ /* main stuff */
main {
text-align: center;
background: white;
padding: 2em auto;
margin-top: 2rem;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.video-container {
max-width: 900px;
display: flex;
flex-direction: column;
justify-content: center;
}
#video {
align-self: center;
}
hr {
margin: 2rem 10%;
background: rgb(255, 123, 0);
}
.products-title {
background: rgb(255, 123, 0);
color: white;
max-width: 900px;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 1em;
}
.h2-product-title {
margin-bottom: 1em;
}
.p-product-title {
margin-top: 0;
margin-bottom: 1em;
}
#media (max-width: 900px) {
.products-title {
background: rgb(255, 123, 0);
color: white;
max-width: 900px;
margin-left: 2em;
margin-right: 2em;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.products {
margin-top: 60px;
display: flex;
flex-direction: row;
justify-content: center;
}
.bindings-picture {
width: 20em;
margin-left: 2em;
margin-right: 2em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style.css" />
<link rel="icon" href="img/Union-U-Orange.png" />
<link
href="https://fonts.googleapis.com/css2?family=Assistant:wght#200;300;400;600;700;800&display=swap"
rel="stylesheet"
/>
<title>UNION BINDINGS CO.</title>
</head>
<body>
<header id="header" class="stick-header">
<div class="main-container main-container-flex">
<div class="logo-container">
<img
id="header-img"
src="/img/b89780745f1e81adc10408d92c7c6dda.jpg"
alt="union logo"
/>
</div>
<nav id="nav-bar">
<ul>
<li class="nav-link">
Home
</li>
<li class="nav-link">Product</li>
<li class="nav-link">Support</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="video-container">
<iframe
id="video"
width="560"
height="315"
src="https://www.youtube.com/embed/CQtZRHnbPks"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<hr />
<div class="products-title">
<h2 class="h2-product-title">OUR BINDINGS</h2>
<p class="p-product-title">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi
doloremque dicta repellendus, iste unde voluptas.
</p>
</div>
<div class="products">
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
</div>
<hr />
<div class="more-products-container">
<div class="products"></div>
<div class="products"></div>
<div class="products"></div>
</div>
<hr />
<div class="newsletter">
<form action=" https://www.freecodecamp.com/email-submit)" id="form">
<h3>SUBSCRIBE TO OUR NEWSLETTER</h3>
<input type="name" name="name" id="name" placeholder="name" />
<input
class="email-holder"
type="email"
id="email"
placeholder="email"
/>
<input id="submit" type="submit" value="SUBSCRIBE" />
</form>
</div>
</main>
<footer></footer>
</body>
</html>
In your CSS for the main identifier, you have flex-direction: column; so you need align-items: center;, not justify-content: center;. Also, I love this resource on Flexbox.
align-items is used for the "cross axis" (if you're adding elements in the column flex direction, the cross axis is the horizontal, and you want your stuff centered horizontally; justify-contents follows the direction axis so it would be trying to center things vertically).
Here's the updated chunk of code in question:
/* ... other styles were above ... */
main {
text-align: center;
background: white;
padding: 2em auto;
margin-top: 2rem;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
justify-content: center; /* don't need this */
align-items: center;
}
/* ... there's more stuff below ... */
Your flex direction is column - so you need to use align-items: center instead.
justify-content: center centers elements in the direction of the flex-flow. align-items aligns flex children on the cross axis of the direction (in this case column).
If your flex-direction was row - align-items: center would vertically center the flex children, since it's the cross axis of the main flex direction.
/* body and root stuff */
body {
margin: 0;
font-size: 0.813rem;
font-family: "Assistant", sans-serif;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: white;
}
img {
width: 20%;
}
header {
text-align: center;
background: rgb(255, 123, 0);
color: white;
padding: 2em auto;
}
/* body and root stuff end */
/* header stuff */
.main-container {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
.main-container-flex {
display: flex;
flex-direction: row;
justify-content: center;
}
.logo-container {
width: 50%;
height: 50%;
margin-right: 8em;
align-self: center;
}
#header-img {
width: 50%;
margin-top: 0.75em;
margin-bottom: 0;
}
nav,
ul {
list-style-type: none;
font-size: 0.75rem;
text-transform: uppercase;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.current-page {
border-bottom: 1px solid black;
}
a {
text-decoration: none;
color: white;
font-weight: 600;
}
a:hover {
color: orange;
border-bottom: none;
}
#media (min-width: 675px) {
.main-container {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
.main-container-flex {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.logo-container {
width: 15%;
height: 15%;
align-self: center;
}
#header-img {
width: 100%;
margin-top: 0.75em;
margin-bottom: 0;
padding-bottom: 0.4em;
}
nav,
ul {
list-style-type: none;
font-size: 1rem;
text-transform: uppercase;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
}
li {
color: white;
margin-left: 2em;
align-self: center;
}
.current-page {
border-bottom: 1px solid white;
}
a {
text-decoration: none;
color: white;
font-weight: 650;
}
a:hover {
color: orange;
border-bottom: none;
}
}
/* header stuff ends */ /* main stuff */
main {
text-align: center;
background: white;
padding: 2em auto;
margin-top: 2rem;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
align-items: center;
}
.video-container {
max-width: 900px;
display: flex;
flex-direction: column;
justify-content: center;
}
#video {
align-self: center;
}
hr {
margin: 2rem 10%;
background: rgb(255, 123, 0);
}
.products-title {
background: rgb(255, 123, 0);
color: white;
max-width: 900px;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 1em;
}
.h2-product-title {
margin-bottom: 1em;
}
.p-product-title {
margin-top: 0;
margin-bottom: 1em;
}
#media (max-width: 900px) {
.products-title {
background: rgb(255, 123, 0);
color: white;
max-width: 900px;
margin-left: 2em;
margin-right: 2em;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.products {
margin-top: 60px;
display: flex;
flex-direction: row;
justify-content: center;
}
.bindings-picture {
width: 20em;
margin-left: 2em;
margin-right: 2em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style.css" />
<link rel="icon" href="img/Union-U-Orange.png" />
<link
href="https://fonts.googleapis.com/css2?family=Assistant:wght#200;300;400;600;700;800&display=swap"
rel="stylesheet"
/>
<title>UNION BINDINGS CO.</title>
</head>
<body>
<header id="header" class="stick-header">
<div class="main-container main-container-flex">
<div class="logo-container">
<img
id="header-img"
src="/img/b89780745f1e81adc10408d92c7c6dda.jpg"
alt="union logo"
/>
</div>
<nav id="nav-bar">
<ul>
<li class="nav-link">
Home
</li>
<li class="nav-link">Product</li>
<li class="nav-link">Support</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="video-container">
<iframe
id="video"
width="560"
height="315"
src="https://www.youtube.com/embed/CQtZRHnbPks"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
<hr />
<div class="products-title">
<h2 class="h2-product-title">OUR BINDINGS</h2>
<p class="p-product-title">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi
doloremque dicta repellendus, iste unde voluptas.
</p>
</div>
<div class="products">
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
<div class="bindings">
<img
class="bindings-picture"
src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
alt=""
/>
<p class="binding-name">
Union Force
</p>
<button>MORE INFO</button>
</div>
</div>
<hr />
<div class="more-products-container">
<div class="products"></div>
<div class="products"></div>
<div class="products"></div>
</div>
<hr />
<div class="newsletter">
<form action=" https://www.freecodecamp.com/email-submit)" id="form">
<h3>SUBSCRIBE TO OUR NEWSLETTER</h3>
<input type="name" name="name" id="name" placeholder="name" />
<input
class="email-holder"
type="email"
id="email"
placeholder="email"
/>
<input id="submit" type="submit" value="SUBSCRIBE" />
</form>
</div>
</main>
<footer></footer>
</body>
</html>
justify-content:center is working. It's just centering it to the width of the container that's set to 900px
.video-container {
//this width
max-width: 900px;
display: flex;
flex-direction: column;
justify-content: center;
}
Change width to 100% and it will work fine
Related
https://capr1sun.github.io/popsociology/
The main page of my website has an extra space on the right side which shows when I simulate smaller devices (iPhones). And on my desktop, there's a horizontal scroll bar at the bottom. How do I get rid of the extra space so the content fits exactly on the screen?
#import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght#0,300;0,400;0,700;0,900;1,900&display=swap');
:root {
--mainbgcolor: #FDFBEC;
--logo: #F4C553;
--green: #E1EEDD;
--greentext: #153A1E;
--orange: #EE9F4A;
}
html, body {
margin: 0 auto;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Merriweather', serif;
background-color: var(--mainbgcolor);
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--mainbgcolor);
color: var(--logo);
padding: 0px 20px;
font-size: small;
}
#logo {
font-weight: 900;
}
header a, li {
text-decoration: none;
list-style: none;
color: var(--orange);
font-weight: 700;
}
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 16px
}
main {
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
}
.icon-container {
padding: 10px 20px;
display: grid;
gap: 15px;
grid-template-columns: auto auto auto auto auto;
justify-content: center;
}
.info-icons-container {
padding: 5px 20px;
text-align: center;
}
#conceptName {
font-weight: 700;
font-size: 2rem;
margin: 5px 0px 10px 0px;
}
.conceptInfo {
font-size: 0.8rem;
}
footer {
background-color: var(--orange);
color: var(--mainbgcolor);
text-align: center;
margin-top: auto;
}
.icon img {
width: 55px;
height: auto;
cursor: pointer;
}
.icon img:hover {
box-shadow: 0 0 5px 5px var(--orange);
}
.info-icons-container {
align-items: center;
justify-content: center;
animation: transitionIn 0.75s;
}
/*transition*/
#keyframes transitionIn {
from {
opacity: 0;
transform: rotateX(-10deg);
}
to {
opacity: 1;
transform: rotateX(0);
}
}
/* ABOUT PAGE */
.about {
display: flex;
flex-direction: column;
padding: 20px;
}
.large-img-container {
display: flex;
align-items: center;
justify-content: center;
}
.large-img-container img {
display: block;
width: 200px;
height: auto;
}
.about-container {
text-align: justify;
padding: 10px 20px;
text-align: center;
}
.about h1, .about h3 {
color: var(--orange);
}
.about p {
text-align: justify;
}
/*SLIDER PAGE*/
.imgslider {
align-items: center;
justify-content: center;
}
.controls {
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
justify-content: center;
}
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 80px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1190px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
#media (min-width:1200px) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 50px;
}
.info-icons-container {
margin-bottom: 20px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
footer {
width: 100%;
}
}
#media (min-width:1281px) {
header {
font-size: large;
padding: 0 5px;
justify-content: space-around;
}
footer {
width: 100vw;
}
.icon-container {
gap: 30px;
}
main {
align-items: center;
}
.info-icons-container {
width: 50%;
}
#description{
font-size: 1.5rem;
}
.about {
display: flex;
flex-direction: row;
padding: 20px 100px 20px 20px;
}
.large-img-container {
display: block;
padding-left: 200px;
}
.large-img-container img {
width: 500px;
height: auto;
}
.about-container {
text-align: justify;
padding: 10px 100px;
display: block;
}
.about h1, .about h3 {
color: var(--orange);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pop Sociology</title>
</head>
<body id="body">
<header>
<div class="left">
<h1 id="logo">Pop Sociology!</h1>
</div>
<div class="right">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
</header>
<main>
<div class="icon-container">
<div class="icon">
<img src="whatissocio2.png" alt="What is Sociology?" id="whatIsSociologyIcon">
</div>
<div class="icon">
<img src="sociotheory2.png" alt="Sociological Theories" id="socioTheoriesIcon">
</div>
<div class="icon">
<img src="interactionist2.png" alt="Interactionist Perspective" id="interactionistIcon">
</div>
<div class="icon">
<img src="conflict2.png" alt="Conflict Perspective" id="conflictIcon">
</div>
<div class="icon">
<img src="functionalist2.png" alt="Functionalist Perspective" id="functionalistIcon">
</div>
<div class="icon">
<img src="socialization2.png" alt="Socialization" id="socialization">
</div>
<div class="icon">
<img src="formssocializatin2.png" alt="Forms of Socialization" id="formsSocializationIcon">
</div>
<div class="icon">
<img src="exchange2.png" alt="Social Exchange Theory" id="exchangeIcon">
</div>
<div class="icon">
<img src="sociallearning2.png" alt="Social Learning Theory" id="learningIcon">
</div>
<div class="icon">
<img src="labeling2.png" alt="Labeling Theory" id="labelingIcon">
</div>
<div class="icon">
<img src="feminism2.png" alt="Feminist Theory" id="feminismIcon">
</div>
<div class="icon">
<img src="critical2.png" alt="Critical Theory" id="criticalIcon">
</div>
<div class="icon">
<img src="strain2.png" alt="Social Strain Theory" id="strainIcon">
</div>
<div class="icon">
<img src="rational2.png" alt="Rational Theory" id="rationalIcon">
</div>
<div class="icon">
<img src="game2.png" alt="Game Theory" id="gameIcon">
</div>
<div class="icon">
<img src="sociobiology2.png" alt="Sociobiology" id="sociobiologyIcon">
</div>
<div class="icon">
<img src="chaos2.png" alt="Chaos Theory" id="chaosIcon">
</div>
<div class="icon">
<img src="gears2.png" alt="Social Phenomenology" id="phenomonologyIcon">
</div>
<div class="icon">
<img src="disengagement2.png" alt="Disengagement Theory" id="disengagementIcon">
</div>
<div class="icon">
<img src="macro2.png" alt="Macro Theory" id="macroIcon">
</div>
<div class="icon">
<img src="comte2.png" alt="August Comte" id="comteIcon">
</div>
<div class="icon">
<img src="marx2.png" alt="Karl Marx" id="marxIcon">
</div>
<div class="icon">
<img src="durkheim2.png" alt="Emile Durkheim" id="durkheimIcon">
</div>
<div class="icon">
<img src="weber2.png" alt="Max Weber" id="weberIcon">
</div>
<div class="icon">
<img src="spencer2.png" alt="Herbert Spencer" id="spencerIcon">
</div>
</div>
<div class="info-icons-container">
<h3 id="conceptName"><span id="conceptNameDisplay">Bite-sized sociology for the new generation!</h3></span>
<p id="description"><span id="conceptInfoDisplay">What do you want to learn today?</span></p></span>
</div>
</main>
<footer>
<p>Created by Me</p>
</footer>
<script src="script.js"></script>
</body>
</html>
The problem is in
footer {
width: 100vw;
}
You can just remove it or use 100% rather than 100vw, and add width: 100% to body tag.
There is a scroll due to the size of the anchors text. So you can set a relative size to them. For example font-size: 2.2vw for .icon-container:
#import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght#0,300;0,400;0,700;0,900;1,900&display=swap');
:root {
--mainbgcolor: #FDFBEC;
--logo: #F4C553;
--green: #E1EEDD;
--greentext: #153A1E;
--orange: #EE9F4A;
}
html, body {
margin: 0 auto;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Merriweather', serif;
background-color: var(--mainbgcolor);
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--mainbgcolor);
color: var(--logo);
padding: 0px 20px;
font-size: small;
}
#logo {
font-weight: 900;
}
header a, li {
text-decoration: none;
list-style: none;
color: var(--orange);
font-weight: 700;
}
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 16px
}
main {
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
}
.icon-container {
padding: 10px 20px;
display: grid;
gap: 15px;
grid-template-columns: auto auto auto auto auto;
justify-content: center;
font-size: 2.2vw; /* here */
}
.info-icons-container {
padding: 5px 20px;
text-align: center;
}
#conceptName {
font-weight: 700;
font-size: 2rem;
margin: 5px 0px 10px 0px;
}
.conceptInfo {
font-size: 0.8rem;
}
footer {
background-color: var(--orange);
color: var(--mainbgcolor);
text-align: center;
margin-top: auto;
}
.icon img {
width: 55px;
height: auto;
cursor: pointer;
}
.icon img:hover {
box-shadow: 0 0 5px 5px var(--orange);
}
.info-icons-container {
align-items: center;
justify-content: center;
animation: transitionIn 0.75s;
}
/*transition*/
#keyframes transitionIn {
from {
opacity: 0;
transform: rotateX(-10deg);
}
to {
opacity: 1;
transform: rotateX(0);
}
}
/* ABOUT PAGE */
.about {
display: flex;
flex-direction: column;
padding: 20px;
}
.large-img-container {
display: flex;
align-items: center;
justify-content: center;
}
.large-img-container img {
display: block;
width: 200px;
height: auto;
}
.about-container {
text-align: justify;
padding: 10px 20px;
text-align: center;
}
.about h1, .about h3 {
color: var(--orange);
}
.about p {
text-align: justify;
}
/*SLIDER PAGE*/
.imgslider {
align-items: center;
justify-content: center;
}
.controls {
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
justify-content: center;
}
#media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 80px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1190px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
#media (min-width:1200px) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 50px;
}
.info-icons-container {
margin-bottom: 20px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
footer {
width: 100%;
}
}
#media (min-width:1281px) {
header {
font-size: large;
padding: 0 5px;
justify-content: space-around;
}
footer {
width: 100vw;
}
.icon-container {
gap: 30px;
}
main {
align-items: center;
}
.info-icons-container {
width: 50%;
}
#description{
font-size: 1.5rem;
}
.about {
display: flex;
flex-direction: row;
padding: 20px 100px 20px 20px;
}
.large-img-container {
display: block;
padding-left: 200px;
}
.large-img-container img {
width: 500px;
height: auto;
}
.about-container {
text-align: justify;
padding: 10px 100px;
display: block;
}
.about h1, .about h3 {
color: var(--orange);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pop Sociology</title>
</head>
<body id="body">
<header>
<div class="left">
<h1 id="logo">Pop Sociology!</h1>
</div>
<div class="right">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
</header>
<main>
<div class="icon-container">
<div class="icon">
<img src="whatissocio2.png" alt="What is Sociology?" id="whatIsSociologyIcon">
</div>
<div class="icon">
<img src="sociotheory2.png" alt="Sociological Theories" id="socioTheoriesIcon">
</div>
<div class="icon">
<img src="interactionist2.png" alt="Interactionist Perspective" id="interactionistIcon">
</div>
<div class="icon">
<img src="conflict2.png" alt="Conflict Perspective" id="conflictIcon">
</div>
<div class="icon">
<img src="functionalist2.png" alt="Functionalist Perspective" id="functionalistIcon">
</div>
<div class="icon">
<img src="socialization2.png" alt="Socialization" id="socialization">
</div>
<div class="icon">
<img src="formssocializatin2.png" alt="Forms of Socialization" id="formsSocializationIcon">
</div>
<div class="icon">
<img src="exchange2.png" alt="Social Exchange Theory" id="exchangeIcon">
</div>
<div class="icon">
<img src="sociallearning2.png" alt="Social Learning Theory" id="learningIcon">
</div>
<div class="icon">
<img src="labeling2.png" alt="Labeling Theory" id="labelingIcon">
</div>
<div class="icon">
<img src="feminism2.png" alt="Feminist Theory" id="feminismIcon">
</div>
<div class="icon">
<img src="critical2.png" alt="Critical Theory" id="criticalIcon">
</div>
<div class="icon">
<img src="strain2.png" alt="Social Strain Theory" id="strainIcon">
</div>
<div class="icon">
<img src="rational2.png" alt="Rational Theory" id="rationalIcon">
</div>
<div class="icon">
<img src="game2.png" alt="Game Theory" id="gameIcon">
</div>
<div class="icon">
<img src="sociobiology2.png" alt="Sociobiology" id="sociobiologyIcon">
</div>
<div class="icon">
<img src="chaos2.png" alt="Chaos Theory" id="chaosIcon">
</div>
<div class="icon">
<img src="gears2.png" alt="Social Phenomenology" id="phenomonologyIcon">
</div>
<div class="icon">
<img src="disengagement2.png" alt="Disengagement Theory" id="disengagementIcon">
</div>
<div class="icon">
<img src="macro2.png" alt="Macro Theory" id="macroIcon">
</div>
<div class="icon">
<img src="comte2.png" alt="August Comte" id="comteIcon">
</div>
<div class="icon">
<img src="marx2.png" alt="Karl Marx" id="marxIcon">
</div>
<div class="icon">
<img src="durkheim2.png" alt="Emile Durkheim" id="durkheimIcon">
</div>
<div class="icon">
<img src="weber2.png" alt="Max Weber" id="weberIcon">
</div>
<div class="icon">
<img src="spencer2.png" alt="Herbert Spencer" id="spencerIcon">
</div>
</div>
<div class="info-icons-container">
<h3 id="conceptName"><span id="conceptNameDisplay">Bite-sized sociology for the new generation!</h3></span>
<p id="description"><span id="conceptInfoDisplay">What do you want to learn today?</span></p></span>
</div>
</main>
<footer>
<p>Created by Me</p>
</footer>
<script src="script.js"></script>
</body>
</html>
your width property in footer element cause overflow-x this snippet may help:
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Merriweather', serif;
background-color: var(--mainbgcolor);
box-sizing: border-box;
}
footer {
width: 100%;
}
I defined an image width as 100%, though, when I change to a 320 px display it doesn't use all the width.
I tried using vw, putting the exact width size of the display. But it never works, it only works if I put a larger width.
My code is in this Github repository, with html and css files: https://github.com/JoeyBeckWheeler/Projeto-Everest
.banner{
width: 100%;
height: 60vh;
background-image: url('../imagens/bg-2.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: bottom;
}
Snippet:
#import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
border: 0;
font-family: 'Raleway', sans-serif;
}
body {
background-color: #878A8C;
color: #fff;
}
.banner {
width: 100%;
height: 60vh;
background-image: url('https://github.com/JoeyBeckWheeler/Projeto-Everest/tree/main/Assets/imagens/bg-2.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: bottom;
}
.slogan {
text-align: center;
margin-top: 15px;
background-color: rgba(0, 0, 0, 0.3);
padding: 15px;
border-bottom: white 2px solid;
}
/* Talvez eu tenha que arrumar no responsivo */
.menu {
display: flex;
justify-content: flex-end;
margin-right: 30px;
}
.menu-list,
a {
display: flex;
list-style-type: none;
text-decoration: none;
color: white;
margin: 15px 15px 0 0;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
/* */
.title {
margin: 15vh;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.infos {
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
margin-bottom: 50px;
}
#Plans-section {
margin: 50px 50px 50px 50px;
display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
padding: 1vh;
border: 5px solid rgba(0, 0, 0, 0.7);
}
.card-item {
margin: 15px 15px 15px 15px;
}
.subtitle {
background-color: #3B5159;
padding: 0.5em;
color: white;
text-align: center;
}
#About-Us-section {
margin: 50px 50px 50px 50px;
display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
background-color: #878A8C;
padding: 1vh;
border: 7px solid rgba(0, 0, 0, 0.7);
line-height: 2;
}
.about-title {
text-align: center;
}
footer {
background-color: #283940;
height: 80px;
text-align: center;
line-height: 80px;
}
#media screen and (min-width:320px) and (max-width:375px) {
.menu {
display: flex;
justify-content: flex-end;
margin-right: 35px;
}
#Plans-section {
width: 80vw;
}
.images {
height: 100px;
width: 200px;
}
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Assets/CSS/style.css">
<title>Projeto</title>
</head>
<body>
<header class="banner">
<nav class="menu">
<ul class="menu-list">
<li class="menu-item">Início</li>
<li class="menu-item">Planos</li>
<li class="menu-item">Sobre nós</li>
</ul>
</nav>
<div class="title">
<div class="titulo">
<h1> Corretora Everest </h1>
<p class="slogan"><b><em>Te ajudamos a chegar alto </em></b></p>
</div>
</div>
</header>
<div class="infos">
<main>
<section id="Plans-section">
<div class="card-item">
<img class="images" src="./Assets/imagens/card_01.png" alt="">
<p class="subtitle">Plano Star</p>
</div>
<div class="card-item">
<img class="images" src="./Assets/imagens/card_03.jpg" alt="">
<p class="subtitle">Plano Diamond</p>
</div>
<div class="card-item">
<img class="images" src="./Assets/imagens/card_05.jpg" alt="">
<p class="subtitle"> Plano Magic</p>
</div>
</section>
<section id="About-Us-section">
<article>
<header class="about-title">
<h2>Sobre nós</h2>
</header>
<ul class="info-text">
<li style="margin-left: 15px; ;">
<p>Investimos o seu dinheiro como se fosse <b>nosso</b></p>
</li>
<li style="margin-left:15px;">
<p>Com planos de investimentos personalizados te ajudamos a <b>chegar alto!</b></p>
</li>
<li style="margin-left: 15px; ;">
<p>Nosso time conta apenas com especialistas da área</p>
</li>
</ul>
</article>
</section>
</main>
</div>
<footer>
<p>Copyright © 2022</p>
</footer>
</body>
</html>
You are now banned from margin. Find other ways of spacing elements. Consider using padding and gap instead.
Use outline: 1px solid red on everything to find overflowing elements.
Also, avoid setting harsh width/height, especially with viewport units, try using min-height, max-width, etc.
Sign up for Kevin Powell's Conquering Responsive Layouts course.
I hope this example sets you on the right path, stop using CSS to shoot yourself in the foot.
#import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
border: 0;
font-family: 'Raleway', sans-serif;
outline: 1px solid red;
}
body {
background-color: #878A8C;
color: #fff;
}
.banner {
width: 100%;
min-height: 60vh;
background-image: url('https://github.com/JoeyBeckWheeler/Projeto-Everest/tree/main/Assets/imagens/bg-2.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: bottom;
}
.slogan {
text-align: center;
margin-top: 15px;
background-color: rgba(0, 0, 0, 0.3);
padding: 15px;
border-bottom: white 2px solid;
}
/* Talvez eu tenha que arrumar no responsivo */
.menu {
display: flex;
justify-content: flex-end;
}
.menu-list,
a {
display: flex;
list-style-type: none;
text-decoration: none;
color: white;
padding: 15px 15px 0 0;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
/* */
.title {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.infos {
display: flex;
justify-content: center;
align-items: center;
}
#Plans-section {
display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
padding: 1vh;
border: 5px solid rgba(0, 0, 0, 0.7);
}
.card-item {
margin: 15px 15px 15px 15px;
}
.subtitle {
background-color: #3B5159;
padding: 0.5em;
color: white;
text-align: center;
}
#About-Us-section {
display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
background-color: #878A8C;
padding: 1vh;
border: 7px solid rgba(0, 0, 0, 0.7);
line-height: 2;
}
.about-title {
text-align: center;
}
footer {
background-color: #283940;
height: 80px;
text-align: center;
line-height: 80px;
}
#media screen and (min-width:320px) and (max-width:375px) {
.menu {
display: flex;
justify-content: flex-end;
margin-right: 35px;
}
#Plans-section {
width: 80vw;
}
.images {
height: 100px;
width: 200px;
}
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Assets/CSS/style.css">
<title>Projeto</title>
</head>
<body>
<header class="banner">
<nav class="menu">
<ul class="menu-list">
<li class="menu-item">Início</li>
<li class="menu-item">Planos</li>
<li class="menu-item">Sobre nós</li>
</ul>
</nav>
<div class="title">
<div class="titulo">
<h1> Corretora Everest </h1>
<p class="slogan"><b><em>Te ajudamos a chegar alto </em></b></p>
</div>
</div>
</header>
<div class="infos">
<main>
<section id="Plans-section">
<div class="card-item">
<img class="images" src="./Assets/imagens/card_01.png" alt="">
<p class="subtitle">Plano Star</p>
</div>
<div class="card-item">
<img class="images" src="./Assets/imagens/card_03.jpg" alt="">
<p class="subtitle">Plano Diamond</p>
</div>
<div class="card-item">
<img class="images" src="./Assets/imagens/card_05.jpg" alt="">
<p class="subtitle"> Plano Magic</p>
</div>
</section>
<section id="About-Us-section">
<article>
<header class="about-title">
<h2>Sobre nós</h2>
</header>
<ul class="info-text">
<li>
<p>Investimos o seu dinheiro como se fosse <b>nosso</b></p>
</li>
<li>
<p>Com planos de investimentos personalizados te ajudamos a <b>chegar alto!</b></p>
</li>
<li>
<p>Nosso time conta apenas com especialistas da área</p>
</li>
</ul>
</article>
</section>
</main>
</div>
<footer>
<p>Copyright © 2022</p>
</footer>
</body>
</html>
I just created a contact Us form in HTML and CSS. I want a responsive page. In desktop everything works fine but When I try in mobile or tablet both contactForm and contactInfo shifts itself automatically into top and bottom position. I want to put them side by side in also mobile devices. I don't know why this is happening?
there are two parts in container:
contactForm
ContactInfo
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", sans-serif;
}
.contact {
position: relative;
min-height: 100vh;
padding: 50px 100px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: lightgreen;
}
.contact .content {
max-width: 800px;
text-align: center;
}
.contact .content h2 {
font-size: 36px;
font-weight: 500;
color: blue;
}
.contact .content p {
font-weight: 300;
color: blue;
}
.container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
}
.container .contactInfo {
width: 50%;
display: flex;
flex-direction: column;
}
.container .contactInfo .box {
position: relative;
padding: 20px 0;
display: flex;
}
.container .contactInfo .box .text {
display: flex;
margin-left: 20px;
font-size: 16px;
color: green;
flex-direction: column;
font-weight: 300;
}
.container .contactInfo .box .text h3 {
font-weight: 500;
color: red;
}
.contactForm {
padding: 40px;
background: #fff;
}
.contactForm h2 {
font-size: 30px;
color: #333;
font-weight: 500;
}
.contactForm .inputBox {
position: relative;
width: 100%;
margin-top: 10px;
}
.contactForm .inputBox input,
.contactForm .inputBox textarea {
width: 100%;
padding: 5px 0;
font-size: 16px;
margin: 10px 0;
border: none;
border-bottom: 2px solid black;
outline: none;
resize: none;
}
.contactForm .inputBox input[type="submit"] {
width: 100px;
background: #000;
color: orange;
border: none;
cursor: pointer;
padding: 10px;
font-size: 18px;
}
#media (max-width: 991px) {
.contact {
padding: 50px;
}
.container {
flex-direction: column;
}
.container .contactInfo {
margin-bottom: 40px;
}
.container .contactInfo {
width: 100%;
}
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<section class="contact">
<div class="content">
<h2>Reach Us</h2>
<p>
We would love to respond to your queries and help you succeed.<br />Feel
free to get in touch with us
</p>
</div>
<div class="container">
<!-- contact form -->
<div class="contactForm">
<form action="contact.php">
<h2>Send Query</h2>
<div class="inputBox">
<input type="text" name="" required="required" />
<span>Full Name</span>
</div>
<div class="inputBox">
<input type="email" name="" required="required" />
<span>Email Id</span>
</div>
<div class="inputBox">
<input type="number" name="" required="required" />
<span>Phone</span>
</div>
<div class="inputBox">
<input type="text" name="" required="required" />
<span>Address</span>
</div>
<div class="inputBox">
<textarea name="" id="" required="required"></textarea>
<span>Type your Query</span>
</div>
<div class="inputBox">
<input type="submit" name="" required="required" value="Send" />
</div>
</form>
</div>
<!-- reach us -->
<div class="contactInfo">
<div class="box">
<div class="icon"></div>
<div class="text">
<h3>Address</h3>
<p>AaBbbbbbbb,<br />fdafafdfa,<br />fdafafgafa</p>
</div>
</div>
<div class="box">
<div class="icon"></div>
<div class="text">
<h3>Phone</h3>
<p>+91 91XXXXXXXXXX</p>
</div>
</div>
<div class="box">
<div class="icon"></div>
<div class="text">
<h3>Email</h3>
<p>asdfghjkl.gmail.com</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
If you want .contactform and .contactinfo container side by side. You can do it in two simple ways
Instead of flex-direction: column, You can use flex-direction: row.
No need to write unnecessary CSS. Just remove the flex-direction property from the media query.
#media (max-width: 991px) {
.contact {
padding: 50px;
}
/* .container {
flex-direction: column;
} */
.container .contactInfo {
margin-bottom: 40px;
}
.container .contactInfo {
width: 100%;
}
}
I faced the issue with the layout of website being changed by the Google developer tool window which opens when you click F12. So, to be more clear, when I click F12, the window appears but as I move the window upwards the layout gets changed, that is, gallery section reacts to the window and also moves upwards. I do not even know what is causing such problem. I really need your help. Here is the code I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./main.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="./external/owl.carousel.min.css">
<link rel="stylesheet" href="./external/owl.theme.default.min.css">
<title>Document</title>
</head>
<body>
<header class="header">
<div class="container">
<div class="row">
<div class="col-md-6 intro__welcome-box">
<p class="header__welcome-content">Welcome to our kids School!!</p>
</div>
</div>
</div>
<div class="navbar">
<div class="container">
<div class="row flex-container">
<h1 class="logo-box">
<a href="#">
<img class="logo-box__image" src="./images/logo.png" alt="The logo">
</a>
<span class="logo-box__motto"> Все начинается с детской мечты</span>
</h1>
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__link">О Sunnyvale</li>
<li class="navigation__link">Галерея</li>
<li class="navigation__link">Персонал</li>
<li class="navigation__link">Услуги</li>
<li class="navigation__link">Контакты</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<section class="showcase">
<div class="container-fluid p-h-0">
<div class="row">
<div class="col-md-6">
<img src="./primary-original.jpg" alt="">
</div>
<div class="col-md-6">
<div class="showcase-content">
<h2>Join Our Journey</h2>
<p>of World Discovery</p>
Find Out More
</div>
</div>
</div>
</div>
</section>
<section class="gallery">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="content">
<h2>
Добро Пожаловать в галерею Sunnyvale
</h2>
</div>
<div class="content-links m-v-30">
<a class="anchor light-red" href="">Узнать больше</a>
<a class="anchor orange" href="">Смотреть Все</a>
</div>
</div>
<div class="col-md-6">
<div class="carousel-container">
<div class="owl-carousel room-carousel owl-theme">
<img src="./medium-98dcfe.jpg" alt="">
<img src="./primary-original.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="./external/owl.carousel.min.js"></script>
<script>
$('.room-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:1
}
}
})
</script>
</body>
</html>
CSS code
.header {
background: #ecf0f1;
}
.header [class*='intro'] {
padding: 2rem;
}
p {
margin: 0;
}
.intro__welcome-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navbar {
background: white;
}
.logo-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.logo-box__motto {
font-size: 16px;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
border-left: 1px solid rgba(88, 87, 87, 0.507);
padding: 0 1rem;
color: rgba(88, 87, 87, 0.507);
font-weight: bold;
line-height: 1.5;
}
.logo-box__image {
padding-right: 1rem;
}
.logo-box__motto {
width: 30%;
text-transform: uppercase;
font-size: 1.5rem;
}
.gallery {
padding: 5rem 0;
}
.gallery .content {
width: 40%;
text-align: center;
text-transform: uppercase;
font-size: 2rem;
margin: auto;
}
.gallery .content h2 {
line-height: 1.5;
}
.m-v-30 {
margin: 30px 0;
}
.content-links {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.anchor {
text-decoration: none;
color: white;
font-weight: 600;
display: inline-block;
padding: 1rem 1.5rem;
border-radius: 30px;
text-transform: uppercase;
}
.anchor:hover {
text-decoration: none;
color: white;
}
.anchor.light-red {
background: rgba(255, 0, 0, 0.658);
margin-left: 7rem;
}
.anchor.orange {
background: orange;
margin-right: 7rem;
}
.carousel-container {
height: 300px;
border-radius: 10px;
overflow-y: hidden;
}
.p-h-0 {
padding: 0;
}
.cloud {
height: 200px;
width: 100%;
background-image: url(/cloud.png);
position: absolute;
bottom: 0;
}
.showcase img {
width: 100%;
height: 100%;
}
.showcase {
height: 70vh;
position: relative;
}
.header__tel-number {
color: #ff7b00;
font-weight: 700;
font-size: 1.5rem;
}
.navigation__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style: none;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.navigation__link a {
display: inline-block;
padding: 5px 10px;
border-radius: 20px;
text-decoration: none;
text-transform: uppercase;
color: rgba(44, 43, 43, 0.603);
font-weight: 600;
-webkit-transition: background .5s, color .5s;
transition: background .5s, color .5s;
}
.navigation__link a:hover {
color: white;
background: #ff7b00;
}
.flex-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navigation {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.intro__address-box p {
text-align: right;
}
/*# sourceMappingURL=main.css.map */
This is happening because the .showcase section has the height set to 70vh, which is relative to the viewport-height. When you open the Dev Tools, the height of the window gets smaller, thus 70vh becoming less than with the full screen, thus moving the gallery upwards.
Simply remove height: 70vh; from .showcase to fix the issue.
Code snippet below:
.header {
background: #ecf0f1;
}
.header [class*='intro'] {
padding: 2rem;
}
p {
margin: 0;
}
.intro__welcome-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navbar {
background: white;
}
.logo-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.logo-box__motto {
font-size: 16px;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
border-left: 1px solid rgba(88, 87, 87, 0.507);
padding: 0 1rem;
color: rgba(88, 87, 87, 0.507);
font-weight: bold;
line-height: 1.5;
}
.logo-box__image {
padding-right: 1rem;
}
.logo-box__motto {
width: 30%;
text-transform: uppercase;
font-size: 1.5rem;
}
.gallery {
padding: 5rem 0;
}
.gallery .content {
width: 40%;
text-align: center;
text-transform: uppercase;
font-size: 2rem;
margin: auto;
}
.gallery .content h2 {
line-height: 1.5;
}
.m-v-30 {
margin: 30px 0;
}
.content-links {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.anchor {
text-decoration: none;
color: white;
font-weight: 600;
display: inline-block;
padding: 1rem 1.5rem;
border-radius: 30px;
text-transform: uppercase;
}
.anchor:hover {
text-decoration: none;
color: white;
}
.anchor.light-red {
background: rgba(255, 0, 0, 0.658);
margin-left: 7rem;
}
.anchor.orange {
background: orange;
margin-right: 7rem;
}
.carousel-container {
height: 300px;
border-radius: 10px;
overflow-y: hidden;
}
.p-h-0 {
padding: 0;
}
.cloud {
height: 200px;
width: 100%;
background-image: url(/cloud.png);
position: absolute;
bottom: 0;
}
.showcase img {
width: 100%;
height: 100%;
}
.showcase {
/* height: 70vh; */
position: relative;
}
.header__tel-number {
color: #ff7b00;
font-weight: 700;
font-size: 1.5rem;
}
.navigation__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style: none;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.navigation__link a {
display: inline-block;
padding: 5px 10px;
border-radius: 20px;
text-decoration: none;
text-transform: uppercase;
color: rgba(44, 43, 43, 0.603);
font-weight: 600;
-webkit-transition: background .5s, color .5s;
transition: background .5s, color .5s;
}
.navigation__link a:hover {
color: white;
background: #ff7b00;
}
.flex-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navigation {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.intro__address-box p {
text-align: right;
}
/*# sourceMappingURL=main.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="./main.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<title>Document</title>
</head>
<body>
<header class="header">
<div class="container">
<div class="row">
<div class="col-md-6 intro__welcome-box">
<p class="header__welcome-content">Welcome to our kids School!!</p>
</div>
</div>
</div>
<div class="navbar">
<div class="container">
<div class="row flex-container">
<h1 class="logo-box">
<a href="#">
<img class="logo-box__image" src="./images/logo.png" alt="The logo">
</a>
<span class="logo-box__motto"> Все начинается с детской мечты</span>
</h1>
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__link">О Sunnyvale</li>
<li class="navigation__link">Галерея</li>
<li class="navigation__link">Персонал</li>
<li class="navigation__link">Услуги</li>
<li class="navigation__link">Контакты</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<section class="showcase">
<div class="container-fluid p-h-0">
<div class="row">
<div class="col-md-6">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg" alt="">
</div>
<div class="col-md-6">
<div class="showcase-content">
<h2>Join Our Journey</h2>
<p>of World Discovery</p>
Find Out More
</div>
</div>
</div>
</div>
</section>
<section class="gallery">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="content">
<h2>
Добро Пожаловать в галерею Sunnyvale
</h2>
</div>
<div class="content-links m-v-30">
<a class="anchor light-red" href="">Узнать больше</a>
<a class="anchor orange" href="">Смотреть Все</a>
</div>
</div>
<div class="col-md-6">
<div class="carousel-container">
<div class="owl-carousel room-carousel owl-theme">
<img src="https://www.newyorkpass.com/images/rebrand/prices_01.jpg" alt="">
<img src="https://thenypost.files.wordpress.com/2017/04/new-york.jpg?quality=90&strip=all&w=618&h=410&crop=1" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<script>
$('.room-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:1
}
}
})
</script>
</body>
</html>
The Chrome development tool is not an overlay by default, it's width/height is taken off the display screen. Since your design is responsive, it will adapt to the display size (which is browser window minus developer tool).
Solution: in the developer tool's menu, select "Undock into separate window"
Screenshot: https://i.stack.imgur.com/zhWz7.png
I'm trying to add filter options to my filter area but have been unsuccessful so far. Text appears just fine, but things like text boxes, radio boxes, buttons, etc aren't appearing for some reason. Probably a simple fix, but I'm very new to CSS, HTML and design in general. If anyone could point me in the right direction, that would be awesome!
Screenshot: https://i.imgur.com/5KwXys4.jpg
HTML
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Some Web Page</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<div class='menu-container'>
<div class='menu'>
<div class='links'>
<div class='signup'>Sign Up</div>
<div class='login'>Login</div>
</div>
</div>
</div>
<div class='header-container'>
<div class='header'>
<div class='logo'><img src='images/postloco.svg'/></div>
</div>
</div>
<main>
<input id="toggle" type="checkbox">
<label for="toggle">
<div class="filterbutton"><img src='images/filterbutton.svg'/></div>
</label>
<div id="expand">
<section class="Filter">
<h2>Text field</h2>
<p>The <strong>input type="text"</strong> defines a one-line text input field:</p>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
<br><br>
<input type="submit">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of a text field is 20 characters.</p>
</section>
</div>
</main>
<section class="carousel">
</section>
</body>
<footer>
<img src="images/facebook.svg" alt="facebook" title="facebook" href="#" class="social">
<img src="images/twitter.svg" alt="twitter" title="twitter" href="#" class="social">
<img src="images/instagram.svg" alt="instagram" title="instagram" href="#" class="social">
<img src="images/snapchat.svg" alt="snapchat" title="snapchat" href="#" class="social">
<ul>
<a alt="about" title="About" href="#" class="footerlink">About</a>
<a alt="about" title="About" href="#" class="footerlink">Contact</a>
<a alt="about" title="About" href="#" class="footerlink">Team</a>
<a alt="about" title="About" href="#" class="footerlink">Whatever</a>
</ul>
</footer>
</html>
CSS
* {
margin: 0;
padding: 0;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.menu-container {
color: #fff;
background-color: #A34F43;
padding: 20px 0;
display: flex;
justify-content: space-between;
}
.menu {
width: 100%;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.links {
display: flex;
justify-content: flex-end;
}
.login {
margin-left: 20px;
}
.header-container {
background-color: #FF7C69;
display: flex;
justify-content: center;
}
.header {
width: 100%;
height: 300px;
display: flex;
justify-content: space-between;
align-items: center;
}
.carousel-test {
display: flex;
justify-content: center;
}
.carousel-grid-container {
display: flex;
justify-content: center;
}
.carousel-grid {
width: 900px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.logo {
width: 200px;
display: block;
margin: 0 auto;
}
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: "Open Sans", Arial;
width: 100%;
}
main {
background: #FF7C69;
width: 100%;
margin: 0px auto;
}
input {
display: none;
visibility: hidden;
}
label {
/* display: block; */
/* text-align: center; */
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
label:hover {
color: #000;
}
#expand {
height: 0px;
overflow: hidden;
transition: height 0.3s;
background-color: #D6DBED;
color: black;
}
#toggle:checked ~ #expand {
height: 250px;
}
footer {
background-color: #A34F43;
text-align: right;
color: #eee;
text-align: center;
position: absolute;
width: 100%;
/* display: flex; */
}
.footerlink {
text-decoration: none;
color: white;
text-align: justify;
display: block;
padding: 1px;
}
.social {
padding: 10px;
width: 50px;
text-align: right;
float: right;
}
.social:hover {
opacity: 0.7;
}
legend {
background-color: #000;
color: #fff;
padding: 3px 6px;
}
.output {
font: 1rem 'Fira Sans', sans-serif;
}
input {
margin: .4rem;
}
.filterbutton {
margin: 0px;
padding: 0px;
width: 150px;
display: block;
}
In your css you have this line that is hiding all form inputs
input {
display: none;
visibility: hidden;
}
I don't think you want to globally hide all inputs like this. If you need to hide certain input items you can group them either by css or by putting them in special HTML tags (divs for instance)
I see that you are having your main form expand after clicking a checkbox. In this case things should still work after removing the line above.