I added #media screen and (max-width: 1000px) rule to my code with modifications it would make. I wanted to make boxes stack up on width: 1000px; and I did succeed to do that, however, now when the boxes stack up, there is an extra space to the right of my webpage.
It appears that my boxes somehow conflict with one of the lines of the header style. Tried removing margins and did not pay off. I want that space removed that those boxes add.
Also, it is possible that the header does not have to do anything here and only the boxes are stretching out the website.
body {
margin: 0;
}
.header {
width: 100%;
height: 100vh;
background-color: #262626;
display: table-cell;
vertical-align: middle;
}
.header h1 {
line-height: 50%;
color: white;
text-align: center;
font-size: 5em;
}
.content {
margin-top: 10%;
}
.subcontent div a {
user-select: none;
font-size: 30px;
display: table-cell;
vertical-align: middle;
text-decoration: none;
text-align: center;
color: black;
font-weight: normal;
border: 2px solid #3B3B3B;
font-family: "ALK Rounded Mtav Med", sans-serif;
transition-duration: 0.3s;
}
.subcontent {
display: flex;
justify-content: center;
}
.subcontent div {
display: table;
margin: 15px;
height: 500px;
width: 100%;
transition-duration: 0.15s;
}
#media screen and (max-width: 1000px) {
.subcontent {
display: block;
}
.subcontent div {
height: 300px;
margin-top: 15px;
margin-bottom: 15px;
}
}
<body>
<div style="display: table; width: 100%;">
<div class="header">
<h1>ვისწავლოთ</h1>
<h1>იაპონური</h1>
</div>
</div>
<div class="content">
<div class="subcontent">
<div>
ანბანი
</div>
<div>
გრამატიკა
</div>
</div>
<div class="subcontent">
<div>
ლექსიკონი
</div>
<div>
დიალოგები
</div>
</div>
</div>
</body>
Don't change display:flex to display:block. Instead you can simply change flex-diretion to column and make width:auto to avoid the overflow due to the margin added to the width:100%.
body {
margin: 0;
}
.header {
width: 100%;
height: 100vh;
background-color: #262626;
display: table-cell;
vertical-align: middle;
}
.header h1 {
line-height: 50%;
color: white;
text-align: center;
font-size: 5em;
}
.content {
margin-top: 10%;
}
.subcontent div a {
user-select: none;
font-size: 30px;
display: table-cell;
vertical-align: middle;
text-decoration: none;
text-align: center;
color: black;
font-weight: normal;
border: 2px solid #3B3B3B;
font-family: "ALK Rounded Mtav Med", sans-serif;
transition-duration: 0.3s;
}
.subcontent {
display: flex;
justify-content: center;
}
.subcontent div {
display: table;
margin: 15px;
height: 500px;
width: 100%;
transition-duration: 0.15s;
}
#media screen and (max-width: 1000px) {
.subcontent {
flex-direction:column;
}
.subcontent div {
height: 300px;
width:auto;
margin-top: 15px;
margin-bottom: 15px;
}
}
<body>
<div style="display: table; width: 100%;">
<div class="header">
<h1>ვისწავლოთ</h1>
<h1>იაპონური</h1>
</div>
</div>
<div class="content">
<div class="subcontent">
<div>
ანბანი
</div>
<div>
გრამატიკა
</div>
</div>
<div class="subcontent">
<div>
ლექსიკონი
</div>
<div>
დიალოგები
</div>
</div>
</div>
</body>
It's because of the margin: 15px on the .subcontent which makes a margin of 15px all around the .subcontent
body {
margin: 0;
}
.header {
width: 100%;
height: 100vh;
background-color: #262626;
display: table-cell;
vertical-align: middle;
}
.header h1 {
line-height: 50%;
color: white;
text-align: center;
font-size: 5em;
}
.content {
margin-top: 10%;
}
.subcontent div a {
user-select: none;
font-size: 30px;
display: table-cell;
vertical-align: middle;
text-decoration: none;
text-align: center;
color: black;
font-weight: normal;
border: 2px solid #3B3B3B;
font-family: "ALK Rounded Mtav Med", sans-serif;
transition-duration: 0.3s;
}
.subcontent {
display: flex;
justify-content: center;
}
.subcontent div {
display: table;
/* margin: 15px; This is the villain */
height: 500px;
width: 100%;
transition-duration: 0.15s;
}
#media screen and (max-width: 1000px) {
.subcontent {
display: block;
}
.subcontent div {
height: 300px;
margin-top: 15px;
margin-bottom: 15px;
}
}
<body>
<div style="display: table; width: 100%;">
<div class="header">
<h1>ვისწავლოთ</h1>
<h1>იაპონური</h1>
</div>
</div>
<div class="content">
<div class="subcontent">
<div>
ანბანი
</div>
<div>
გრამატიკა
</div>
</div>
<div class="subcontent">
<div>
ლექსიკონი
</div>
<div>
დიალოგები
</div>
</div>
</div>
</body>
Fiddle here
Related
Still learning code. I am building a contact page and wanted to include my header bar at the top of the page, but when I added the code for this my header bar appears to the left of my page all wacky. I know this is most likely a CSS error, but I can't seem to pinpoint why my header bar wouldn't display at the top of my page. Anyone willing to take a look? Here's my code.
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!-- <title> Responsive Contact Us Form | CodingLab </title>
<link rel="stylesheet" href="style.css">
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<link href="css/stylesheet2.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<section class="header">
<div class="header_content">
<div class="logo_container">
<a href="index.html">
<img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
</a>
</div>
<ul class="navigation">
<li>Home</li>
<li>Portfolio</li>
<li>About ME
<li>Contact</li>
</ul>
</div>
</section>
</header>
<div class="container">
<div class="content">
<div class="left-side">
<div class="address details">
<i class="fas fa-map-marker-alt"></i>
<div class="topic">Address</div>
<div class="text-one">Los Angles, CA</div>
<div class="text-two">Austin,TX</div>
</div>
<div class="phone details">
<i class="fas fa-phone-alt"></i>
<div class="topic">Phone</div>
<div class="text-one">(512) xxx-xxxx</div>
<div class="text-two">+</div>
</div>
<div class="email details">
<i class="fas fa-envelope"></i>
<div class="topic">Email</div>
<div class="text-one">artuciidesign#gmail.com</div>
<div class="text-two">alexandria.brown3#snhu.com</div>
</div>
</div>
<div class="right-side">
<div class="topic-text">Send me a message!</div>
<br>
<p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Enter your name">
</div>
<div class="input-box">
<input type="text" placeholder="Enter your email">
</div>
<div class="input-box message-box">
</div>
<div class="button">
<input type="button" value="Send Now" >
</div>
</form>
</div>
</div>
</div>
</body>
</html>
/* About ME */
/* Google Font CDN Link */
/* Header */
.header {
width: 100%;
height: 50px;
display: block;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.logo_container {
height: 100%;
display: table;
float: left;
border: none;
}
.logo {
max-height: 50px;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
text-decoration: none;
}
a:hover {
color: #bc0456 !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color:#067393;
font-family: Kapelka New;
text-decoration: none !important;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: black;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
body{
min-height: 100vh;
width: 100%;
background: #f99a61;
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 85%;
background: #fff;
border-radius: 6px;
padding: 20px 60px 30px 40px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.container .content .left-side{
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 15px;
position: relative;
}
.content .left-side::before{
content: '';
position: absolute;
height: 70%;
width: 2px;
right: -15px;
top: 50%;
transform: translateY(-50%);
background: #afafb6;
}
.content .left-side .details{
margin: 14px;
text-align: center;
}
.content .left-side .details i{
font-size: 30px;
color: #067393;
margin-bottom: 10px;
}
.content .left-side .details .topic{
font-size: 18px;
font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two{
font-size: 14px;
color: #afafb6;
}
.container .content .right-side{
width: 75%;
margin-left: 75px;
}
.content .right-side .topic-text{
font-size: 23px;
font-weight: 600;
color: #bc0456;
}
.right-side .input-box{
height: 50px;
width: 100%;
margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea{
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 16px;
background: #F0F1F8;
border-radius: 6px;
padding: 0 15px;
resize: none;
}
.right-side .message-box{
min-height: 110px;
}
.right-side .input-box textarea{
padding-top: 6px;
}
.right-side .button{
display: inline-block;
margin-top: 12px;
}
.right-side .button input[type="button"]{
color: #fff;
font-size: 18px;
outline: none;
border: none;
padding: 8px 16px;
border-radius: 6px;
background: #067393;
cursor: pointer;
transition: all 0.3s ease;
}
.button input[type="button"]:hover{
background: #bc0456;
}
#media (max-width: 950px) {
.container{
width: 90%;
padding: 30px 40px 40px 35px ;
}
.container .content .right-side{
width: 75%;
margin-left: 55px;
}
}
#media (max-width: 820px) {
.container{
margin: 40px 0;
height: 100%;
}
.container .content{
flex-direction: column-reverse;
}
.container .content .left-side{
width: 100%;
flex-direction: row;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.container .content .left-side::before{
display: none;
}
.container .content .right-side{
width: 100%;
margin-left: 0;
}
}
Your <header> (as opposed to <head>) has to be inside the <body> tag (which contains everything that is visible on the page)!
As a start, IMO, <body> should not be styled as flex, at least not when using <header> which brings its own defaults which were being overridden.
Moving the flex styles from body to .container will fix your immediate request, but probably introduce other styling concerns.
.header {
width: 100%;
height: 50px;
display: block;
background-color: #61d1e2;
/* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: #61d1e2;
/* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.logo_container {
height: 100%;
display: table;
float: left;
border: none;
}
.logo {
max-height: 50px;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
text-decoration: none;
}
a:hover {
color: #bc0456 !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color: #067393;
font-family: Kapelka New;
text-decoration: none !important;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: black;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
min-height: 100vh;
width: 100%;
background: #f99a61;
}
.container {
display: flex;
align-items: center;
justify-content: center;
width: 85%;
background: #fff;
border-radius: 6px;
padding: 20px 60px 30px 40px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .content {
display: flex;
align-items: center;
justify-content: space-between;
}
.container .content .left-side {
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 15px;
position: relative;
}
.content .left-side::before {
content: '';
position: absolute;
height: 70%;
width: 2px;
right: -15px;
top: 50%;
transform: translateY(-50%);
background: #afafb6;
}
.content .left-side .details {
margin: 14px;
text-align: center;
}
.content .left-side .details i {
font-size: 30px;
color: #067393;
margin-bottom: 10px;
}
.content .left-side .details .topic {
font-size: 18px;
font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two {
font-size: 14px;
color: #afafb6;
}
.container .content .right-side {
width: 75%;
margin-left: 75px;
}
.content .right-side .topic-text {
font-size: 23px;
font-weight: 600;
color: #bc0456;
}
.right-side .input-box {
height: 50px;
width: 100%;
margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea {
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 16px;
background: #F0F1F8;
border-radius: 6px;
padding: 0 15px;
resize: none;
}
.right-side .message-box {
min-height: 110px;
}
.right-side .input-box textarea {
padding-top: 6px;
}
.right-side .button {
display: inline-block;
margin-top: 12px;
}
.right-side .button input[type="button"] {
color: #fff;
font-size: 18px;
outline: none;
border: none;
padding: 8px 16px;
border-radius: 6px;
background: #067393;
cursor: pointer;
transition: all 0.3s ease;
}
.button input[type="button"]:hover {
background: #bc0456;
}
#media (max-width: 950px) {
.container {
width: 90%;
padding: 30px 40px 40px 35px;
}
.container .content .right-side {
width: 75%;
margin-left: 55px;
}
}
#media (max-width: 820px) {
.container {
margin: 40px 0;
height: 100%;
}
.container .content {
flex-direction: column-reverse;
}
.container .content .left-side {
width: 100%;
flex-direction: row;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.container .content .left-side::before {
display: none;
}
.container .content .right-side {
width: 100%;
margin-left: 0;
}
}
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
</head>
<body>
<header>
<section class="header">
<div class="header_content">
<div class="logo_container">
<a href="index.html">
<img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
</a>
</div>
<ul class="navigation">
<li>Home</li>
<li>Portfolio</li>
<li>About ME
<li>Contact</li>
</ul>
</div>
</section>
</header>
<div class="container">
<div class="content">
<div class="left-side">
<div class="address details">
<i class="fas fa-map-marker-alt"></i>
<div class="topic">Address</div>
<div class="text-one">Los Angles, CA</div>
<div class="text-two">Austin,TX</div>
</div>
<div class="phone details">
<i class="fas fa-phone-alt"></i>
<div class="topic">Phone</div>
<div class="text-one">(512) xxx-xxxx</div>
<div class="text-two">+</div>
</div>
<div class="email details">
<i class="fas fa-envelope"></i>
<div class="topic">Email</div>
<div class="text-one">artuciidesign#gmail.com</div>
<div class="text-two">alexandria.brown3#snhu.com</div>
</div>
</div>
<div class="right-side">
<div class="topic-text">Send me a message!</div>
<br>
<p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Enter your name">
</div>
<div class="input-box">
<input type="text" placeholder="Enter your email">
</div>
<div class="input-box message-box">
</div>
<div class="button">
<input type="button" value="Send Now">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
The problem occurs from the body. You assign to flex. I removed it and create a new div which wrappend the container. If you want reduce the width in the navbar you have to wrapped to another div and center it.
/* About ME */
/* Google Font CDN Link */
/* Header */
.header {
width: 100%;
height: 50px;
display: block;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.logo_container {
height: 100%;
display: table;
float: left;
border: none;
}
.logo {
max-height: 50px;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
text-decoration: none;
}
a:hover {
color: #bc0456 !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color:#067393;
font-family: Kapelka New;
text-decoration: none !important;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: black;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
body{
min-height: 100vh;
width: 100%;
background: #f99a61;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 85%;
background: #fff;
border-radius: 6px;
padding: 20px 60px 30px 40px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.container .content .left-side{
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 15px;
position: relative;
}
.content .left-side::before{
content: '';
position: absolute;
height: 70%;
width: 2px;
right: -15px;
top: 50%;
transform: translateY(-50%);
background: #afafb6;
}
.content .left-side .details{
margin: 14px;
text-align: center;
}
.content .left-side .details i{
font-size: 30px;
color: #067393;
margin-bottom: 10px;
}
.content .left-side .details .topic{
font-size: 18px;
font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two{
font-size: 14px;
color: #afafb6;
}
.container .content .right-side{
width: 75%;
margin-left: 75px;
}
.content .right-side .topic-text{
font-size: 23px;
font-weight: 600;
color: #bc0456;
}
.right-side .input-box{
height: 50px;
width: 100%;
margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea{
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 16px;
background: #F0F1F8;
border-radius: 6px;
padding: 0 15px;
resize: none;
}
.right-side .message-box{
min-height: 110px;
}
.right-side .input-box textarea{
padding-top: 6px;
}
.right-side .button{
display: inline-block;
margin-top: 12px;
}
.right-side .button input[type="button"]{
color: #fff;
font-size: 18px;
outline: none;
border: none;
padding: 8px 16px;
border-radius: 6px;
background: #067393;
cursor: pointer;
transition: all 0.3s ease;
}
.button input[type="button"]:hover{
background: #bc0456;
}
#media (max-width: 950px) {
.container{
width: 90%;
padding: 30px 40px 40px 35px ;
}
.container .content .right-side{
width: 75%;
margin-left: 55px;
}
}
#media (max-width: 820px) {
.container{
margin: 40px 0;
height: 100%;
}
.container .content{
flex-direction: column-reverse;
}
.container .content .left-side{
width: 100%;
flex-direction: row;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.container .content .left-side::before{
display: none;
}
.container .content .right-side{
width: 100%;
margin-left: 0;
}
}
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!-- <title> Responsive Contact Us Form | CodingLab </title>
<link rel="stylesheet" href="style.css">
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<link href="css/stylesheet2.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="header">
<div class="header_content">
<div class="logo_container">
<a href="index.html">
<img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
</a>
</div>
<ul class="navigation">
<li>Home</li>
<li>Portfolio</li>
<li>About ME
<li>Contact</li>
</ul>
</div>
</header>
<div class="wrapper">
<div class="container">
<div class="content">
<div class="left-side">
<div class="address details">
<i class="fas fa-map-marker-alt"></i>
<div class="topic">Address</div>
<div class="text-one">Los Angles, CA</div>
<div class="text-two">Austin,TX</div>
</div>
<div class="phone details">
<i class="fas fa-phone-alt"></i>
<div class="topic">Phone</div>
<div class="text-one">(512) xxx-xxxx</div>
<div class="text-two">+</div>
</div>
<div class="email details">
<i class="fas fa-envelope"></i>
<div class="topic">Email</div>
<div class="text-one">artuciidesign#gmail.com</div>
<div class="text-two">alexandria.brown3#snhu.com</div>
</div>
</div>
<div class="right-side">
<div class="topic-text">Send me a message!</div>
<br>
<p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Enter your name">
</div>
<div class="input-box">
<input type="text" placeholder="Enter your email">
</div>
<div class="input-box message-box">
</div>
<div class="button">
<input type="button" value="Send Now" >
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
I wanna have the button under the text if the pixel width of the screen is <= 664px. If it's unclear what I mean, here is an image link to image - I hope this helps.
Basically I want to make it responsive. I tried some things but nothing worked. Has someone a idea?
.main {
flex: 63%;
background-color: white;
}
.main-box {
background-color: #ffffff;
height: 130px;
display: table;
width: 798px;
border-right: solid;
border-left: solid;
border-bottom: solid;
border-color: #E6E6E6;
}
.text-in-main-box{
font-weight: bold;
font-family: rob;
width: 60%;
padding: 7%;
display: table-cell;
vertical-align: middle;
}
.container-for-button-in-main-box{
width: 40%;
display: table-cell;
vertical-align: middle;
height: 100%;
}
.button-in-main-box{
display:inline-block;
padding:0.8em 1.2em;
margin:0 0.3em 0.3em 0;
border-radius:4em;
box-sizing: border-box;
text-decoration:none;
font-family:rob;
font-weight:bold;
color:#ffffff;
background-color:#34E034;
text-align:center;
transition: all 0.2s;
}
.button-in-main-box:hover{
transform: scale(1.1);
}
<div class="main-box">
<div class="text-in-main-box">Sage “Hallo, Welt" mit Python</div>
<div class="container-for-button-in-main-box"><span class = button-in-main-box>Löse Aufgabe</span></div>
</div>
Go for media-query #media only screen and (max-width: 664px)
.main {
flex: 63%;
background-color: white;
}
.main-box {
background-color: #ffffff;
height: 130px;
display: table;
width: 798px;
border-right: solid;
border-left: solid;
border-bottom: solid;
border-color: #E6E6E6;
}
.text-in-main-box {
font-weight: bold;
font-family: rob;
width: 60%;
padding: 7%;
display: table-cell;
vertical-align: middle;
}
.container-for-button-in-main-box {
width: 40%;
display: table-cell;
vertical-align: middle;
height: 100%;
}
.button-in-main-box {
display: inline-block;
padding: 0.8em 1.2em;
margin: 0 0.3em 0.3em 0;
border-radius: 4em;
box-sizing: border-box;
text-decoration: none;
font-family: rob;
font-weight: bold;
color: #ffffff;
background-color: #34E034;
text-align: center;
transition: all 0.2s;
}
.button-in-main-box:hover {
transform: scale(1.1);
}
#media only screen and (max-width: 664px) {
.main-box {
width: 100%;
max-width: 798px;
display: flex;
flex-direction: column;
height: auto;
}
.text-in-main-box {
width: 100%
padding: 7% 0;
text-align: center;
}
.container-for-button-in-main-box {
width: 100%;
display: flex;
justify-content: center;
}
}
<div class="main-box">
<div class="text-in-main-box">Sage “Hallo, Welt" mit Python</div>
<div class="container-for-button-in-main-box"><span class=button-in-main-box>Löse Aufgabe</span></div>
</div>
Complete flex implementation for your solution will be something like below.
.main-box {
background-color: #ffffff;
height: 130px;
display: flex;
width: 798px;
border-right: solid;
border-left: solid;
border-bottom: solid;
border-color: #E6E6E6;
}
.text-in-main-box {
font-weight: bold;
font-family: rob;
width: 60%;
padding: 7%;
display: flex;
vertical-align: middle;
}
.container-for-button-in-main-box {
width: 40%;
display: flex;
vertical-align: middle;
/* height: 100%; */
flex-direction: column;
align-items: center;
justify-content: center;
}
.button-in-main-box {
display: inline-block;
padding: 0.8em 1.2em;
margin: 0 0.3em 0.3em 0;
border-radius: 4em;
box-sizing: border-box;
text-decoration: none;
font-family: rob;
font-weight: bold;
color: #ffffff;
background-color: #34E034;
text-align: center;
transition: all 0.2s;
}
.button-in-main-box:hover {
transform: scale(1.1);
}
#media only screen and (max-width: 664px) {
.main-box {
width: 100%;
max-width: 798px;
display: flex;
flex-direction: column;
height: auto;
}
.text-in-main-box {
width: 100%;
padding: 7% 0;
justify-content: center;
}
.container-for-button-in-main-box {
width: 100%;
display: flex;
justify-content: center;
}
}
<div class="main-box">
<div class="text-in-main-box">Sage “Hallo, Welt" mit Python</div>
<div class="container-for-button-in-main-box"><span class=button-in-main-box>Löse Aufgabe</span></div>
</div>
Use #media query for it. Using it you can apply custom css properties to your site when a certain condidion is true (in your example max-width: 664px)
Heres a tutorial on it:
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Example:
#media screen and (max-width: 664px) {
.button-in-main-box{
background-color: green;
}
}
You are closing the div for text before the button. Please use this code & do adjustments as you want.
<div class="main-box">
<div class="text-in-main-box">Sage “Hallo, Welt" mit Python
<div class="container-for-button-in-main-box"><span class = button-in-main-box>Löse Aufgabe</span></div>
</div>
</div>
I'm trying to create a blog, however, after adding a dropdown menu sourced from W3Schools everything just went messed up. I'm new at HTML and I don't understand why my margins are messed up.
body, html {
height: 100%;
margin: 0;
font-family: 'Roboto';
color: #232323;
background-color: #ffffff;
text-align: center;
}
.bgimg-1{
position: relative;
opacity: 0.8;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("landingpage.jpg");
min-height: 100%;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #41bc3e;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
background: #41bc3e;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}
.checked {
color: orange;
}
p {
margin-right: 600px;
margin-left: 600px;
}
.veryveryinterestingh1 {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.verycoolheader {
background: #232323;
text-align: center;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
opacity: 0.99;
}
.caption span.border {
background-color: #111;
color: #41bc3e;
padding: 18px;
font-size: 25px;
letter-spacing: 2px;
opacity: 0.99;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
margin-top: 0;
margin-bottom: 0;
}
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
margin-right: 600px;
margin-left: 600px;
}
#media all and (max-width: 768px){
body{
padding-left: 30px !important;
padding-right: 30px !important;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font- awesome.min.css" rel="stylesheet"/>
<div class="verycoolheader"> <img src="logo1.png" alt="Website Logo" align="middle">
<div class="navbar">
Home
About Us
<div class="dropdown">
<button class="dropbtn">Blogs
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Latest</h2>
</div>
<div class="row">
<div class="column">
<h3>First Blog</h3>
What is Theme?
</div>
<div class="column">
<h3>Second Blog</h3>
Points of View
</div>
<div class="column">
<h3></h3>
</div>
</div>
</div>
</div>
</div>
<div style="position: relative;">
<div class="bgimg-1">
<div class="caption">
<span class="border">Arabian Nights</span>
</div>
</div>
<footer style="color:#ddd;background-color:#232323;text-align:center;padding:50px 80px;text-align: center;">© Copyright 2019 Magdoub & Pejic</footer>
Pastebin:
Landing Page
About Us
Blog 1
you just add box-sizing: border-box; in .column
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
because you have 10px for each column. The column width is 33.33% + 10px + 10px so it make the margin was mess.
The box-sizing: border-box include padding and border in the element's total width and height so the width will 33.33% both padding-left:10px and padding-right 10px.
I want to make #menu a tag take up 100% of the height of its parent element. The parent element forms part of a horizontal list, so has display: inline-block set.
However, the a tag does not extend the full height of parent div, despite me setting it to display: block; height: 100%;.
See here: https://jsfiddle.net/wqec16we/12/
Would anyone know if this can be done?
#wrapper {
width: 100%;
border: 1px solid #ccc;
overflow: auto;
text-align: right;
}
#hi, #menu {
display: inline-block;
height: auto;
}
#hi {
font-size: 28px;
}
#menu {
height: 100%;
width: 60px;
}
#menu a {
display: block;
height: 100%;
width: 100%;
text-align: center;
background-color: #ccc;
}
You can add line-height propert with a value, for example,
#menu a {
display: block;
height: 100%;
width: 100%;
text-align: center;
background-color: #ccc;
line-height:40px; /*MODIFICATION*/
}
#wrapper {
width: 100%;
border: 1px solid #ccc;
overflow: auto;
text-align: right;
}
#hi, #menu {
display: inline-block;
height: auto;
}
#hi {
font-size: 28px;
}
#menu {
height: 100%;
width: 60px;
}
#menu a {
display: block;
height: 100%;
width: 100%;
text-align: center;
background-color: #ccc;
line-height:40px; /*MODIFICATION*/
}
<div id="wrapper">
<div id="hi">
HI
</div>
<div id="menu">
Menu
</div>
</div>
You can use flexbox to do the equal height columns for either known or unknown height container, also good for centering both horizontally and vertically. Example:
#wrapper {
border: 1px solid #ccc;
display: flex;
justify-content: flex-end;
}
#hi {
font-size: 28px;
padding: 0 5px;
}
#menu {
display: flex;
}
#menu a {
background-color: #ccc;
padding: 0 5px;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
<div id="wrapper">
<div id="hi">HI</div>
<div id="menu">
Menu
</div>
</div>
If you don't need the <div> around the <a>, it can be easier. Example:
#wrapper {
border: 1px solid #ccc;
display: flex;
}
#hi {
flex: 1;
font-size: 28px;
text-align: right;
padding: 0 5px;
}
#menu {
background-color: #ccc;
padding: 0 5px;
display: flex;
justify-content: center;
align-items: center;
}
<div id="wrapper">
<div id="hi">HI</div>
<a id="menu" href="#">Menu</a>
</div>
You can also use CSS table for supporting older browsers. Example:
#wrapper {
border: 1px solid #ccc;
display: table;
width: 100%;
}
#hi,
#menu {
display: table-cell;
vertical-align: middle;
padding: 0 5px;
}
#hi {
text-align: right;
font-size: 28px;
width: 100%;
}
#menu {
background-color: #ccc;
white-space: nowrap;
}
<div id="wrapper">
<div id="hi">HI</div>
<a id="menu" href="#">Menu</a>
</div>
I have trouble to generate the following layout using DIV element, fighting with alignement and box style
Desire layout is here
Any help would be helpfull
regards
Try something like this
DEMO
.element {
margin: 50px;
box-sizing: border-box;
}
.remaining, .sold {
display: table;
border: 1px solid #999999;
padding: 10px;
width: 20%;
position: relative;
float: left;
height: 200px;
box-sizing: border-box;
}
.remaining {
border-right: none;
border-top: none;
}
.remaining:before {
position: absolute;
top: -30px;
height: 30px;
background: #FF7F7E;
content: "SHOES - STOCK";
border: 1px solid #999999;
color: white;
width: 100%;
left: 0;
line-height: 30px;
padding-left: 10px;
font-size: 13px;
font-weight: bold;
right: 0;
box-sizing: border-box;
}
.top, .center, .bottom {
display: table-row;
}
.top .inner {
display: table-cell;
width: 100%;
vertical-align: top;
}
.center {
display: table-cell;
width: 100%;
vertical-align: middle;
text-align: center;
}
.center span {
display: block;
}
.bottom .inner {
display: table-cell;
width: 100%;
vertical-align: bottom;
}
.inner-content {
display: table;
}
.top .inner span,
.bottom .inner span{
display: table-cell;
width: 100%;
}
.top .inner span:last-child,
.bottom .inner span:last-child {
text-align: right;
font-weight: bold;
width: 60px;
float: left;
}
.center span:first-child {
font-size: 70px;
font-weight: bold;
line-height: 1;
}
span u {
text-decoration: none;
border-bottom: 1px solid red;
}
#media(max-width: 1200px) {
.remaining, .sold {
display: table;
width: 30%;
height: 200px;
}
}
#media(max-width: 768px) {
.remaining, .sold {
display: table;
float: none;
width: 100%;
height: 200px;
}
.remaining {
border-right: 1px solid #999999;
border-bottom: none;
}
}
<div class="element">
<div class="remaining">
<div class="top">
<div class="inner">
<div class="inner-content">
<span>TOTAL</span>
<span>250 <u>pcs</u></span>
</div>
</div>
</div>
<div class="center">
<span>200</span>
<span>REMAINING</span>
</div>
<div class="bottom">
<div class="inner">
<div class="inner-content">
<span>USED</span>
<span>50 <u>pcs</u></span>
</div>
</div>
</div>
</div>
<div class="sold">
<div class="center">
<span>50</span>
<span>SOLD</span>
</div>
</div>
</div>