I have set up a simple page with a rensponsive css grid that I read in this article on w3schools:
https://www.w3schools.com/css/css_rwd_grid.asp
The scaling on width works fine.
I have two things I am not able to sort out:
I've set up a max width on the page of 960px and when I make the viewport smaller the width scales fine, but for the buttons I have up at the top I want them to have a height of 125px when the page is at its max width and then scale down proportionaly with the width.
For the dummy2 and dummy3 buttons I want them to have 50% of the height in that grid row.
Her is a jsfiddle of what I got:
https://jsfiddle.net/nyehc0g9/
Heres the code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
html {
margin: 0 auto;
max-width: 960px;
}
body {
background-color: black;
}
*
{
box-sizing: border-box;
}
.row::after
{
content: "";
clear: both;
display: table;
}
[class*="col-"]
{
float: left;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.button
{
background-color: grey;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border:none;
outline: white solid;
width: 100%;
}
img {
width: 100%;
height: auto;
}
.button-0
{
width: 100%;
height: 125px;
}
.button-1
{
width: 100%;
height:50%;
display: inline-block;
}
</style>
</head>
<body>
<div class="row">
<div class="col-3"><button class="button button-0" href="">Dummy0</button></div>
<div class="col-6"><button class="button button-0" onclick="javascript:history.go(0)">Refresh page</button></div>
<div class="col-3"><button class="button button-0">Dummy1</button></div>
</div>
<div class="row">
<div class="col-5">
<img src="https://pbs.twimg.com/profile_images/737359467742912512/t_pzvyZZ.jpg"/>
</div>
<div class="col-2">
<button class="button button-1" href="">Dummy2</button>
<button class="button button-1" href="">Dummy3</button>
</div>
<div class="col-5">
<img src="https://pbs.twimg.com/profile_images/737359467742912512/t_pzvyZZ.jpg"/>
</div>
</div>
</body>
</html>
Just add
.button-0{
height: 9vw;
max-height: 125px;
}
.row{
display: flex;
display: -webkit-flex;
}
Should do the trick! Adjust the height: 9vw to whatever you think is optimal while scaling down.
Related
/* Responsive Styling */
* {
box-sizing: border-box;
}
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
/* Body CSS */
/* Header */
#header {
height: 70px;
background-color:white;
border-top: solid 5px #324f8e;
border-bottom: solid 2px #d5dae7;
}
.logo {
background-image: url('images/logo.png');
background-repeat: no-repeat;
margin: 15px;
float: left;
width: 100%;
height: auto;
}
.search {
backr
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Project</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
<div class="col-5 logo"></div>
<input type="search" class="col-2 search" placeholder="Search..." /></div>
<div class="ool-2 account"></div>
<div class="ool-1 notification"></div>
<div class="ool-2 logout"></div>
</div>
</body>
</html>
I can't seem to make the search be in the header container after the logo. I want it all to be in line for the header bar. I'm trying to use the Grid system, it's something small I suppose, but as a newbie, it's not clicking to me.
Also having issues with the logo, it seems to cut off slightly on the bottom, tried to a few different things with height, no luck on that either.
Thanks in advance.
Add this code to your header:
display: grid;
grid-template-columns: repeat(x, 1fr);
Change the x by the number of elements you want in a single line.
This article could be helpful:
CSS Grid Guide
I've been working on a full width with fixed height (image expand on hover "overflow hidden")
Not sure what I'm doing wrong, I can't seem to connect #media and I'm having problems with the 6th image loading the wrong direction.
Hopefully someone can point me in the right direction.
#items {
width:300px;
display: inline;
}
.itemHolder {
float:left;
width:16.6%;
height:600px;
overflow:hidden;
position:relative;
}
.item {
position:center;
top:0;
left:0;
z-index:1;
width:100%;
background:#FFF;
position: relative;
}
.itemHolder:hover {
overflow:visible;
position:center;
}
.itemHolder:hover .item {
z-index:2;
}
[class*="col-"] {
width: 100%;
}
#media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
#media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
<div class="col- col-12">
<div id="items">
<div class="itemHolder">
<div class="item"><img src="http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029071/image1.jpg?1489029071" alt="">
</div>
</div>
<div class="itemHolder">
<div class="item"><img src="http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029077/image3.jpg?1489029077" alt="">
</div>
</div>
<div class="itemHolder">
<div class="item"><img src="http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029081/image4.jpg?1489029081" alt="">
</div>
</div>
<div class="itemHolder">
<div class="item"><img src="http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029087/image6.jpg?1489029087" alt="">
</div>
</div>
<div class="itemHolder">
<div class="item"><img src="http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029081/image4.jpg?1489029081" alt="">
</div>
</div>
<div class="itemHolder">
<div class="item"><img src="http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029084/image5.jpg?1489029084" alt="">
</div>
</div>
</div>
</div>
This should solve the issue and work better on all browsers.
.items {
min-height: 600px;
overflow: hidden;
display: flex;
}
.item {
box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
align-items: center;
transition: flex 0.7s;
background-size: cover;
background-position: center;
flex: 1;
justify-content: center;
}
.item1 {
background-image: url(http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029071/image1.jpg?1489029071);
}
.item2 {
background-image: url(http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029077/image3.jpg?1489029077);
}
.item3 {
background-image: url(http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029081/image4.jpg?1489029081);
}
.item4 {
background-image: url(http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029087/image6.jpg?1489029087);
}
.item5 {
background-image: url(http://d3n8a8pro7vhmx.cloudfront.net/themes/58b62294b928713a69000000/attachments/original/1489029081/image4.jpg?1489029081);
}
/* Flex Items */
.item>* {
flex: 1 0 auto;
}
.item:hover {
flex: 4;
}
<div class="items">
<div class="item item1">
</div>
<div class="item item2">
</div>
<div class="item item3">
</div>
<div class="item item4">
</div>
<div class="item item5">
</div>
</div>
I am trying to vertically center content in my div.
HTML:
<div id="header">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="logo-img-div"><img id="logo-img" src="logo.png"></div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" id="logo-text">Text</div>
</div>
CSS:
#media only screen and (min-width: 768px) {
.col-sm-1 {width: 8.33%; float: left;}
.col-sm-2 {width: 16.66%; float: left;}
.col-sm-3 {width: 25%; float: left;}
.col-sm-4 {width: 33.33%; float: left;}
.col-sm-5 {width: 41.66%; float: left;}
.col-sm-6 {width: 50%; float: left;}
.col-sm-7 {width: 58.33%; float: left;}
.col-sm-8 {width: 66.66%; float: left;}
.col-sm-9 {width: 75%; float: left;}
.col-sm-10 {width: 83.33%; float: left;}
.col-sm-11 {width: 91.66%; float: left;}
.col-sm-12 {width: 100%; float: left;}
}
* {
color: #2c2c2c;
height: 100%;
width: 100%;
margin: 0 !important;
font-family: 'Raleway';
}
#header {
height: 10%;
background-color: #2c2c2c;
color: #c4c3c3;
font-family: 'title';
}
#logo-img {
height: 80%;
width: auto;
}
#logo-img-div {
}
#logo-text {
color: #c4c3c3;
}
I want to center content of logo-img-div and logo-text, but keep those two divs on the left of header content. I've found many similar questions but none of the solutions worked.
You are applying properties to all selectors with *.
http://www.w3schools.com/cssref/css_selectors.asp
Since you have a margin of 0, you are unable to align your div elements.
Normally, you could use
margin-left or right and move a number of px's or em's...
Try to remove the margin for (*) elements. This does not allow you to align them since the margin is the distance between all other elements including the body itself. Or you could have a margin only for left and right:
* {
color: #2c2c2c;
height: 100%;
width: 100%;
margin-left: 0 !important;
margin-right: 0 !important;
font-family: 'Raleway';
}
If you are trying to vertically center your div with an id of 'header' try this:
#header{
position: relative;
top: 40%;
height:10%
background-color: #2c2c2c;
color: #c4c3c3;
font-family: 'title';
}
Try to find the height of you elements in % so you can subtract them from the 50% measurement. This makes it so that your element will be perfectly centered.
In this case 50% will convert to 10% since the height is set to 10%.
Use flex to align child items. Oh, and you probably don’t want to set height and width to 100% on everything.
#media only screen and (min-width: 768px) {
.col-sm-1 {width: 8.33%; float: left;}
.col-sm-2 {width: 16.66%; float: left;}
.col-sm-3 {width: 25%; float: left;}
.col-sm-4 {width: 33.33%; float: left;}
.col-sm-5 {width: 41.66%; float: left;}
.col-sm-6 {width: 50%; float: left;}
.col-sm-7 {width: 58.33%; float: left;}
.col-sm-8 {width: 66.66%; float: left;}
.col-sm-9 {width: 75%; float: left;}
.col-sm-10 {width: 83.33%; float: left;}
.col-sm-11 {width: 91.66%; float: left;}
.col-sm-12 {width: 100%; float: left;}
}
* {
color: #2c2c2c;
margin: 0;
font-family: 'Raleway';
}
html, body {
height: 100%;
}
#header {
height: 10%;
background-color: #2c2c2c;
color: #c4c3c3;
font-family: 'title';
display: flex;
align-items: center;
}
#logo-img {
height: 80%;
width: auto;
}
#logo-text {
color: white;
}
<div id="header">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="logo-img-div"><img id="logo-img" src="logo.png"></div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" id="logo-text">Text</div>
</div>
I'm creating a webpage and set margin
margin: 120px auto 0 auto;
unfortunately the div which is above my div is also changing margin
You can see it here.
You are setting absolute position to .bckr-image, add top: 0px; if you don't want margin.
.header is empty pushing .row down, is this intended?
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.bckr-image
{
margin: 0 auto 0 auto;
background-image:url(http://www.w3schools.com/html/pic_mountain.jpg);
/*linear-gradient(white, #ADD8E6);
background-repeat: no-repeat, no-repeat;*/
background-repeat: no-repeat;
background-size: cover;
background-position: top, bottom;
z-index:-1;
filter: blur(5px);
position: absolute;
top: 0px;
height: 100%;
width: 100%;
}
.container
{
background-image: url(http://www.w3schools.com/html/pic_mountain.jpg);
background-size: cover;
background-repeat: no-repeat;
width: 80%;
z-index:0;
margin: auto;
}
.header {
margin: 120px auto 0 auto;
height: 350px;
color: #ffffff;
padding: 100px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
#media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
#media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
<body>
<div class="bckr-image"></div>
<div class="container">
<div class="header"></div>
<div class="row">
<div class="col-3 col-m-3 menu">
<ul>
<li>My:)</li>
<li>Zdjęcia</li>
<li>Prezenty</li>
<li>Mapa</li>
<li>Kontakt</li>
</ul>
</div>
<div class="col-6 col-m-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
</div>
<div class="col-3 col-m-12">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
</div>
<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</div>
</body>
Temporary solution:
add this css:
body{
padding-top:0.001em;
}
I have created a row div with id"dashboard" in which i have 3 divs. And below this row i have created 3 rows with one div in each row. I want to click on one div in row div with id"dashboard" and open the row div with id "alarm". I want to use target to acheive this task but unfortunately target can only be used with a href tag. Here is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>My Dashboard</title>
</head>
<body>
<div id="dashboard" class="row" >
<div class="col-4" style="background-color:#009">
</div>
<div class="col-4" style="background-color:#C00">
</div>
<div class="col-4" style="background-color:#0C0">
</div>
</div>
<div id="alarm" class="row" >
<div class="col-12" style="background-color:#009">
</div>
</div>
<div id="calendar" class="row" >
<div class="col-12" style="background-color:C00">
</div>
</div>
<div id="weather" class="row" >
<div class="col-12" style="background-color:#0C0">
</div>
</div>
</body>
</html>
And here is its css code:
#charset "utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.show{
display: none;
}
.show:target{
display: block;
}
As in this JS Fiddle, this is a CSS only solution, just replace your div's with a's and making use of the :target it will work the way you want:
#charset"utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
.show {
display: none;
}
:target {
display: block;
}
<div id="dashboard" class="row">
</div>
<div id="alarm" class="row show">
<div class="col-12" style="background-color:#009"></div>
</div>
<div id="calendar" class="row show">
<div class="col-12" style="background-color:#C00"></div>
</div>
<div id="weather" class="row show">
<div class="col-12" style="background-color:#0C0"></div>
</div>
Update: Upon a request in the comment, now with adding an <a href="#dashboard"> in each one of the .show gadgets and performing the same :target trick we have this result JS Fiddle 2:
#charset"utf-8";
/* CSS Document */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
.show {
display: none;
position: absolute;
width: 100%;
height: 400px;
top: 0;
}
:target {
display: block;
}
.back-btn {
width: 60px;
height: 40px;
display: inline-block;
z-index: 20;
background-color: orange;
position: absolute;
padding-top: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: black;
}
<div id="dashboard" class="row">
</div>
<div id="alarm" class="alarm row show">
back
<div class="col-12" style="background-color:#009; height:300px;"></div>
</div>
<div id="calendar" class="row show">
back
<div class="col-12" style="background-color:#C00; height:300px;"></div>
</div>
<div id="weather" class="row show">
back
<div class="col-12" style="background-color:#0C0; height:300px;"></div>
</div>
** NOTE that I've added height:300px; to the inline style of the .show DIVs.
Target isn't the correct way to do it anyway. Put an "onclick=" on the div, and write a Javascript function to handle the behavior.
<div id="dashboard" class="row">
<div class="col-4" style="background-color:#009" onclick="myfunction('col4')">
</div>
</div>
function myfunction(whichColumn){
//do some stuff with whichColumn
}