My css and html is as below but when I shrink the screen size, content columns are not working as I want them one below another.
To be more clear, I want the screen divided into two columns on bigger display. But on smaller screens each content column should occupy hundred percent width of the screen.
.page-container {
position: relative;
min-height: 100vh;
}
.content-wrapper {
padding-bottom: 100px;
}
.left-content {
width: 75%;
float: left;
background-color: red;
}
.right-content {
width: 25%;
float: left;
background-color: green;
}
.content-wrapper:after {
content: "";
display: table;
clear: both;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-color: green;
color: white;
text-align: center;
}
#media screen and (max width: 800px) {
.left-content, .right-content {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="/css/main.css">
</head>
<body>
<div class="page-container">
<div class="content-wrapper">
<div class="left-content">
<p>This is left content.</p>
</div>
<div class="right-content">
<p>This is right content.</p>
</div>
</div>
<div class="footer">
This is footer.
</div>
</div>
</body>
</html>
I want the green right column below the red left column when the screen size is small.
There is a syntax error in the media feature part of your media query. It must be #media screen and (max-width: 800px), with a -.
Here is a solution using flexbox instead of relying on float
You had an error in your media query as well. You were missing the dash in max-width
.page-container {
position: relative;
min-height: 100vh;
display: flex;
flex-flow: column nowrap;
}
.content-wrapper {
padding-bottom: 100px;
display: flex;
flex-flow: row nowrap;
flex: 1;
}
.left-content {
width: 75%;
background-color: red;
}
.right-content {
width: 25%;
background-color: green;
}
.content-wrapper::after {
content: "";
display: table;
clear: both;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-color: green;
color: white;
text-align: center;
}
#media screen and (max-width: 800px) {
.left-content, .right-content {
width: 100%;
}
.content-wrapper {
flex-flow: column nowrap;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="/css/main.css">
</head>
<body>
<div class="page-container">
<div class="content-wrapper">
<div class="left-content">
<p>This is left content.</p>
</div>
<div class="right-content">
<p>This is right content.</p>
</div>
</div>
<div class="footer">
This is footer.
</div>
</div>
</body>
</html>
Related
Hi all,
I have a design like an image and used bootstrap 5 for coding. I want to carry the sticky div area from the number one to the first div after on mobile. I can't use js. I tried to use CSS flexbox order but how can ı do that with only CSS?
I look forward to your ideas and suggestions.
Thank you so much!
body {
padding-top: 50px;
padding-bottom: 600px;
}
.box {
width: 100%;
margin-bottom: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size:92px;
}
.box:nth-of-type(1) {
background-color: #A7A7A7;
height: 232px;
}
.box:nth-of-type(2) {
background-color: #A7A7A7;
height: 250px;
}
.box:nth-of-type(3) {
background-color: #A7A7A7;
height: 500px;
}
.sticky {
background-color: #DDBEBE;
width: 100%;
height: 300px;
position: sticky;
top:0;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="box">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
</div>
<div class="col-lg-6">
<div class="sticky">
sticky area
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>
I doubt this is achieveable with flexbox alone.
However, I managed to address your requirements with display: grid and some fiddling with grid-areas on the elements. This solution also defines a specific grid-template per screen resolution.
.container {
display: grid;
grid-template-areas:
"box1 sticky"
"box2 sticky"
"box3 sticky";
}
#media (max-width: 1024px) {
.container {
grid-template-areas:
"box1"
"sticky"
"box2"
"box3";
}
}
The caveat here is that each element has to have its dedicated grid-area value for the template, so won't work for the cases where you don't know the exact number of containers in play or such number is unreasonably high.
Hope this helps!
body {
padding-top: 50px;
padding-bottom: 600px;
}
.box {
width: 100%;
margin-bottom: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: 92px;
}
.box:nth-of-type(1) {
background-color: #A7A7A7;
height: 232px;
grid-area: box1;
}
.box:nth-of-type(2) {
background-color: #A7A7A7;
height: 250px;
grid-area: box2;
}
.box:nth-of-type(3) {
background-color: #A7A7A7;
height: 500px;
grid-area: box3;
}
.sticky {
order: 1;
background-color: #DDBEBE;
width: 100%;
height: 300px;
position: sticky;
top: 0;
grid-area: sticky;
}
.container {
display: grid;
grid-template-areas:
"box1 sticky"
"box2 sticky"
"box3 sticky";
}
#media (max-width: 1024px) {
.container {
grid-template-areas:
"box1"
"sticky"
"box2"
"box3";
}
.sticky {
position: static;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
<div class="sticky">
sticky area
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</body>
</html>
Please help to remove a gap below the slanted div on a mobile version. Look at the image below what i've got and what i need.
Image of a gap on a mobile device
Test page: http://stupen.design/slanted/slanted.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Slanted test</title>
<style>
body {
margin: 0;
padding: 0;
-ms-overflow-style: none;
}
body::-webkit-scrollbar {
display: none;
}
.title {
font-size: 12vh;
margin-top: 10%;
margin-left: 10%;
position: absolute;
z-index: 10;
}
.section1 {
height: 100vh;
background-color: red;
}
.section2 {
height: 100vh;
background-color: blue;
}
.section3 {
height: 100vh;
background-color: green;
}
.slanted {
height: 100%;
width: 100%;
background-color: white;
transform: skew(0deg, -9deg);
transform-origin: 0% 100%;
position: absolute;
z-index: 5;
}
</style>
</head>
<body>
<div class="section1">
<h1 class="title">First slide</h1>
</div>
<div class="section2">
<h1 class="title">Second slide</h1>
<div class="slanted">
</div>
</div>
<div class="section3">
<h1 class="title">Third slide</h1>
</div>
</body>
</html>
Done! Me stupid. Just change .slanted's height percents to vh.
I already search this forum but none of the solution works for me. As the title mention my page footer is not staying at the bottom.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.menu {
float: left;
width: 20%;
}
.menuitem {
padding: 8px;
margin-top: 7px;
border-bottom: 1px solid #f1f1f1;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
overflow: hidden;
}
.right {
background-color: lightblue;
float: left;
width: 20%;
padding: 10px 15px;
margin-top: 7px;
}
#media only screen and (max-width:800px) {
/* For tablets: */
.main {
width: 80%;
padding: 0;
}
.right {
width: 100%;
}
}
#media only screen and (max-width:500px) {
/* For mobile phones: */
.menu,
.main,
.right {
width: 100%;
}
}
</style>
</head>
<body style="font-family:Verdana;">
<div style="background-color:#f1f1f1;padding:15px;">
<h1>Cinque Terre</h1>
<h3>Resize the browser window</h3>
</div>
<div style="overflow:auto">
<div class="menu">
<div class="menuitem">The Walk</div>
<div class="menuitem">Transport</div>
<div class="menuitem">History</div>
<div class="menuitem">Gallery</div>
</div>
<div class="main">
<h2>The Walk</h2>
<p>The walk from Monterosso to Riomaggiore will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
<img src="https://i.imgur.com/NLkubDn.jpg" style="width:25%">
</div>
<div class="right">
<h2>What?</h2>
<p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
<h2>Where?</h2>
<p>On the northwest cost of the Italian Riviera, north of the city La Spezia.</p>
<h2>Price?</h2>
<p>The Walk is free!</p>
</div>
</div>
<div style="background-color:#ffd88c;text-align:center;padding:10px;margin-top:7px;font-size:12px;"> This web page is a part of a demonstration of fluid web design made by w3schools.com. Resize the browser window to see the content respond to the resizing.</div>
</body>
</html>
It does worked on mobile but not working on normal display.
Here's the demo page: http://jsfiddle.net/Lwp710be/2/show
and here's the jsfiddle code: http://jsfiddle.net/Lwp710be/2/
A better solution would be for you to use the CSS Grid since the footer and main content area are major sections of the page.
Below is a demo where I have created a grid context on a class with the name.container and applied it to the body element in the markup, I then wrapped the main content within a main element so the body element now has 2 children main and div (the div element is your footer) who both follow the rules of the grid:
* {
box-sizing: border-box;
}
.container {
display: grid;
grid-template-rows: 1fr auto;
min-height: 100vh;
}
.menu {
float: left;
width: 20%;
}
.menuitem {
padding: 8px;
margin-top: 7px;
border-bottom: 1px solid #f1f1f1;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
overflow: hidden;
}
.right {
background-color: lightblue;
float: left;
width: 20%;
padding: 10px 15px;
margin-top: 7px;
}
#media only screen and (max-width:800px) {
/* For tablets: */
.main {
width: 80%;
padding: 0;
}
.right {
width: 100%;
}
}
#media only screen and (max-width:500px) {
/* For mobile phones: */
.menu,
.main,
.right {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="container" style="font-family:Verdana;">
<!-- MAIN CONTENT STARTS HERE -->
<main>
<div style="background-color:#f1f1f1;padding:15px;">
<h1>Cinque Terre</h1>
<h3>Resize the browser window</h3>
</div>
<div style="overflow:auto">
<div class="menu">
<div class="menuitem">The Walk</div>
<div class="menuitem">Transport</div>
<div class="menuitem">History</div>
<div class="menuitem">Gallery</div>
</div>
<div class="main">
<h2>The Walk</h2>
<p>The walk from Monterosso to Riomaggiore will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
<img src="https://i.imgur.com/NLkubDn.jpg" style="width:25%">
</div>
<div class="right">
<h2>What?</h2>
<p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
<h2>Where?</h2>
<p>On the northwest cost of the Italian Riviera, north of the city La Spezia.</p>
<h2>Price?</h2>
<p>The Walk is free!</p>
</div>
</div>
</main>
<!-- MAIN CONTENT ENDS HERE -->
<div style="background-color:#ffd88c;text-align:center;padding:10px;margin-top:7px;font-size:12px;"> This web page is a part of a demonstration of fluid web design made by w3schools.com. Resize the browser window to see the content respond to the resizing.</div>
</body>
</html>
I use flexbox to solved it.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}
.menu {
float: left;
width: 20%;
}
.menuitem {
padding: 8px;
margin-top: 7px;
border-bottom: 1px solid #f1f1f1;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
overflow: hidden;
}
.right {
background-color: lightblue;
float: left;
width: 20%;
padding: 10px 15px;
margin-top: 7px;
}
#media only screen and (max-width:800px) {
/* For tablets: */
.main {
width: 80%;
padding: 0;
}
.right {
width: 100%;
}
}
#media only screen and (max-width:500px) {
/* For mobile phones: */
.menu, .main, .right {
width: 100%;
}
}
</style>
</head>
<body style="font-family:Verdana;">
<div class="content">
<div style="background-color:#f1f1f1;padding:15px;">
<h1>Cinque Terre</h1>
<h3>Resize the browser window</h3>
</div>
<div style="overflow:auto">
<div class="menu">
<div class="menuitem">The Walk</div>
<div class="menuitem">Transport</div>
<div class="menuitem">History</div>
<div class="menuitem">Gallery</div>
</div>
<div class="main">
<h2>The Walk</h2>
<p>The walk from Monterosso to Riomaggiore will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
<img src="img_5terre.jpg" style="width:100%">
</div>
<div class="right">
<h2>What?</h2>
<p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore.</p>
<h2>Where?</h2>
<p>On the northwest cost of the Italian Riviera, north of the city La Spezia.</p>
<h2>Price?</h2>
<p>The Walk is free!</p>
</div>
</div>
</div>
<footer class="footer">This web page is a part of a demonstration of fluid web design made by w3schools.com. Resize the browser window to see the content respond to the resizing.</footer>
</body>
</html>
I'm unable to move .intro .inner to the middle so my writing are in the middle. Please help how I can move my content to the middle. It's just stuck on the top left and won't move with the CSS I have added.
#import url("https://fonts.googleapis.com/css?family=Lato" rel="stylesheet");
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background: url(https://s3.amazonaws.com/aws-website-jebadicom-qy2sr/images/landing-screen.png);
display:table;
top: 0;
background-size: cover;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
max-width: 600px;
margin: 0 auto;
padding-left: 100px;
text-align: center;
padding-bottom: 28%;
}
/*---Media Queries---*/
#media screen and (max-width: 900px) {
}
#media screen and (max-width: 768px) {
}
#media screen and (max-width: 480px) {
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jamshid Ebadi's Portolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta Charset='uft-8'>
<link rel='shortcut icon' href="https://s3.amazonaws.com/aws-website-jebadicom-qy2sr/images/favicon.png">
<link rel="stylesheet" href="https://s3.amazonaws.com/aws-website-jebadicom-qy2sr/index.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="https://s3.amazonaws.com/aws-website-jebadicom-qy2sr/animate.css" rel="stylesheet"/>
<link href="https://s3.amazonaws.com/aws-website-jebadicom-qy2sr/waypoints.css" rel="stylesheet"/>
<script src="https://s3.amazonaws.com/aws-website-jebadicom-qy2sr/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="https://s3.amazonaws.com/aws-website-jebadicom-qy2sr/waypoints.js" type="text/javascript"></script>
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<section class="os-animation" data-os-animation="pulse" data-os-animation-delay="0s">
<h1> Animate Easy</h1>
</section>
<section class="os-animation" data-os-animation="pulse" data-os-animation-delay="1s">
<a class="btn" href="#">Get Started</a>
</section>
</div>
</div>
</section>
</body>
<html>
Each element has a container.
For example we have this:
.item {
position: absolute;
top: 50%;
left: 50%;
margin-top: -height_size/2;
margin-left: -width_size/2;
}
<div class="container">
<div class="item"></div>
</div>
you must determine item size(width and height)
You must declare width of your content to center it. Try this solutions
.middle{
margin-left:auto;
position: relative;
display:block;
margin-right:auto;
width:25%}
<div class="middle">
<p>content</P>
</div>
Better you try Below Example in your code.
.middle {
margin-left:auto;
margin-right:auto;
padding:50%;
}
<div class="middle">
<p>Text</P>
</div>
I am making a web app and I am needing the 4x links that are located in the middle column to be evenly spaced vertically and for the text inside the links to be horizontally and vertically centerd as-well.
The below picture is what I am after, please note that the website is going to be responsive. I want to avoid using flexbox at this stage as I have been running into some browser compatibility problems.
CodePen Demo
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Runna - Track your run!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/js.js"></script>
<script src="js/modernizr.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<img src="imgs/logo-blue.png" />
</header>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11564.804405086046!2d172.59430635!3d-43.56069255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2snz!4v1418977732755" frameborder="0" style="border:0"></iframe>
<section class="control-container">
<div class="column left">
</div>
<div class="column middle">
<nav>
<ul>
<li>
<i class="fa fa-chevron-down"></i>
START
STOP
PAUSE
</li>
</ul>
</nav>
</div>
<div class="column right">
</div>
</section>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
font: 100% arial;
overflow: hidden;
}
#media all and (max-width: 150em) {
header {
width: 100%;
height: 5vh;
background: black;
}
header img {
height: 100%;
}
iframe {
width: 100%;
height: 65vh;
display: block;
}
.control-container {
width: 100%;
height: 30vh;
background: black;
display: table;
}
.column {
display: table-cell;
color: white;
width: 100%;
text-align: center;
}
.row {
display: block;
width: 100%;
}
.left {
background: yellow;
width: 33.3%;
height: 100%;
}
.middle {
background: black;
width: 33.3%;
height: 100%;
}
.right {
background: red;
width: 33.3%;
height: 100%;
}
nav ul {
height: 100%;
margin: 0;
padding: 0;
}
nav li {
display: block;
}
nav a {
color: white;
text-decoration: none;
text-align: center;
width: 100%;
padding: 30px;
}
nav a:hover {
background: green;
}
}
Try using display: table and display: table-row
.column.middle ul,.column.middle nav,.column.middle li {
height: 100%;
}
.column.middle li {
display: table;
width: 100%;
}
.column.middle li a {
display: table-row;
width: 100%;
}
Working Fiddle
The above solution will work but as you can see the menu items are not vertically centered. To make them centered, I wrapped the menu items contents with a div element. and added the following css:
.column.middle li a div {
display: table-cell;
vertical-align: middle;
}
Updated Fiddle