In my local server the product boxes fill the full width of the page as they are set to a complete value of 100%. And the borders are showing nicely..
But on my live test site its not filling 100% and leaving a gap on the far right. aswell as the borders between the products disappearing...
It seems that the hover effect is sitting at the right width as it is overflowing on the right of the product image.(attached image)
Live site here: http://pagedev.co.uk/hoppings/products/
This is the CSS for each product box:
.grid-wrapper {
width:100%;
height:auto;
margin:0px auto;
}
.grid-wrapper img{
width:99.8%;
height:auto;
}
.grid-item {
width:20%;
margin-right:-6px;
margin-bottom:0px;
display:inline-block;
vertical-align:top;
border:1px solid #cfd0d1;
border-top:0px solid #cfd0d1;
background-color:#ffffff;
#media #{$l-desktop} {
width:25%;
margin-right:-6px;
}
#media #{$desktop} {
width:33.2%;
margin-right:-5px;
}
#media #{$mobile} {
width:50%;
margin-right:-5px;
}
}
.image-hovers {
width:100%;
height:auto;
position:relative;
}
.product-hover{
position:absolute;
visibility: hidden;
opacity: 0;
width:100%;
height:100%;
top:0px;
margin:0 auto; left:0px;
z-index:100;
background-image: url("../images/plus.svg");
background-repeat:no-repeat;
background-position:center;
background-position:fixed;
background-size:55px 55px;
background-color:$red;
#include transition(0.5s);
}
I guess your server (or build process) is minifying the HTML (maybe with PageSpeed or similar module), thus removing spaces between the boxes, which your CSS relied on. You seem to use the negative margin to work around the spaces problem, but the real solution is: remove the spaces from your HTML and then you can also remove the negative margins from your CSS.
Remove the margin-right and set box-sizing to border-box:
.grid-wrapper {
width:100%;
height:auto;
margin:0px auto;
}
.grid-wrapper img {
width:99.8%;
height:auto;
}
.grid-item {
box-sizing: border-box;
width:20%;
/*margin-right:-6px;*/
margin-bottom:0px;
display:inline-block;
vertical-align:top;
border:1px solid #cfd0d1;
border-top:0px solid #cfd0d1;
background-color:#ffffff;
#media #{$l-desktop} {
width:25%;
/*margin-right:-6px;*/
}
#media #{$desktop} {
width:33.3333%; /*33.2 will leave space on the right.*/
/*margin-right:-5px;*/
}
#media #{$mobile} {
width:50%;
/*margin-right:-5px;*/
}
}
Try this .grid-item{box-sizing: border-box; margin-right: 0;}
#media (max-width: 1400px) {
.grid-item {margin-right:0;}
} /* put margin-right 0 here */
I can't comment yet. This is not an answer just a quick fix
try
.grid-wrapper {
width: 101%;
}
Related
Looking to fit 2 horizontal divs in a 100% repsonsive div. So the 2 internal divs will resize when the screen shrinks/increases.
<div class="mydownloads">
<div class="warrantybook"></div>
<div class="brochurebook"></div>
</div>
.mydownloads {
width:100%;
}
.warrantybook {
padding:10px;
float:left;
display: inline-block;
margin-left: auto;
margin-right: auto;
width:45%;
}
.brochurebook {
padding:10px;
float:right;
display: inline-block;
margin-left: auto;
margin-right: auto;
width:45%;
}
You want to set the full div to 100% and the 2 internal divs to 50% and remove all padding, border and margin. I would recommend setting a "min-width" in css to ensure there is always a minimum, I've seen a lot of sites look goofy without having a minimum width on certain things.
<div class="mydownloads">
<div class="warrantybook"></div>
<div class="brochurebook"></div>
</div>
.mydownloads {
width:100%;
}
.warrantybook {
padding:0;
margin:0;
border:0;
float:left;
width:50%;
background:red;
height:50px;
}
.brochurebook {
padding:0;
margin:0;
border:0;
float:right;
width:50%;
background:blue;
height:50px;
}
https://jsfiddle.net/gn6jabb9/
This can be done easily enough with floats or inline-blocks, though the clean 'new' way is with Flexbox. Assuming you don't need support for IE < 10:
.mydownloads {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start; /* Change this to 'stretch' if you also want full height */
}
.warrantybook,
.brochurebook {
flex-grow: 1;
height: 50px;
}
.warrantybook {
background:red;
}
.brochurebook {
background:blue;
}
https://jsfiddle.net/gn6jabb9/1/
I am trying to lay out a group of images in a table format with using div's. I have an image and then I want to put a Delete link underneath the image. But I can't get it to layout correctly. This is what I have:
<div class="container">
#foreach (var item in Model)
{
<div class="imagetiles">
<img src="#Url.Content(item.ImageURL)" alt="" width="30%" height="30%" />
<a>Delete</a>
</div>
}
</div>
My styles look like this, I copied it from the Fiddler mentioned in the comments below. The Fiddler works, but when I apply it, it doesn't work.
div.container {
width:100%;
}
div.imagetiles {
display:inline-block;
margin:10px;
}
div.imagetiles a {
display:block;
text-align:right;
width: 30%;
}
Below is how this renders. I want this to put the images next to each other with up to 3 per line. Why doesn't the Fiddler work for this here? Why is the imagetile div so big, I can't reduce it to fit the image?
If you want three per row, I would set the image container (not the main one) to be 33% and then make the width of each image to control the spacing around it (kind of like padding). Something like this:
div.container {
width:100%;
margin:0; /* make sure there is no padding or margin on container */
padding:0;
}
div.container div.imagetiles {
float:left;
width:33%;
padding:0;
}
div.container div.imagetiles img {
width: 95%;
margin: 10px;
}
div.imagetiles a {
display:block;
text-align:right;
width: 100%;
}
Demo: http://jsfiddle.net/Gd2V6/
If you are using something like LESS (recommend or SASS):
div.container {
width: 100%;
margin:0; padding:0;
div.imagetiles {
float:left;
width: 100%;
padding:0;
img {
width: 95%;
margin:10px;
}
a {
display:block;
text-align:right;
width: 100%; /* may need to tweak this */
}
}
}
There are small things we need to maintain when display is not defined.
Also we need to analyze the position: property of element that plays big role in this.
After adding the above I have added z-index to the element and that did it!!.
Have a look at this fiddle
CSS:
div.container {
display:block;
width:100%;
position:relative;
}
div.imagetiles {
display:inline-block;
margin:10px 5px;
float:left;
}
div.imagetiles img{
position:relative;
display:inline-block;
z-index:1;
}
div.imagetiles a {
height:25px;
width:50px;
position:relative;
display:inline-block;
float:right;
top:-25px;
left:-50px;
z-index:10;
}
your Implementation is all right. you just need to add width of imagetiles
like:
div.imagetiles {
display:inline-block;
width:30%;
margin:10px;
}
It will work like a charm :)
I have this example: http://jsfiddle.net/35Js5/7/
I want to be able to have my nice row of images split onto two lines when the browser window is below a certain width. The top row (.companylist) is what I have currently and the bottom row (.companylist2) is what I have tried (the display:inline-block method, to no avail).
Basically I need to be able to keep the HTML structure if possible and keep the vertical alignment of the images (they scale down if the box is too small for them).
CSS:
.col {
box-sizing:border-box;
display:inline-block;
float:left;
padding:10px 10px;
}
.col1 {
width:100%;
}
.col2 {
width:50%;
}
.col4 {
width:25%;
}
.col8 {
width:12.5%;
}
.companylist {
display:table;
table-layout:fixed;
}
.companylist .col {
display:table-cell;
height:200px;
vertical-align:middle;
float:none;
}
.companylist .col img {
max-height:100%;
max-width:100%;
}
.companylist2 {
display:inline-block;
}
.companylist2 .col {
display:inline-block;
height:200px;
vertical-align:middle;
float:none;
}
.companylist2 .col img {
max-height:100%;
max-width:100%;
}
#media screen and (max-width: 768px) {
.mindmap .cell > p {
font-size:1em;
}
.col8 {
width:25%;
}
.col4 {
width:50%;
}
.col2 {
width:100%;
}
}
Elements with display: table-cell will act like cells within a single table-row unless you change your markup.
To get the behaviour you describe, you could add a span that snaps from "display: inline" to "display: table-row" at your breakpoint.
Much messing about later:...
The answer is yes, if you have a fixed height for each cell and if you're willing to get around the white-space issue with a hack:
#media screen and (max-width: 768px) {
.col8 {
width:25%;
}
.companylist .col {
display:inline;
margin:0 0 0 -3px;
padding:0;
}
.companylist .col:first-child {
margin:0;
}
.companylist .col img {
display:inline-block;
max-height:200px;
max-width:25%;
vertical-align:middle;
}
}
Basically set the original "cell" to be display:inline;, add negative left margin to counteract the white space (make sure the first one doesn't have it), make the contents of the cell display:inline-block;
Not perfect, but a lot better...
I have this CSS for 2 divs:
#homepage-twitter {
width:28%;
height:500px;
overflow:hidden;
display:inline;
float:right;
}
#homepage-blog-posts {
width:70%;
height:500px;
display:inline;
float:left;
margin-right:10px;
border-right:1px solid black;
}
#media screen and (max-width: 1250px) {
#homepage-blog-posts {
width:100%;
border-right:0;
}
#homepage-twitter {
display:block;
width:100%;
border:1px solid #F36F25;
}
}
here is a fiddle with the full html and css code: http://jsfiddle.net/Gb8Fr/
if you make the screen as wide a possible, the divs are inline with each other but as the screen gets smaller (using media queries) the divs go one above the other but i can't keep the space in between them and they start to overlap each other
how can i stop them from doing this?
Remove the height: 500px from homepage-blog-posts or add overflow: hidden to it. You can remove it as part of the media query property if you need.
i am using this css:
body,html {
font-family:Arial;
margin:0;
padding:0;
width:100%;
height:100%;
background:#0C3;
}
.header {
min-height:80px;
width:100%;
margin:0 auto 0 auto;
border:1px solid black;
}
.container {
width:960px;
}
.logo {
float:left;
display:inline;
}
.menu {
width:300px;
float:right;
display:inline;
}
to display a header the width ofmy container div (960px) with a logo to the left of the header and menu to the right
here is a fiddle: http://jsfiddle.net/YxeTf/
but the header div is not displaying centre
Just add margin:auto; to .container to center a block element within its parent <div>.
Demo
.container {
width:960px;
margin:auto;
}
Give your header specific width - less than 960px
DEMO jsfiddle
try this code for header ---
.header {
min-height:80px;
width:700px;
margin:0px auto;
border:1px solid black;
}