I am using css grids to make some divs align. As seen in the picture provided, the cards have an uneven gap between them. I don't want to use padding or position translate to align them because the resolutions sizes will differ from device to device and it will look all jumbled.
HTML:
<div class= "column"> <!--this column has been placed so that it can include a number of div boxes that
carries the solutions for the website. -->
<div class="card card1">
<h5>breathing tool</h5>
<a href="breathing-tool.html">
<ol>
<li> Breathing helps reduce anxiousness. </li>
<li> This mini programme is developed to help with rhytmic breathing. </li>
</ol>
</a>
</div>
<div class="card card2">
<h5>Pink meditation room</h5>
<p> This is the breathing tool and will help with the clamness of the users</p>
</div>
<div class="card card3">
<h5> Quote dispenser</h5>
<p> This is the breathing tool and will help with the clamness of the users</p>
</div>
</div> <!--this is the closing tag of "column"-->
CSS:
column{
display: grid;
height: auto;
width: auto;
grid-template-columns: repeat(2,4fr);
/*the colums numbers have been replaced with a repeat of 2 columns with the specified size of 4fractions*/
grid-template-rows: 2.5fr 2.5fr 2.5fr 2.5fr 2.5fr;
background-color: bisque;
grid-template-areas:
"card1 card1 card2 card2 card3 card3";
/* The display grid here works by making the card divs
align properly like I need them to. This will make
space for writng and describing each of the provided
solutions without a disorientation.*/
}
.card{
width: 250px;
height: 350px;
display: inline-block;
border-radius: 10px;
padding: 15px;
box-sizing: border-box;
cursor: pointer;
margin: 30px 70px;
background-image: url(images/pink2.png);
background-position: center;
background-size: cover;
transition: transform 0.5s;
Use flexbox instead of grid
Remove all the grid in .column and replace them with these:
display: flex; /* adding flex */
justify-content: space-around; /* Positioning them with spaces */
flex-wrap: wrap; /* Wrapping Elements when page is small */
I also added a border to show the elements, you can remove it.
Don't forget to run the code snippet and press full page to see the full result
This would be your final code:
.column{
display: flex; /* adding flex */
justify-content: space-around; /* Positioning them with spaces */
flex-wrap: wrap; /* Wrapping Elements when page is small */
height: auto;
width: auto;
background-color: bisque;
}
.card{
width: 250px;
height: 350px;
display: inline-block;
border-radius: 10px;
padding: 15px;
box-sizing: border-box;
cursor: pointer;
margin: 30px 70px;
background-image: url(images/pink2.png);
background-position: center;
background-size: cover;
transition: transform 0.5s;
/* You can remove this: */
border: 1px solid;
}
<div class= "column"> <!--this column has been placed so that it can include a number of div boxes that
carries the solutions for the website. -->
<div class="card card1">
<h5>breathing tool</h5>
<a href="breathing-tool.html">
<ol>
<li> Breathing helps reduce anxiousness. </li>
<li> This mini programme is developed to help with rhytmic breathing. </li>
</ol>
</a>
</div>
<div class="card card2">
<h5>Pink meditation room</h5>
<p> This is the breathing tool and will help with the clamness of the users</p>
</div>
<div class="card card3">
<h5> Quote dispenser</h5>
<p> This is the breathing tool and will help with the clamness of the users</p>
</div>
</div> <!--this is the closing tag of "column"-->
Related
Basically, I have this user-customisable CSS-grid (node: width and height don't have limits, and I do not want it to have such) and it can be really really wide and/or really really high, and if that happens, the scrolling just stops somewhere and the elements not in the middle of the grid just get made inaccessible.
This is what I have at the moment and I got zero idea how to make it scroll to all parts of the grid
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0px;
}
#board {
display: grid;
grid-template-columns: 26px
}
.tile {
width: 20px;
height: 20px;
border-style: solid;
border-color: rgb(64, 64, 64);
background-color: lightgray;
display: flex;
justify-content: center;
align-items: center
}
<div id="game_div">
<div id="board">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<!--
There are a lot more tiles that get added via .appendChild().
Imagine like a few thousand more tiles here.
-->
</div>
<!-- Irrelevant Minesweeper stuff -->
<button onclick="help()">Stuck?</button>
<p id="minecount" style="display:inline"></p>
</div>
PS: Before anyone links me to this, I have tried to understand it and it hasn't worked, so I am asking more specifically. (also that as well)
EDIT: Thank you Teemu, I had to add flex-wrap: wrap to the body ruleset
I have something like this:
HTML:
<div id="container">
<img src="leftphoto.jpg" id="left">
<div id="right">Description</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
background-color:#252525;
}
#container{
position: relative;
display: flex;
justify-content: center;
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
height: 40vw;
}
#left{
max-width: 75vw;
height:100%;
}
#right{
min-width: 300px;
height:100%;
color:white;
width:20vw;
background-color: red;
color: #ffffff;
font-size: 11px;
overflow: auto;
}
I want the right div to go down, under left div with the same width. How can I achieve that?
What I have:
When I resize window, it is smaller:
But I want the right div to go down, under the left div and also I would like to get the same width on both divs:
I was trying a lot of different things, but I couldn't achieve this. Do you have any advice?
You can use flex blox to achieve this. Simply place on the container of the divs. Once that is done you can change the divs placement by flex-direction row/column. Similarly, for placing the 2nd div above the first div once the size reduce, you can set media query for a specific screen where you can reverse the column and you done.
.container{
display: flex;
flex-direction: row;
}
#media screen and (max-width:768px){
.container{
display: flex;
flex-direction: column-reverse
}
}
<div class="container">
<div>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
</div>
<div class="content">
<p>Content</p>
</div>
</div>
Create a second container in your html and they will naturally align under eachother
<div class="container">
<div class="content-Container">
<img src="leftphoto.jpg" id="left" />
<div id="right">Description</div>
</div>
</div>
and then position them to the middle of the page by adding style to the parent container
I have a <div> like below
<div style="right:0px;bottom:0px;position:absolute;">
</div>
When my mobile site is opened in portrait mode, this div is displayed correctly at the bottom right corner.
But, when opened in landscape mode it is displayed at corner and overlaps the elements already present.
I want this div to be at the bottom of all elements at the bottom right corner of the page. How do I do it?
I would suggest to use flexbox - but it could need to reorganise a little your css code
.page {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height:100vh;
}
.element {
height: 10px;
width: 80%;
border: 1px solid #000;
padding: 20px 0;
}
.element.bottom {
margin-top: auto;
background: red;
}
<div class="page">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element bottom">
</div>
</div>
I am struggling to achieve this efect ;
I would like to put n-divs next to each others if the screen is big enough , and one below each other otherwise , and I would like those n-divs to be contained in one div ( the yellow container in my code ) and the title area (black in my code) + the yellow container in a wrapper that encapsulates everything ( green in my code )
I started to write the code , but I am far from achieving the result.
Please , be nice to me , I am new to font-end developement and still in the learning process.
Jsfiddle here --> https://jsfiddle.net/9atbtj0L/1/
I will appreciate any corrections and/or enhancements to my code.
code here :
html
<div class="homepage-wrapper">
<div class="homepage-top-category-container">
<div class="homepage-top-category-container-title">
<span id="homepage-top-category-container-title">block title here</span>
</div>
<div class="homepage-top-category-container-list">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catA">
block A
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catB">
block B
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catC">
block C
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catD">
block D
</div>
</div>
</div>
</div>
</div>
css
.homepage-wrapper{ /*This should contain the title of the grid + different blocks*/
background-color: green;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title{
background-color: black;
margin-bottom: 10px;
}
#homepage-top-category-container-title{
color: orange;
}
.homepage-top-category-container-list{ /*This should be the container*/
display: flex;
height: auto;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
.homepage-top-category-container-item{
display: block;
float: none;
width: auto;
height:auto;
border: solid 1px black;
}
Thank you.
******************************EDIT***********************************
I've got some help fixing my code from very knowledgeable members of our community , so I have updated my code , alhough I noticed some others problems :
1- block that have enough space to align on a same lign don't do so and go underneath.
2- I would like to put 4 blocks per line with a left-margin only between them. The max-width for the wrapper is 1080px.
4 divs of 255px + 3 left-margin of 20px and 0px on extremes ( right side of the first div and left side of the last div ).
Edited code here :
html :
<div class="homepage-wrapper">
<div class="homepage-top-category-container">
<div class="homepage-top-category-container-title">
<span id="homepage-top-category-container-title">block title here</span>
</div>
<div class="homepage-top-category-container-list">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catA">
<img src="https://s-media-cache-ak0.pinimg.com/originals/3f/b3/1c/3fb31c972e990cb214e55540dd9a2e2b.jpg" width="auto" height="auto">
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catB">
<img src="https://s-media-cache-ak0.pinimg.com/originals/3f/b3/1c/3fb31c972e990cb214e55540dd9a2e2b.jpg" width="auto" height="auto">
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catC">
<img src="https://s-media-cache-ak0.pinimg.com/originals/3f/b3/1c/3fb31c972e990cb214e55540dd9a2e2b.jpg" width="auto" height="auto">
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catD">
<img src="https://s-media-cache-ak0.pinimg.com/originals/3f/b3/1c/3fb31c972e990cb214e55540dd9a2e2b.jpg" width="auto" height="auto">
</div>
</div>
</div>
</div>
and css :
.homepage-wrapper{
background-color: green;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title{
background-color: black;
margin-bottom: 10px;
}
#homepage-top-category-container-title{
color: orange;
}
.homepage-top-category-container-list{
display: flex;
flex-wrap:wrap;
width: auto;
height: auto;
background-color: yellow;
}
.homepage-top-category-container-list > div {
margin-left: 20px;
margin-bottom: 20px;
}
.homepage-top-category-container-item{
display: block;
float: none;
width: auto;
height:auto;
border: solid 1px black;
}
and JSfiddle here ---> https://jsfiddle.net/mz2u6rzg/
I have added an image to better identify blocks. I will appreciate any corrections and enhancements from our community.
Thanks for your help.
I think that you're looking for flex-wrap:wrap.
According to the MDN reference:
The CSS flex-wrap property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines.
.homepage-wrapper{ /*This should contain the title of the grid + different blocks*/
background-color: green;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title{
background-color: black;
margin-bottom: 10px;
}
#homepage-top-category-container-title{
color: orange;
}
.homepage-top-category-container-list{ /*This should be the container*/
display: flex;
flex-wrap:wrap;
height: auto;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
.homepage-top-category-container-item{
display: block;
float: none;
width: auto;
height:auto;
border: solid 1px black;
}
<div class="homepage-wrapper">
<div class="homepage-top-category-container">
<div class="homepage-top-category-container-title">
<span id="homepage-top-category-container-title">block title here</span>
</div>
<div class="homepage-top-category-container-list">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catA">
block A
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catB">
block B
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catC">
block C
</div>
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item|catD">
block D
</div>
</div>
</div>
</div>
You can achieve this using media query.I have used 400px as the break point you can use as per your choice.Here is a working JSfiddle link https://jsfiddle.net/0f5y8q8b/
#media only screen and (min-width: 400px) {
.homepage-top-category-container-item{
width: 100%
}
.homepage-top-category-container-list{
display:block
}
}
you can use the css media tag to check for screen size but it might not be compatible with old browser
#media only screen and (max-width: 1023px) {
}
#media only screen and (min-width: 1024px) {
}
see CSS media queries for screen sizes
i'Ve updated your fiddle with this code AFTER the 'normal' styling so it will over write the 'default' display for your class
#media only screen and (max-width: 300px) {
.homepage-top-category-container-list{ /*This should be the container*/
display: block;
}
}
https://jsfiddle.net/9atbtj0L/1/
if you use the zoom in/out of your browser you will see it in action.
hope this helps
I found a web page which shows only 3 events in a grid and when the screen is re-sized less a certain width, it not only relocates the 3 events into a list but also changes the layout inside each event.
I have tried many ways to make it look like that web page, but have not got any luck.
this is the web page
And this is what I have done: CodePen
/* -- DEFAULTS -- */
div, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
/* -- FLUID GRID STYLES -- */
#Grid {
margin-bottom: 40px;
text-align: justify;
font-size: 0.1px;
}
#Grid li {
display: inline-block;
background: #eee;
width: 23%;
padding-top: 23%;
/* Used instead of height to give elements fluid, width-based height */
margin-bottom: 2.5%;
}
#Grid:after {
content: 'haha';
display: inline-block;
width: 100%;
border-top: 10px dashed #922d8d;
/* Border added to make element visible for demonstration purposes */
}
ul li .icon {
width: 100%;
display: table;
min-height: 300px;
height: 300px;
padding: 0;
background: #545454 url(https://www.nike.com/events-registration/client-dist/assets/images/multi-card-bg.png) no-repeat center center;
}
#Grid .placeholder {
padding: 0;
border-top: 10px solid #922d8d;
/* Border added to make element visible for demonstration purposes */
}
/* -- MEDIA QUERIES DEFINING RESPONSIVE LAYOUTS -- */
/* 3 COL */
#media (max-width: 800px) {
#Grid li {
width: 31%;
padding-top: 31%;
margin-bottom: 3%;
}
}
/* 2 COL */
#media (max-width: 600px) {
#Grid li {
width: 48%;
padding-top: 48%;
margin-bottom: 4%;
}
}
/* SINGLE COL */
#media (max-width: 400px) {
#Grid li {
width: 100%;
padding-top: 100%;
margin-bottom: 5%;
}
}
/* -- LEGEND STYLES (NOT PART OF GRID FRAMEWORK) -- */
h1 {
font: 600 20px"Helvetica Neue";
text-align: right;
text-transform: uppercase;
}
label {
padding: 8px 15px;
margin-bottom: 20px;
display: block;
font: 100 22px"Helvetica Neue";
border-left: 10px solid #922d8d;
}
label:last-of-type {
border-left: 10px dotted #922d8d;
}
p {
font: 200 15px/1.5em"Helvetica Neue";
max-width: 400px;
margin-bottom: 30px;
color: #333;
}
Update
Here is my updated code. The problem is I cannot place the "1 JAN" and "NEW YEAR" in the middle of the div.
Updat 2
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-12">
<div class="row hidden-xs icon">
<div class="title">1 JAN</div>
<div class="event-time"><i>8:00PM</i></div>
<div class="sub-title">This Event is Full</div>
</div>
<div class="row hidden-xs sub-icon">
<div><span>LRC Thursday Night Run test long long</span></div>
<div>
<input type="button" class="btn btn-primary" value="Register" />
</div>
</div>
<div class="row hidden-sm event-sm">
<div class="col-xs-4 event-left">
<div class="event-day">01</div>
<div class="event-month">JAN</div>
<div class="event-time"><i>8:00PM</i></div>
</div>
<div class="col-xs-8 event-right">
<div class="event-notice">This event is full</div>
<div class="event-title">NIKE RUN 10 KM</div>
<div class="event-slogan">Come run with us</div>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="well well-sm">
<h1 class="text-center hidden-xs">14 FEB</h1>
<p class="text-center hidden-xs">Valentine</p>
<div class="row hidden-sm">
<div class="col-xs-4"><i>February 14th</i>
</div>
<div class="col-xs-8">Ah! Lovey Dovey Day... Where is my chocolate?</div>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="well well-sm">
<h1 class="text-center hidden-xs">1 APR</h1>
<p class="text-center hidden-xs">April Fool</p>
<div class="row hidden-sm">
<div class="col-xs-4"><i>April 1st</i>
</div>
<div class="col-xs-8">Your car just got stolen.... JUST KIDDING!!!</div>
</div>
</div>
</div>
</div>
</div>
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
If you are already using Bootstrap, you already have this capability. Use hidden-.. and the col-xx-... classes to make your page responsive.
See this example: http://embed.plnkr.co/IH4WeZ/
It's all done using bootstrap css. The trick is to hide stuffs at certain media query and show them whenever appropriate.
I only coded it be responsive at small and extra small size, so on medium and large it's a bit bonker... but you get the idea...
You could use the Bootstrap grid system to do something like this.
You could use a combination of the columns, and offset to achieve this.
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
That will span three columns across the full width of the page. You could experiment with smaller width columns, and adding an offset to the first one to push it away from the left edge.
http://getbootstrap.com/css/#grid-offsetting
If you want to achieve a similar effect, try and replicate it with minimal code and work from there.
Here is a simple example I have knocked up to get the layout working:
http://codepen.io/anon/pen/OPeXgj
HTML
<ul class="events">
<li>Event Name</li>
<li>Event Name</li>
<li>Event Name</li>
</ul>
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.events {
clear: both;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.events li {
float: left;
clear: both;
width: 100%;
background: yellow;
margin: 0;
padding: 10px;
}
#media only screen and (min-width: 768px) {
.events li {
width: 33.3%;
clear: none;
}
}
Using a mobile first approach, child items are styled with a width: 100%; and clear: both; Then, with a simple media query, I float them left and set a width to around a 3rd (33.3%) (there could be a better way, but this was a quick fix).
If you're using a grid system, it may be even easier. I would look into Bootstrap or Foundation, as many of these problems have already been solved many times over.
Good luck!
Last resort solution is to code two versions. One for mobile and another one for desktop. Then use media queries to hide one on mobile resolution and the other on desktop.
This will add some extra load on the page, but it should do it.