Is there any way I can get these collapsible boxes to be in a row but still open the full content on the page? They also need to be in three columns. before opening but when opened it should show its full content.
It also has to work in mobile view also. Here is some code to help you out but this would be very useful to know due to using a system that doesn't like Java
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type='text/css'>
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.center-content {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.left {
-webkit-box-align: left;
-ms-flex-align: left;
align-items: left;
}
.right {
-webkit-box-align: right;
-ms-flex-align: right;
align-items: right;
}
.container {
display: flex;
align-items: center;
justify-content: left
}
img {
max-width: 100%
}
.image {
flex-basis: 40%
}
.text {
font-size: 20px;
padding-left: 0px;
}
/* Create two equal columns that float next to each other */
.column2 {
float: left;
width: 50%;
padding: 1%;
}
/* Create three equal columns that float next to each other */
.column3 {
float: left;
width: 33.33%;
padding: 1%;
}
/* Create four equal columns that float next to each other */
.column4 {
float: left;
width: 25%;
padding: 1%;
}
/* Create five equal columns that float next to each other */
.column5 {
float: left;
width: 20%;
padding: 1%;
}
/* Create six equal columns that float next to each other */
.column6 {
float: left;
width: 16.66666%;
padding: 1%;
}
/* Create seven equal columns that float next to each other */
.column7 {
float: left;
width: 16.5%;
padding: 0.5%;
}
/* Create eight equal columns that float next to each other */
.column8 {
float: left;
width: 12.5%;
padding: 0.5%;
}
/* Create nine equal columns that float next to each other */
.column9 {
float: left;
width: 11.1111%;
padding: 0.5%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column2 {
width: 100%;
}
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column3 {
width: 100%;
}
}
/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column4 {
width: 100%;
}
}
/* Responsive layout - makes the five columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column5 {
width: 100%;
}
}
/* Responsive layout - makes the six columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column6 {
width: 100%;
}
}
/* Responsive layout - makes the seven columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column7 {
width: 100%;
}
}
/* Responsive layout - makes the eight columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column8 {
width: 100%;
}
}
/* Responsive layout - makes the nine columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column9 {
width: 100%;
}
}
/* Responsive layout - makes two columns of different widths stack on top of each other instead of next to each other */
.first-column {
width: 30%;
padding: 1vw;
float: left;
}
.second-column {
width: 70%;
padding: 1vw;
float: right;
}
/* Responsive layout - another example where two columns of different widths stack on top of each other instead of next to each other */
.first-column1 {
width: 75%;
padding: 1vw;
float: left;
}
.second-column1 {
width: 25%;
padding: 1vw;
float: right;
}
/* Responsive layout - another example where two columns of different widths stack on top of each other instead of next to each other */
.first-columnheader {
width: 55%;
padding: 1vw;
float: left;
}
.second-columnheader {
width: 45%;
padding: 1vw;
float: right;
}
/* Responsive layout - makes two columns of different widths stack on top of each other instead of next to each other */
.first-columntext {
width: 100%;
padding: 1vw;
float: left;
}
.second-columntext {
width: 100%;
padding: 1vw;
float: right;
}
/* the next section defines what you want the columns to look like in mobile view - all are linked to the column set ups in the rows above */
#media only screen and (max-width: 768px) {
/* links to row 93 */
.first-column {
width: 100%;
padding-bottom: 10px;
float: none;
}
.second-column {
width: 100%;
padding-bottom: 10px;
float: none;
}
/* links to row 107 */
.first-column1 {
width: 100%;
padding-bottom: 10px;
float: none;
}
.second-column1 {
width: 100%;
padding-bottom: 10px;
float: none;
}
/* links to row 137 */
.first-columnheader {
width: 100%;
padding-bottom: 2px;
float: none;
}
.second-columnheader {
width: 100%;
padding-bottom: 2px;
float: none;
}
/* links to row 151 */
.first-columntext {
width: 100%;
padding-bottom: 10px;
float: none;
}
.second-columntext {
width: 100%;
padding-bottom: 10px;
float: none;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
}
#media (min-width: 140px)
{
.style1
{
font-size:11px;
}
.style2
{
font-size:11.5px;
}
.style3
{
font-size:12px;
}
.style4
{
font-size:12.5px;
}
.style5
{
font-size:14px;
}
.style6
{
font-size:16px;
}
#media (min-width: 768px)
{
.style1
{
font-size:11px;
}
.style2
{
font-size:12px;
}
.style3
{
font-size:14px;
}
.style4
{
font-size:18px;
}
.style5
{
font-size:24px;
}
.style6
{
font-size:32px;
}
}
#media (min-width: 1400px)
{
.style1
{
font-size:18px;
}
.style2
{
font-size:20px;
}
.style3
{
font-size:24px;
}
.style4
{
font-size:28px;
}
.style5
{
font-size:32px;
}
.style6
{
font-size:36px;
}
}
.center-text {
text-align: center;
}
.bg-rbgreen {
background-color: #50bc08;
}
.bg-rbpalegreen {
background-color: #95ea5c;
}
.bg-rbgray {
background-color: #969696;
}
.bg-rbpalegray {
background-color: #cacaca;
}
.bg-rbred {
background-color: #e03a40;
}
.bg-rboffwhite {
background-color: #f4f4f4;
}
.bg-rbblue {
background-color: #131f6b;
}
.bg-rbpaleblue {
background-color: #A4CFEA;
}
.border-dark {
border: 0.5rem solid #202223;
}
.border-thindarkgray {
border: 0.1rem solid #867d72;
}
.border-mediumdark {
border: 0.3rem solid #202223; border-radius: 25px;
}
.border-mediumlight {
border: 0.3rem solid #ffffff; border-radius: 25px;
}
.border-roundlight {
border: 0.3rem solid #ffffff; border-radius: 25px;
}
.border-light {
border: 0.5rem solid #ffffff;
}
.border-thicklight {
border: 1.3rem solid #ffffff;
}
.border-thinlight {
border: 0.5rem solid #ffffff;
}
.same-height {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.tab {
margin-left: 5%;
}
.space-around {
margin: 0.5rem;
}
.space-around1 {
margin: 0rem;
}
.space-around2 {
margin: 0.5rem 0rem 0rem 0rem;
}
.space-around3 {
margin: 0.5rem 0rem 0rem 0.5rem;
}
.no-bottom-padding {
padding-bottom: 0px !important;
}
.text-white {
color: white;
}
.text-charcoal {
color: #3b3535;
}
/* img sizing */
img.xsmall {
width: 10% !important;
}
img.small {
width: 25% !important;
}
img.medium {
width: 50% !important;
}
img.large {
width: 75% !important;
}
img.xlarge {
width: 100% !important;
}
img.center {
margin: auto;
}
img.fill {
height: 100%;
width: 100%;
}
a {
text-decoration: none;
}
/* contain a tag within contents*/
a.contain {
display: contents !important;
}
/* ALLOW ITEMS IN BOX TO STACK */
.stacked {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
}
.layout {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
}
.layout .box {
/* FLEX BOXES (can apply flex styles like columns) */
/*display: inline-flex; */
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-height: 100px;
width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.layout .box > p {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
display: block;
}
.layout .box > img {
width: 100%;
display: block;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
.layout .box > a {
width: 100%;
display: block;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
.layout .box > a > * {
width: 100%;
display: block;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
.layout .box.p1 {
padding: 0.5rem;
}
.layout .box.p2 {
padding: 1rem;
}
.layout .box.p3 {
padding: 1.5rem;
}
.layout .box.p4 {
padding: 4rem;
}
.layout .box.p5 {
padding: 0.2rem;
}
.layout .box.pmxd {
padding: 0rem 0rem 0rem 2rem;
}
.layout .box.pmxd1 {
padding: 0rem 0rem 0rem 7rem;
}
.layout .box.pmxd2 {
padding: 0rem 0rem 0rem 1rem;
}
.layout.two {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row;
flex-flow: row;
}
.layout.two.split_25_75 > .box, .layout.two.split_2575 > .box, .layout.two.split2575 > .box {
width: 25%;
}
.layout.two.split_25_75 > .box:nth-child(2n), .layout.two.split_2575 > .box:nth-child(2n), .layout.two.split2575 > .box:nth-child(2n) {
width: 75%;
}
.layout.two.split_80_20 > .box, .layout.two.split_8020 > .box, .layout.two.split8020 > .box {
width: 80%;
}
.layout.two.split_80_20 > .box:nth-child(2n), .layout.two.split_8020 > .box:nth-child(2n), .layout.two.split8020 > .box:nth-child(2n) {
width: 20%;
}
.layout.two.split_60_40 > .box, .layout.two.split_6040 > .box, .layout.two.split6040 > .box {
width: 60%;
}
.layout.two.split_60_40 > .box:nth-child(2n), .layout.two.split_6040 > .box:nth-child(2n), .layout.two.split6040 > .box:nth-child(2n) {
width: 40%;
}
.layout.two > .box {
width: 50%;
}
.layout.three > .box {
width: 33.333%;
}
.layout.four > .box {
width: 25%;
}
.layout.three.split_25_50_25 > .box, .layout.three.split25_50_25 > .box, .layout.three.split_255025 > .box, .layout.three.split255025 > .box {
width: 25%;
}
.layout.three.split_25_50_25 > .box:nth-child(2n), .layout.three.split25_50_25 > .box:nth-child(2n), .layout.three.split_255025 > .box:nth-child(2n), .layout.three.split255025 > .box:nth-child(2n) {
width: 50%;
}
.bottomRight {
position: absolute;
right: -1rem;
bottom: -1rem;
width: 50% !important;
}
/*
CSS for the main interaction
*/
.accordion > input[type="checkbox"] {
position: absolute;
left: -100vw;
}
.accordion .content {
overflow-y: hidden;
height: 0;
transition: height 0.3s ease;
}
.accordion > input[type="checkbox"]:checked ~ .content {
height: auto;
overflow: visible;
}
.accordion label {
display: block;
}
/*
Styling
*/
.accordion {
margin-bottom: 1em;
height: auto;
}
.accordion > input[type="checkbox"]:checked ~ .content {
padding: 15px;
border-top: 0;
}
.accordion .handle {
margin: 0;
font-size: 1.125em;
line-height: 1.2em;
}
.accordion label {
color: #000;
cursor: pointer;
font-weight: bold;
padding: 15px;
background: #14b1e8;
margin: 0em 65.5em 0em 1.5em;
}
.accordion label:hover,
.accordion label:focus {
background: #50bc08;
color: #fff;
}
.accordion .handle label:before {
content: "+";
display: inline-block;
margin-right: 10px;
font-size: .58em;
line-height: 1.556em;
vertical-align: middle;
}
.accordion > input[type="checkbox"]:checked ~ .handle label:before {
content: "-";
}
/*
CSS for the main interaction
*/
.accordion1 > input[type="checkbox"] {
position: absolute;
left: -100vw;
}
.accordion1 .content {
overflow-y: hidden;
height: 0;
transition: height 0.3s ease;
}
.accordion1 > input[type="checkbox"]:checked ~ .content {
height: auto;
overflow: visible;
}
.accordion1 label {
display: block;
}
/*
Styling
*/
.accordion1 {
margin-bottom: 1em;
height: auto;
}
.accordion1 > input[type="checkbox"]:checked ~ .content {
padding: 15px;
border-top: 0;
}
.accordion1 .handle {
margin: 0;
font-size: 1.125em;
line-height: 1.2em;
}
.accordion1 label {
color: #000;
cursor: pointer;
font-weight: bold;
padding: 15px;
background: #14b1e8;
margin: 0em 65.5em 0em 1.5em;
}
.accordion1 label:hover,
.accordion1 label:focus {
background: #50bc08;
color: #fff;
}
.accordion1 .handle label:before {
content: "+";
display: inline-block;
margin-right: 10px;
font-size: .58em;
line-height: 1.556em;
vertical-align: middle;
}
.accordion1 > input[type="checkbox"]:checked ~ .handle label:before {
content: "-";
}
/*
CSS for the main interaction
*/
.accordion2 > input[type="checkbox"] {
position: absolute;
left: -100vw;
}
.accordion2 .content {
overflow-y: hidden;
height: 0;
transition: height 0.3s ease;
}
.accordion2 > input[type="checkbox"]:checked ~ .content {
height: auto;
overflow: visible;
}
.accordion2 label {
display: block;
}
/*
Styling
*/
.accordion2 {
margin-bottom: 1em;
height: auto;
}
.accordion2 > input[type="checkbox"]:checked ~ .content {
padding: 15px;
border-top: 0;
}
.accordion2 .handle {
margin: 0;
font-size: 1.125em;
line-height: 1.2em;
}
.accordion2 label {
color: #000;
cursor: pointer;
font-weight: bold;
padding: 15px;
background: #14b1e8;
margin: 0em 65.5em 0em 1.5em;
}
.accordion2 label:hover,
.accordion2 label:focus {
background: #50bc08;
color: #fff;
}
.accordion2 .handle label:before {
content: "+";
display: inline-block;
margin-right: 10px;
font-size: .58em;
line-height: 1.556em;
vertical-align: middle;
}
.accordion2 > input[type="checkbox"]:checked ~ .handle label:before {
content: "-";
}
html {
height: 1800px;
}
#media (max-width: 800px) {
html {
height: 3200px;
}
}
/*# sourceMappingURL=base.css.map */
</style>
</head>
<body>
<div class="page" style="font-family: 'lato',helvetica;">
<div class="layout one">
<div class="border-thinlight style1" style="color: #131f6b; padding: 1vw;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<section class="accordion">
<input type="checkbox" name="collapse" id="handle1">
<h2 class="handle">
<label for="handle1">Headers</label>
</h2>
<div class="content">
<div class="layout one">
<div class="column4 style1 bg-rboffwhite border-thinlight" style="min-height: 66vw; height: 100%; color: #002060; padding: 1vw;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="column4 style1 bg-rboffwhite border-thinlight" style="min-height: 66vw; height: 100%; color: #131f6b; padding: 1vw;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="column4 style1 bg-rboffwhite border-thinlight" style="min-height: 66vw; height: 100%; color: #131f6b; padding: 1vw;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<span class="style1" style="color: #ff0000;"><strong>Header</strong></span><br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="column4 style1 bg-rboffwhite border-thinlight" style="min-height: 66vw; height: 100%; color: #131f6b; padding: 1vw;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
</section>
<section class="accordion1">
<input type="checkbox" name="collapse2" id="handle2">
<h2 class="handle">
<label for="handle2">Header</label>
</h2>
<div class="content">
<div class="layout one">
<div class="first-column" style="min-height: 20vw; height: 100%; padding: 1vw;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="second-column style1 bg-rboffwhite border-thinlight" style="min-height: 20vw; height: 100%; padding: 1vw; color: #002060;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
</section>
<section class="accordion2">
<input type="checkbox" name="collapse3" id="handle3">
<h2 class="handle">
<label for="handle3">Header</label>
</h2>
<div class="content">
<div class="layout one">
<div class="first-column style1 bg-rboffwhite border-thinlight" style="min-height: 42.5vw; height: 100%; padding: 1vw; color: #002060;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="second-column style1 bg-rboffwhite border-thinlight" style="min-height: 42.5vw; height: 100%; padding: 1vw; color: #002060;">
<span style="color: #ff0000;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</section>
</div>
</body>
</html>
.accordion1 .content {
overflow-y: hidden;
height: 0;
transition: height 0.3s ease;
background-color: transparent;
position: absolute;
width: 100%;
z-index: -1;
border-radius: 6px;
left: 0;
I have found the answer it took a while but separate each column, then add left:0 then all the content goes to the left, but now got another problem, the content once selected is showing over one another. Just trying to find out how to stop it, I have tried removing the Z-index but it still does it. If there is any resolve for this would be greatly helpful
Related
I'm trying to look for clues to design a banner like the one on the top of this page: https://www.gazteaukera.euskadi.eus/inicio/
I am trying myself but don't get what I want (see below). I want to have an image column on the left and a text column on the right perfectly aligned. I want it to be responsive, so that in smaller screens the left column will be placed on top of the right column (with no space between top and bottom divs).
I am having some issues getting what I want. I hope someone can help me :)
code:
.row {
background-color: blue;
padding: 0px;
/*I have added a background-color to help me solve the design issues, but this is sthg to be removed*/}
.column {
float: left;
width: 50%;
padding: 0px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.title {
font-size: 24px;
color: #0FD955;
padding: 15px 15px 0px 15px;
font-weight: bold;}
.text {
font-size: 18px;
color: #0FD955;
padding: 0px 15px 15px 15px;
}
.imgw100 {
width: 100%;
}
#media screen and (max-width: 980px) {
.column { width: 100%; }
.right { width: 100%; }
.left { width: 100%; }
}
<div class="row">
<div class="column right">
<img class="imgw100" src="https://butterfly-conservation.org/sites/default/files/styles/masthead/public/2019-03/16548509661_3bdddd5179_o.jpg" />
</div>
<div class="column left" style="background-color: #022C11;">
<p class="title">Breaking news</p>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
Add display css to row as flex for larger devices
add for small screen add display css as block for row
.row {
background-color: blue;
padding: 0px;
display: flex;
}
.title {
font-size: 24px;
color: #0fd955;
padding: 15px 15px 0px 15px;
font-weight: bold;
}
.text {
font-size: 18px;
color: #0fd955;
padding: 0px 15px 15px 15px;
}
.imgw100 {
width: 100%;
}
#media screen and (max-width: 480px) {
.row {
background-color: blue;
padding: 0px;
display: block;
}
}
Im trying to add box-shadow to both header and footer. Im trying to make it look like the content area is in the background while header and footer is "jumping out" a bit.
The code for footer and header is the same, yet only footer applies it like i want to.
/* All pages layout */
html {
background-color: #0294ea;
}
body {
font-family: helvetica, sans-serif;
margin: 0;
padding: 0;
background-color: #0294ea;
}
.container {
max-width: 100%;
margin: 0 auto;
}
header {
background-color: transparent;
color: #FFF;
margin-top: 20px;
}
header h1 {
text-align: center;
}
header p {
text-align: center;
}
.main-head {
display: block;
border-bottom: 2px solid #414141;
box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
max-width: 100%;
box-sizing: border-box;
}
.main-body {
background-color: #FFF;
}
.content-area {
background-color: #FFF;
margin-left: 60px;
margin-right: 60px;
}
.main-foot {
background-color: transparent;
display: block;
border-top: 2px solid #414141;
box-shadow: 0 -5px 5px rgba(0, 0, 0, .5);
max-width: 100%;
box-sizing: border-box;
}
footer {
font-size: 60%;
text-align: center;
color: #fff;
}
/* Site navigation */
.navigation {
margin-top: 20px;
}
.navigation ul {
margin: 0;
padding: 0;
text-align: center;
}
.navigation li {
display: inline-block;
list-style: none;
margin-right: 5px;
}
.navigation a {
display: block;
text-decoration: none;
font-weight: normal;
font-size: 87%;
color: #FFF;
padding: 5px 10px;
border: 2px solid #414141;
border-bottom: none;
background-color: #a14b56;
}
.navigation a:hover {
color: #FFF;
border: 2px solid #414141;
border-bottom: none;
background-color: #414141;
}
/* Universal float fix */
.fix {
clear: both;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
/* Index specific */
.sidebar {
max-width: 33.33%;
}
.main-body {
max-width: 66.66%;
}
<header>
<div class="container">
<div class="main-head">
<h1>Welcome to My Page</h1>
<p>For a Viking lifestyle</p>
<nav class="navigation">
<ul class="fix">
<li>Home</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="content-area group">
<div class="container">
<div class="main-body">
<h1>Article 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<aside class="sidebar">
<h1>This is the sidebar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</aside>
</div>
</div>
<footer>
<div class="main-foot">
<p>Copyright © 2019 - Marcus Tarang | Learning HTML/CSS</p>
</div>
</footer>
Force the header to be painted above the main area by changing it's position to relative (see this answer):
/* All pages layout */
html {
background-color: #0294ea;
}
body {
font-family: helvetica, sans-serif;
margin: 0;
padding: 0;
background-color: #0294ea;
}
.container {
max-width: 100%;
margin: 0 auto;
}
header {
position: relative;
background-color: transparent;
color: #FFF;
margin-top: 20px;
}
header h1 {
text-align: center;
}
header p {
text-align: center;
}
.main-head {
display: block;
border-bottom: 2px solid #414141;
box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
max-width: 100%;
box-sizing: border-box;
}
.main-body {
background-color: #FFF;
}
.content-area {
background-color: #FFF;
margin-left: 60px;
margin-right: 60px;
}
.main-foot {
background-color: transparent;
display: block;
border-top: 2px solid #414141;
box-shadow: 0 -5px 5px rgba(0, 0, 0, .5);
max-width: 100%;
box-sizing: border-box;
}
footer {
font-size: 60%;
text-align: center;
color: #fff;
}
/* Site navigation */
.navigation {
margin-top: 20px;
}
.navigation ul {
margin: 0;
padding: 0;
text-align: center;
}
.navigation li {
display: inline-block;
list-style: none;
margin-right: 5px;
}
.navigation a {
display: block;
text-decoration: none;
font-weight: normal;
font-size: 87%;
color: #FFF;
padding: 5px 10px;
border: 2px solid #414141;
border-bottom: none;
background-color: #a14b56;
}
.navigation a:hover {
color: #FFF;
border: 2px solid #414141;
border-bottom: none;
background-color: #414141;
}
/* Universal float fix */
.fix {
clear: both;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
/* Index specific */
.sidebar {
max-width: 33.33%;
}
.main-body {
max-width: 66.66%;
}
<header>
<div class="container">
<div class="main-head">
<h1>Welcome to My Page</h1>
<p>For a Viking lifestyle</p>
<nav class="navigation">
<ul class="fix">
<li>Home</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="content-area group">
<div class="container">
<div class="main-body">
<h1>Article 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<aside class="sidebar">
<h1>This is the sidebar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</aside>
</div>
</div>
<footer>
<div class="main-foot">
<p>Copyright © 2019 - Marcus Tarang | Learning HTML/CSS</p>
</div>
</footer>
Just put the box shadow on the header and give it position: relative;:
header {
box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
position: relative;
}
/* All pages layout */
html {
background-color: #0294ea;
}
body {
font-family: helvetica, sans-serif;
margin: 0;
padding: 0;
background-color: #0294ea;
}
.container {
max-width: 100%;
margin: 0 auto;
}
header {
background-color: transparent;
color: #FFF;
margin-top: 20px;
box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
position: relative;
}
header h1 {
text-align: center;
}
header p {
text-align: center;
}
.main-head {
display: block;
border-bottom: 2px solid #414141;
max-width: 100%;
box-sizing: border-box;
}
.main-body {
background-color: #FFF;
}
.content-area {
background-color: #FFF;
margin-left: 60px;
margin-right: 60px;
}
.main-foot {
background-color: transparent;
display: block;
border-top: 2px solid #414141;
box-shadow: 0 -5px 5px rgba(0, 0, 0, .5);
max-width: 100%;
box-sizing: border-box;
}
footer {
font-size: 60%;
text-align: center;
color: #fff;
}
/* Site navigation */
.navigation {
margin-top: 20px;
}
.navigation ul {
margin: 0;
padding: 0;
text-align: center;
}
.navigation li {
display: inline-block;
list-style: none;
margin-right: 5px;
}
.navigation a {
display: block;
text-decoration: none;
font-weight: normal;
font-size: 87%;
color: #FFF;
padding: 5px 10px;
border: 2px solid #414141;
border-bottom: none;
background-color: #a14b56;
}
.navigation a:hover {
color: #FFF;
border: 2px solid #414141;
border-bottom: none;
background-color: #414141;
}
/* Universal float fix */
.fix {
clear: both;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
/* Index specific */
.sidebar {
max-width: 33.33%;
}
.main-body {
max-width: 66.66%;
}
<header>
<div class="container">
<div class="main-head">
<h1>Welcome to My Page</h1>
<p>For a Viking lifestyle</p>
<nav class="navigation">
<ul class="fix">
<li>Home</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="content-area group">
<div class="container">
<div class="main-body">
<h1>Article 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<aside class="sidebar">
<h1>This is the sidebar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</aside>
</div>
</div>
<footer>
<div class="main-foot">
<p>Copyright © 2019 - Marcus Tarang | Learning HTML/CSS</p>
</div>
</footer>
add the position: relative; into .main-head css class
this is fixed result
/* All pages layout */
html {
background-color: #0294ea;
}
body {
font-family: helvetica, sans-serif;
margin: 0;
padding: 0;
background-color: #0294ea;
}
.container {
max-width: 100%;
margin: 0 auto;
}
header {
background-color: transparent;
color: #FFF;
margin-top: 20px;
}
header h1 {
text-align: center;
}
header p {
text-align: center;
}
.main-head {
display: block;
border-bottom: 2px solid #414141;
box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
max-width: 100%;
box-sizing: border-box;
position: relative;
}
.main-body {
background-color: #FFF;
}
.content-area {
background-color: #FFF;
margin-left: 60px;
margin-right: 60px;
}
.main-foot {
background-color: transparent;
display: block;
border-top: 2px solid #414141;
box-shadow: 0 -5px 5px rgba(0, 0, 0, .5);
max-width: 100%;
box-sizing: border-box;
}
footer {
font-size: 60%;
text-align: center;
color: #fff;
}
/* Site navigation */
.navigation {
margin-top: 20px;
}
.navigation ul {
margin: 0;
padding: 0;
text-align: center;
}
.navigation li {
display: inline-block;
list-style: none;
margin-right: 5px;
}
.navigation a {
display: block;
text-decoration: none;
font-weight: normal;
font-size: 87%;
color: #FFF;
padding: 5px 10px;
border: 2px solid #414141;
border-bottom: none;
background-color: #a14b56;
}
.navigation a:hover {
color: #FFF;
border: 2px solid #414141;
border-bottom: none;
background-color: #414141;
}
/* Universal float fix */
.fix {
clear: both;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
/* Index specific */
.sidebar {
max-width: 33.33%;
}
.main-body {
max-width: 66.66%;
}
<header>
<div class="container">
<div class="main-head">
<h1>Welcome to My Page</h1>
<p>For a Viking lifestyle</p>
<nav class="navigation">
<ul class="fix">
<li>Home</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="content-area group">
<div class="container">
<div class="main-body">
<h1>Article 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<aside class="sidebar">
<h1>This is the sidebar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</aside>
</div>
</div>
<footer>
<div class="main-foot">
<p>Copyright © 2019 - Marcus Tarang | Learning HTML/CSS</p>
</div>
</footer>
I'm about to finish my first web project and when I'm checking the browsers I find that firefox causes me the following error in the footer.
view Chrome:
view Firefox:
As you can see in other browsers it works and it looks perfectly in firefox, it is the only one that creates that space for me, if you can help me I would appreciate it. Here is the code:
footer
{
position: absolute;
top: 2050px;
height: 330px;
}
footer div#aboutme
{
width: 50%;
height: 300px;
margin: 0px;
padding-bottom: 0px;
}
footer div#aboutme h3
{
width: 80%;
margin-left: 10%;
padding-top: 20px;
}
footer div#aboutme p
{
width: 80%;
margin-left: 10%;
padding-top: 15px;
}
footer div.rrss
{
position: relative;
width: 50%;
height: 150px;
margin: 0px;
top: -300px;
left: 50%;
padding-bottom: 0px;
}
footer div.rrss p
{
padding-top: 30px;
}
footer div.rrss a
{
padding-top: 15px;
}
footer div.suscription
{
position: relative;
width: 50%;
height: 150px;
margin: 0px;
top: -300px;
margin-left: 50%;
padding-bottom: 0px;
text-align: center;
}
footer div.suscription p
{
display: block;
padding-top: 0px;
padding-bottom: 30px;
}
footer div.suscription input:nth-of-type(1)
{
max-width: 175px;
}
footer div.suscription input:nth-of-type(2)
{
max-width: 125px;
border: none;
border-bottom: 1px solid white;
}
footer div#derechos
{
position: relative;
top: -299px;
}
footer div#derechos p
{
position: relative;
top: 15px;
}
<footer>
<div id="aboutme">
<h3>Acerca de mí...</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="rrss">
<p><strong>Encuentrame en:</strong></p>
</div>
<div class="suscription">
<p>Recibe nuestras publicaciones en tu email.</p>
<input type="mail" name="email" placeholder="Ingresa tu email" id="input_registro">
<input type="button" id="button_registro" name="button_registro" value="Registrar">
</div>
<div id="derechos">
<p>© 2018 All rights reserved | Privacity Policy</p>
</div>
</footer>
this is where comes from your trouble :
footer div.rrss
{
position: relative;
width: 50%;
height: 150px;
margin: 0px;
top: -300px;
left: 50%;
padding-bottom: 0px;
}
Firefox moves it up at screen but does not free that space.
add overflow:hidden to footer to keep it 300px of height
footer
{
position: absolute;
top: 2050px;
height: 330px;
overflow:hidden; /* will not keep space used by the relative element */
}
footer div#aboutme
{
width: 50%;
height: 300px;
margin: 0px;
padding-bottom: 0px;
}
footer div#aboutme h3
{
width: 80%;
margin-left: 10%;
padding-top: 20px;
}
footer div#aboutme p
{
width: 80%;
margin-left: 10%;
padding-top: 15px;
}
footer div.rrss
{
position: relative;
width: 50%;
height: 150px;
margin: 0px;
top: -300px;
left: 50%;
padding-bottom: 0px;
}
footer div.rrss p
{
padding-top: 30px;
}
footer div.rrss a
{
padding-top: 15px;
}
footer div.suscription
{
position: relative;
width: 50%;
height: 150px;
margin: 0px;
top: -300px;
margin-left: 50%;
padding-bottom: 0px;
text-align: center;
}
footer div.suscription p
{
display: block;
padding-top: 0px;
padding-bottom: 30px;
}
footer div.suscription input:nth-of-type(1)
{
max-width: 175px;
}
footer div.suscription input:nth-of-type(2)
{
max-width: 125px;
border: none;
border-bottom: 1px solid white;
}
footer div#derechos
{
position: relative;
top: -299px;
}
footer div#derechos p
{
position: relative;
top: 15px;
}
<footer>
<div id="aboutme">
<h3>Acerca de mí...</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="rrss">
<p><strong>Encuentrame en:</strong></p>
</div>
<div class="suscription">
<p>Recibe nuestras publicaciones en tu email.</p>
<input type="mail" name="email" placeholder="Ingresa tu email" id="input_registro">
<input type="button" id="button_registro" name="button_registro" value="Registrar">
</div>
<div id="derechos">
<p>© 2018 All rights reserved | Privacity Policy</p>
</div>
</footer>
You may also consider grid for the layout of the footer :
footer {
position: absolute;
top: 2050px;
height: 350px;
display: grid;
grid-template-columns: 1fr 1fr;
background: #444;
color: white;
}
footer div#aboutme {
grid-column: 1;
grid-row: 1 / span 2;
}
footer div#aboutme h3 {
width: 80%;
margin-left: 10%;
padding-top: 20px;
}
footer div#aboutme p {
width: 80%;
margin-left: 10%;
padding-top: 15px;
}
footer div.rrss {
grid-column: 2;
grid-row: 1;
}
footer div.rrss p {
padding-top: 30px;
}
footer div.rrss a {
padding-top: 15px;
}
footer div.suscription {
grid-column: 2;
grid-row: 2;
}
footer div.suscription p {
display: block;
padding-top: 0px;
padding-bottom: 30px;
}
footer div.suscription input:nth-of-type(1) {
max-width: 175px;
}
footer div.suscription input:nth-of-type(2) {
max-width: 125px;
border: none;
border-bottom: 1px solid white;
}
footer div#derechos {
grid-row: 3;
grid-column: 1 / span 2;
margin: auto;
}
footer div#derechos p {}
<footer>
<div id="aboutme">
<h3>Acerca de mí...</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="rrss">
<p><strong>Encuentrame en:</strong></p>
</div>
<div class="suscription">
<p>Recibe nuestras publicaciones en tu email.</p>
<input type="mail" name="email" placeholder="Ingresa tu email" id="input_registro">
<input type="button" id="button_registro" name="button_registro" value="Registrar">
</div>
<div id="derechos">
<p>© 2018 All rights reserved | Privacity Policy</p>
</div>
</footer>
I have a example exercise with a Sidebar Navigation that is fixed left of the screen.
I said that the content-div should have a position of absolute to the body and also a padding-left with the width of the sidebar, so that i can center my content in the visible area (width without the sidebar).
Now when I try to add a media query that says "when the screen is smaller than 1000px the Sidebar should disappear and the the padding of the content area should go to 0 (so that it gets centered in the normal screen width area)" it doesnt work.
I'm a beginner in html and css
Here is my code:
body {
font-family: 'Oswald', sans-serif;
padding: 0;
margin: 0;
background-color: #35af7e;
}
#media screen and (max-width: 1000px) {
.Sidebar {
left: -10rem;
}
.body {
padding-left: 0;
padding: 0;
}
}
#flex {
display: flex;
}
/* MEDIA QUERY FIX: NAVIC ; BODY-paddingleft ; */
.NavIc {
left: 1rem;
top: 1rem;
height: 30px;
width: 30px;
background-color: red;
border-radius: 3px;
z-index: 4;
position: fixed;
cursor: pointer;
}
.NavIc:hover .Sidebar {
background-color: red;
}
.Sidebar {
position: fixed;
width: 10rem;
height: 100%;
background: #E9D758;
color: white;
z-index: 3;
display: flex;
flex-direction: column;
transition: 200ms ease-in-out;
}
.space {
flex-grow: 1;
width: auto;
}
.Nav {
list-style-type: none;
display: block;
width: 100%;
padding: 0;
font-size: 1.5rem;
z-index: 2;
flex-grow: 18;
}
ul li {
box-sizing: border-box;
padding: 0.7rem 0 0.7rem 1rem;
position: relative;
transition: 150ms ease-in-out;
}
ul li:hover {
background-color: white;
color: black;
transform: scale(1.07) translate(0.3rem);
cursor: pointer;
}
.footnotes {
flex-grow: 1;
box-sizing: border-box;
padding: 0 1rem 0 1rem;
}
hr {
border-style: solid;
color: white;
}
.body {
position: absolute;
width: 100%;
padding-left: 10rem;
box-sizing: border-box;
top: 0;
color: white;
transition: 200ms ease-in-out;
}
.mid {
position: relative;
width: 60%;
left: 50%;
transform: translate(-50%);
font-size: 1.5rem;
}
.img {
position: relative;
max-width: 500px;
height: auto;
left: 50%;
transform: translate(-50%);
transition: 200ms ease-in-out;
}
.Logo {
position: relative;
left: 50%;
transform: translate(-50%);
max-width: 100%;
height: auto;
padding: 5rem 0 5rem 0;
}
.mid > hr {
width: 80%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sidebar</title>
<link rel="stylesheet" style="text/css" href="sidebar.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
<div class="NavIc">
</div>
<div class="Sidebar">
<div class="space">
</div>
<ul class="Nav">
<li>Home</li>
<li>Gallery</li>
<li>Our Team</li>
<li>Contact</li>
</ul>
<div class="footnotes">
<hr>
<p>blablabla<br>
All rights reserved</p>
<p>blablabla</p>
</div>
</div>
<div class="body">
<div class="mid">
<div class="img">
<img src="Logo.svg" alt="Logo" class="Logo">
</div>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.Commodo consequat.</p><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.Sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p><p>Incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</br>
<hr>
</div>
</div>
</body>
</html>
Because your .body rule in #media (max-width: 1000px) is being override. Use !important or learn some CSS specificity/precedence.
body {
font-family: 'Oswald', sans-serif;
padding: 0;
margin: 0;
background-color: #35af7e;
}
#media screen and (max-width: 1000px) {
.Sidebar {
left: -10rem;
}
.body {
padding-left: 0 !important;
padding: 0;
}
}
#flex {
display: flex;
}
/* MEDIA QUERY FIX: NAVIC ; BODY-paddingleft ; */
.NavIc {
left: 1rem;
top: 1rem;
height: 30px;
width: 30px;
background-color: red;
border-radius: 3px;
z-index: 4;
position: fixed;
cursor: pointer;
}
.NavIc:hover .Sidebar {
background-color: red;
}
.Sidebar {
position: fixed;
width: 10rem;
height: 100%;
background: #E9D758;
color: white;
z-index: 3;
display: flex;
flex-direction: column;
transition: 200ms ease-in-out;
}
.space {
flex-grow: 1;
width: auto;
}
.Nav {
list-style-type: none;
display: block;
width: 100%;
padding: 0;
font-size: 1.5rem;
z-index: 2;
flex-grow: 18;
}
ul li {
box-sizing: border-box;
padding: 0.7rem 0 0.7rem 1rem;
position: relative;
transition: 150ms ease-in-out;
}
ul li:hover {
background-color: white;
color: black;
transform: scale(1.07) translate(0.3rem);
cursor: pointer;
}
.footnotes {
flex-grow: 1;
box-sizing: border-box;
padding: 0 1rem 0 1rem;
}
hr {
border-style: solid;
color: white;
}
.body {
position: absolute;
width: 100%;
padding-left: 10rem;
box-sizing: border-box;
top: 0;
color: white;
transition: 200ms ease-in-out;
}
.mid {
position: relative;
width: 60%;
left: 50%;
transform: translate(-50%);
font-size: 1.5rem;
}
.img {
position: relative;
max-width: 500px;
height: auto;
left: 50%;
transform: translate(-50%);
transition: 200ms ease-in-out;
}
.Logo {
position: relative;
left: 50%;
transform: translate(-50%);
max-width: 100%;
height: auto;
padding: 5rem 0 5rem 0;
}
.mid > hr {
width: 80%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sidebar</title>
<link rel="stylesheet" style="text/css" href="sidebar.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
</head>
<body>
<div class="NavIc">
</div>
<div class="Sidebar">
<div class="space">
</div>
<ul class="Nav">
<li>Home</li>
<li>Gallery</li>
<li>Our Team</li>
<li>Contact</li>
</ul>
<div class="footnotes">
<hr>
<p>blablabla<br>
All rights reserved</p>
<p>blablabla</p>
</div>
</div>
<div class="body">
<div class="mid">
<div class="img">
<img src="Logo.svg" alt="Logo" class="Logo">
</div>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.Commodo consequat.</p><p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.Sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p><p>Incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</br>
<hr>
</div>
</div>
</body>
</html>
Inside your media query use display: none;to hide the sidebar and then set padding: 0px;of your content. that's it.
#media only screen and (max-width: 1000px) {
.Sidebar{
display: none;
}
.body{
display: block;
padding: 0px;
}
}
I'm aware that there does exist solutions for vertical alignment but the issue is there are all sorts of ways to accomplish this but I haven't found one which deals with a flex container. And many solutions revolve around having a fixed height which doesn't help me at all since my height is always unknown.
I would like to vertically align the element inside of my left floating div which is the .about_container .welcome div block. How can I figure this out, and feel free to point out any bad practices that I may have used in my code.
If you want to see what the output of the follow two files look like, I've added a screen shot of the output on the bottom.
Contents of my HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Maddness</title>
<link rel="stylesheet" type="text/css" href="floatHelp.css">
</head>
<body>
<div class="about_container">
<div class="welcome">
<h1>Welcome<br>to my<br>Webpage!</h1>
</div>
<div class="welcome_content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
</div>
<div id="projects">
<h2>Some lonely text down here to test against overflow.</h2>
</div>
</div>
<body>
</html>
Contents of my CSS file
.about_container {
color: snow;
display: flex;
border-bottom: 1px solid black;
}
.about_container .welcome {
background-color: #DCC7AA;
float: left;
margin 0;
width: 50%;
-webkit-flex: 1;
-moz-flex: 1
-ms-flex: 1;
flex: 1;
}
.about_container .welcome_content {
background-color: #F7882F;
margin: 0px;
top: 0;
float: right;
width: 50%;
-webkit-flex: 1;
-moz-flex: 1
-ms-flex: 1;
flex: 1;
}
.about_container .welcome_content p{
padding: 15px;
}
.about_container .welcome h1 {
border: 3px solid snow;
border-radius: 10px;
font-family: 'Julius Sans One', sans-serif;
margin-left: 10%; margin-right: 10%;
padding: 10px;
text-align: center;
}
#projects{
clear: both;
}
Output:
The element in my left div is not vertically centered as you can see from this screenshot
Add the following parameters to .about_container .welcome h1
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
and add position: relative to .about_container .welcome
.about_container {
color: snow;
display: flex;
border-bottom: 1px solid black;
}
.about_container .welcome {
background-color: #DCC7AA;
float: left;
position: relative;
margin: 0;
width: 50%;
-webkit-flex: 1;
-moz-flex: 1 -ms-flex: 1;
flex: 1;
}
.about_container .welcome_content {
background-color: #F7882F;
margin: 0px;
top: 0;
float: right;
width: 50%;
-webkit-flex: 1;
-moz-flex: 1 -ms-flex: 1;
flex: 1;
}
.about_container .welcome_content p {
padding: 15px;
}
.about_container .welcome h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
border: 3px solid snow;
box-sizing: border-box;
border-radius: 10px;
font-family: 'Julius Sans One', sans-serif;
padding: 10px;
text-align: center;
}
#projects {
clear: both;
}
<div class="about_container">
<div class="welcome">
<h1>Welcome<br>to my<br>Webpage!</h1>
</div>
<div class="welcome_content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="projects">
<h2>Some lonely text down here to test against overflow.</h2>
</div>
</div>
Just make .about_container .welcome a flex container too. Add this to the .about_container .welcome rule:
display: flex;
flex-direction: column;
justify-content: center;