I've tried to center the items of my masonry layout, but it still always floats left and has lots of white space at certain browser widths. Also how could I get more padding on the bottom of the container between the hr element? Here's the website page link: http://www.gabrielleelizabethstudios.com/gallery_template.html
HTML:
<div class="masonry js-masonry"
data-masonry-options='{ "itemSelector": ".item", isFitWidth: true}'>
<div class="item">
<a class="group1" href="GEA_Galleries/GEA_Photography_Galleries/GEA_Justin_Gallery_Photos/CCS%20-%20Justin%20Cox%202014%20(1).jpg" title="justin merriman 2014"><img width="167" height="250" src="GEA_Galleries/GEA_Photography_Galleries/GEA_Justin_Gallery_Photos/CCS%20-%20Justin%20Cox%202014%20(1).jpg"/></a>
</div>
<div class="item w2">
<a class="group1"...
CSS:
.item img{
border-radius: 10px;
}
.masonry{
width: 85%;
max-width: 1000px;
margin: 0 auto;
padding-top: 15px;
padding-bottom: 35px;
}
.masonry .item{
margin-bottom: 20px;
margin-top: 20px;
height: 250px;
float: left;
margin: 10px;
}
.item { width: 167px; }
.item.w2 { width: 375px; }
#media only screen and (max-width: 720px),
only screen and (max-device-width: 720px){
.masonry{width: 95%;}
}
Related
I have an html page which displays three images in a row and I need to place a button over each of them in a responsive way. I want the images to change in size and then be one above the other when the page width is reduced, but I want the button size to also reduce as image reduces in size and I want the button position to remain the same wrt the image.
I found that I needed to use relative positioning for the button but when I do that a large amount of extra space appears below an image. If I use absolute positioning this space doesn't appear but then the button no longer stays positioned on the image when the image size and/or position changes. Also I can't find a way to reduce the button size.
How can I prevent the extra white space appearing and ensure the button stays over the image and how can i make the button size change dynamically when page width is changed?
* {
box-sizing: border-box;
}
.main {
color: limegreen;
background-color: lightsteelblue;
}
.row {
width: 100%;
display: block;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
#media screen and (max-width: 800px) {
.column {
float: none;
width: 360px;
margin-left: auto;
margin-right: auto;
}
}
#media screen and (max-width: 360px) {
.column {
width: 95%;
}
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
.container {
position: relative;
}
/* Style the button and place it at the bottom of the container/image */
.container .btn {
position: relative;
bottom: 50%;
left: 50%;
transform: translate(-50%, -120%);
-ms-transform: translate(-50%, -50%);
background-color: transparent;
color: white;
font-size: 20px;
font-weight: 700;
padding: 12px 24px;
border: solid white;
cursor: pointer;
border-radius: 5px;
}
.container .btn:hover {
background-color: black;
}
<!DOCTYPE html>
<html>
<head>
<link href="images.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main row container">
<div class="column">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width: 100%" />
<button class="btn">START TODAY</button>
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_forest.jpg" alt="Forest" style="width: 100%" />
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width: 100%" />
</div>
</div>
</body>
</html>
i change some css structure in your code.maybe this can help
.main.row.container .column {
overflow: hidden;
display: flex;
align-items: center;
vertical-align: middle;
justify-content: center;
flex-wrap: wrap;
}
* {
box-sizing: border-box;
}
.main {
color: limegreen;
background-color: lightsteelblue;
}
.row {
width: 100%;
display: block;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
#media screen and (max-width: 800px) {
.column {
float: none;
width: 360px;
margin-left: auto;
margin-right: auto;
}
}
#media screen and (max-width: 360px) {
.column {
width: 95%;
}
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
.container {
position: relative;
}
/* Style the button and place it at the bottom of the container/image */
.container .btn {
position: absolute;
color: white;
font-size: 20px;
font-weight: 700;
padding: 12px 24px;
border: solid white;
cursor: pointer;
border-radius: 5px;
background-color: transparent;
}
.container .btn:hover {
background-color: black;
}
<!DOCTYPE html>
<html>
<head>
<link href="images.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main row container">
<div class="column">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width: 100%" />
<button class="btn">START TODAY</button>
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_forest.jpg" alt="Forest" style="width: 100%" />
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width: 100%" />
</div>
</div>
</body>
</html>
I have this html and css layout. I want to make it when reaching tablet with media query and phone to show like in those 2 images. So I have in normal (desktop mode) 4 products all of them in the same line. When the view reaches tablet - 1199 pixels I want those 4 products to be each 2 on a separate line, so 2 lines with 2 products. On the phone mode 768 pixels I want each product to be on its line with the width full like the wrapper.
Here is the code :
body {
margin: 0px;
padding: 0px;
}
/* Header */
.header {
background-color: yellow;
width: 100%;
margin: 0 auto;
}
.wrapper {
max-width: 1200px;
margin: 0 auto;
}
.logo {
background-color: grey;
width: 150px;
height: 50px;
margin-top: 20px;
float: left;
}
.info {
background-color: grey;
width: 285px;
height: 50px;
margin-top: 20px;
float: right;
}
.clear {
clear: both;
}
.menu {
background-color: grey;
width: 1200px;
height: 50px;
margin-top: 20px;
}
/* */
/* Nav-Bar */
.nav-bar {
background-color: lightgray;
width: 1200px;
height: 340px;
margin-top: 20px;
}
/* */
/* Product grid */
.product1,
.product2,
.product3 {
background-color: lightgray;
width: 285px;
height: 320px;
margin-top: 20px;
margin-right: 20px;
float: left;
}
.product4 {
background-color: lightgray;
width: 285px;
height: 320px;
margin-top: 20px;
float: left;
}
/* */
/* Bottom Part */
.content-area {
background-color: lightgray;
width: 100%;
height: 420px;
margin-top: 20px;
}
/* */
/* Footer */
.footer-area {
background-color: gray;
width: 100%;
height: 50px;
margin-top: 20px;
}
/* */
/* Responsive */
#media screen and (max-width: 1199px) {
.product1,
.product2,
.product3,
.product4 {
display: none;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Home View</title>
<link rel="stylesheet" type="text/css" href="../style/homestyle.css">
</head>
<body>
<!-- Header -->
<div class="header">
<div class="wrapper">
<div class="logo"></div>
<div class="info"></div>
<div class="clear"></div>
<div class="menu"></div>
</div>
</div>
<!-- -->
<!-- NavBar -->
<div class="header">
<div class="wrapper">
<div class="nav-bar"></div>
<div class="clear"></div>
</div>
</div>
<!-- -->
<!-- Product Grid -->
<div class="wrapper">
<div class="def1">
<div class="product1"></div>
</div>
<div class="def2">
<div class="product2"></div>
</div>
<div class="def3">
<div class="product3"></div>
</div>
<div class="def4">
<div class="product4"></div>
</div>
<div class="clear"></div>
</div>
<!-- -->
<!-- Bottom Part -->
<div class="wrapper">
<div class="content-area"></div>
</div>
<!-- Footer -->
<div class="header">
<div class="wrapper">
<div class="footer-area"></div>
</div>
</div>
</body>
</html>
The CSSTablet :
I attached the images needed for the layout. Please help!
First you add the view port element to Head of the HTML page.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ref. link - https://www.w3schools.com/css/css_rwd_viewport.asp
Then Remove fixed width's from .menu and .nav-bar classes and add as max-width.
.menu {
background-color: grey;
max-width: 1200px;
height: 50px;
margin-top: 20px;
}
.nav-bar {
background-color: lightgray;
max-width: 1200px;
height: 340px;
margin-top: 20px;
}
And also you need to wrap your "Product slots" using "div".
(I used class called "wrapper-inner")
<!-- Product Grid -->
<div class="wrapper">
<div class="wrapper-inner">
<div class="def1">
<div class="product1"></div>
</div>
<div class="def2">
<div class="product2"></div>
</div>
<div class="def3">
<div class="product3"></div>
</div>
<div class="def4">
<div class="product4"></div>
</div>
<div class="clear"></div>
</div>
</div>
<!-- -->
Then after you can add required CSS media queries.
/* Responsive */
#media all and (max-width: 1199px) {
.wrapper-inner {
margin: 0 -20px;
background: orange;
padding: 0 20px;
}
.def1, .def2, .def3, .def4 {
width: 50%;
padding: 20px;
float: left;
}
.product1, .product2, .product3, .product4 {
width: 100%;
margin: 0 0;
}
}
#media all and (max-width: 768px) {
.def1, .def2, .def3, .def4 {
width: 100%;
padding: 20px;
float: left;
}
}
You are correct in using media queries. In those you can f.e. set the width of your elements like this:
#media screen and (max-width: 1199) {
.product { // you can write .product1, .product2,... but I would suggest creating this new class, as none of those images really need their own css
max-width: 25%; //this will change for tablet and mobile to 50% and 100%
}
}
Now do that for all modes that you want.
Also note that instead of setting a margin-right you could use flexbox with justify-content: space-between in the wrapper; Otherwise you will have to remove those margins for different screen sizes.
I have divs that i want to wrap to the next line when the browser window gets smaller. I also want margin to be put in between the divs so that there's a gap between them. The problem I'm having is that the margin on the centre divs causes the divs to wrap incorrectly if the browser is set to a specific size. At a certain size you have 2 divs underneath one div. See my screenshot below as an example and this fiddle: http://jsfiddle.net/uhh2jwe2/ (change the width of the window)
This really needs to be dynamic as it will be a framework solution for laying out differently sized divs. The parent div will be fluid similar to the example. Any help would be great
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
.inner1 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner2 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner3 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
<div id="outer">
<div class="inner1">1</div>
<div class="inner2">2</div>
<div class="inner3">3</div>
</div>
You can use media queries to alter the css on smaller screen.
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
.inner1 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner2 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner3 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
#media (max-width: 435px) {
#outer > div {
margin-right:auto;
margin-left:auto;
margin-bottom:15px;
float:none;
}
}
<div id="outer">
<div class="inner1">1</div>
<div class="inner2">2</div>
<div class="inner3">3</div>
</div>
Use Media query like this:
#outer div:last-child {
margin-bottom: 0;
}
#media screen and (max-width:570px) {
.inner1, .inner2, .inner3 {
margin-bottom: 5px;
}
}
#media screen and (max-width:411px) {
.inner1, .inner2, .inner3 {
float: none;
margin: auto;
margin-bottom: 5px;
}
}
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
.inner1 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner2 {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
.inner3 {
float: left;
width: 150px;
height: 150px;
background-color: blue;
}
#outer div:last-child {
margin-bottom: 0;
}
#media screen and (max-width:570px) {
.inner1, .inner2, .inner3 {
margin-bottom: 5px;
}
}
#media screen and (max-width:411px) {
.inner1, .inner2, .inner3 {
float: none;
margin: auto;
margin-bottom: 5px;
}
}
<div id="outer">
<div class="inner1">1</div>
<div class="inner2">2</div>
<div class="inner3">3</div>
</div>
I would recommend a solution that extracts the grid-elements from the content-elements. Therefore you have a lot more control about your layout and you can be more flexible with content you want to place into it.
Use your .inner elements as grid-elements and wrap content inside them into .inner-content
Wrap all inners into a row to get rid of the outer-gutter
Give the .inner elements a percentage-width and a px-max-width. So the elments can take alwyay 33.33% of the avaiable width but never more then 150px.
I added some adjustments for small screens, so the .inner elements wrap below each other and take more then 33.33% of the .outer container width.
Inspect the code: http://jsfiddle.net/uhh2jwe2/5/
* {
box-sizing: border-box;
}
/* flexible outer container */
.outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: hidden;
background-color: red;
}
/* remove outer gutter */
.row {
margin: 0 -10px;
}
/* .inner will take care of the width */
.inner {
width: 33.33%;
max-width: 150px;
float: left;
padding: 0 10px;
}
/* .inner-content take care of the height */
.inner-content {
height: 150px;
color: #fff;
background: blue;
}
#media (max-width: 435px) {
/* this wraps .inner elements below each other and extends width */
.outer .inner {
padding: 10px 0;
width: 100%;
max-width: 100%;
float:none;
}
}
<div class="outer">
<div class="row">
<div class="inner">
<div class="inner-content">1</div>
</div>
<div class="inner">
<div class="inner-content">2</div>
</div>
<div class="inner">
<div class="inner-content">3</div>
</div>
</div>
</div>
I would suggest to use bootstrap's technique for that. Have padding on both sides of your inner elements, and negate it with negative margin on the container.
This will require more markup tough. While .row and .container could be merge on the same element, the background-color would overflow to the left because of the negative margin.
.container {
background-color: green;
width: 510px;
}
.row {
font-size: 0;
margin: 0 -15px;
}
.block {
font-size: 12px;
padding: 0 15px;
display: inline-block;
}
.content {
width: 150px;
height: 150px;
background-color: red;
}
<div class="container">
<div class="row">
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
<div class="block">
<div class="content">
</div>
</div>
</div>
</div>
in your example, the first two divs are 170px wide (150+20), and the third is 150px wide because it doesn't have a margin, thats the problem.
avoid #media if you mant it to be fully responsive and not jumping from 4 items a line to 1 item a linefor example.
you can solve your issue by simply adding a margin-right:20 to your last element, but it is better to to like so :
.inner1, .inner2, .inner3{
float: left;
width: 150px;
height: 150px;
margin: 2px 10px; //left & right sides to half of 20px
background-color: blue;
}
because it will split the margin to the two sides, making it more symetrical.
For laying out differently sized divs.
if all your divs can change size but stay equal, it will work, but if the first div is 70 and the 2nd and 3rd are 50, there will always be two divs on the bottom line at some point.
I think I've found the simplest solution to what I'm trying to do without having to use media queries. I simply added the right margin to all fields including the last field rather than adding it to every field except the final field.
I then wrap all the fields in another div and add a minus margin (the same size as the gaps) so that the fields will wrap when they hit the side of the container. Here's a fiddle with the solution: http://jsfiddle.net/rahg1ky3/
#outer {
width: 90%;
height: 90%;
margin: 5%;
overflow: auto;
background-color: red;
}
#inner {
margin-right: -20px;
}
.cont {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
background-color: blue;
}
<div id="outer">
<div id = "inner">
<div class="cont">1</div>
<div class="cont">2</div>
<div class="cont">3</div>
</div>
</div>
When I resize the browser, the images overlap with the video, and I don't want the to overlap. I want them to stay in position when I resize the browser.
iframe {
display: block;
margin: 0 auto;
margin-top: 60px;
}
.png1 img {
display: inline-block;
max-width: 100%;
height: auto;
margin: -430px 210px 850px;
}
.png2 img{
display: inline-block;
max-width: 100%;
height: auto;
float: right;
position: relative;
top: -85.100em;
right: 150px;
}
<div class="video">
<iframe width="600" height="415" src="https://www.youtube.com/embed/c9Qg7vm0lSk" frameborder="0" fullscreen></iframe>
</div>
<div class="png1">
<img src="https://s3.amazonaws.com/gameartpartnersimagehost/wp-content/uploads/2016/03/Adventure-Boy-Featured-Game-Art.png">
</div>
<div class="png2">
<img src="http://gameartpartnersimagehost.s3.amazonaws.com/wp-content/uploads/2016/07/royalty-free-game-art-commando-thumbnail0003.png">
</div>
You should learn Media queries as well, it will be helpful. Resize window to see the image move down.
Desktop
Mobile
.col {
color: #fff;
float: left;
margin: 2%;
width: 46%;
}
.one {
background-color: none;
}
.two {
background-color: none;
}
#media screen and (max-width: 600px) {
.col {
float: none;
margin: 0;
width: 100%;
}
}
iframe {
display: block;
margin: 0 auto;
margin-top: 60px;
}
<div id="container">
<div class="row">
<div class="video">
<iframe width="600" height="415" src="https://www.youtube.com/embed/c9Qg7vm0lSk" frameborder="0" fullscreen></iframe>
</div>
<div class="col one">
<img src="https://s3.amazonaws.com/gameartpartnersimagehost/wp-content/uploads/2016/03/Adventure-Boy-Featured-Game-Art.png">
</div>
<div class="col two">
<img src="http://gameartpartnersimagehost.s3.amazonaws.com/wp-content/uploads/2016/07/royalty-free-game-art-commando-thumbnail0003.png">
</div>
</div>
</div>
Because for .png1 img you are using margin as negetive values and for .png2 img you are using top value relativly to that image.Try removing those properties , you will get line by line
iframe {
display: block;
margin: 0 auto;
margin-top: 60px;
max-width: 100%;
}
.video,.png2,.png1 {
float: left;
width: 33%;
}
.png1 img {
max-width: 100%;
height: auto;
}
.png2 img{
display: inline-block;
max-width: 100%;
height: auto;
}
I have this code:
#media screen and (max-width: 600px) {
.col {
max-width: 150px;
}
}
.wrapper {
max-width: 500px;
margin: 0 auto;
background: grey;
font-size: 0;
}
.col {
width: 200px;
margin-right: 100px;
display: inline-block;
}
.col:last-child {
margin-right: 0px;
}
img {
max-width: 100%;
}
<section class="wrapper clearfix">
<section class="col">
<img src="http://placehold.it/200x120" alt="">
</section>
<section class="col">
<img src="http://placehold.it/200x120" alt="">
</section>
</section>
DEMO
The container won't wrap around its elements when media query gets activated. The same thing happens with floated children (which is normal, I guess).
Demo
one option is to add an "inner" wrapper; just a wrapper within your wrapper. you can make it display inline-block and set text-align center on the parent wrapper. Finally, remove the grey background from the wrapper and apply to the inner wrapper.
just one drawback is that when you make the window really small the .col divs are not lined up on the left. not sure if that's an issue for you
html
<section class="wrapper clearfix">
<div class='inner-wrap'>
<section class="col">
<img src="http://placehold.it/200x120" alt="">
</section>
<section class="col">
<img src="http://placehold.it/200x120" alt="">
</section>
</div>
</section>
css
#media screen and (max-width: 600px) {
.col {
max-width: 150px;
}
}
.inner-wrap {
display: inline-block;
background: grey;
}
.wrapper {
text-align: center;
max-width: 500px;
margin: 0 auto;
font-size: 0;
}
.col {
width: 200px;
margin-right: 100px;
display: inline-block;
}
.col:last-child {
margin-right: 0px;
}
img {
max-width: 100%;
}