I'm trying to create a tile layout / grid box layout with dynamic sizing images. The Idea is to create this: http://i.imgur.com/ypmk6yR.jpg
But the size of the box needs to change depending on the width or height of the browser. Even better would be when the boxes also get less per row if the browser is too short in width. A full row of boxes/images should always be the full width of the page. And each image is square.
Someone created this
http://codepen.io/davidkpiano/pen/EaxjBj
With SASS, but I have no clue how to work with SASS but thought it could be achieved without SASS.
This is what I was playing around with but I never got It really working
.img_left {
float: left;
padding-bottom: 500px;
}
.img_left img {
width: 19.82vw;
height: 19.82vw;
}
.img_work img {
width: 19.82vw;
height: 19.82vw;
float: left;
}
.img_left is my div for the very first picture.
Is there a good solution to my problem?
The codepen script you posted is realy simple. Let me "decode" Sass for you, it might be what you looking for:
* {
box-sizing: border-box;
position: relative;
}
.tile {
float:left;
width: 25%;
padding: 25% 0 0 0;
height: 0;
overflow: hidden;
transition: 0.3s all ease-in-out;
}
.tile > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
// Make sure rows are flush
.tile:nth-child(4n + 1) {
clear: left;
}
// Small screens
#media (max-width: 768px) {
.tile {
width: 50%;
padding: 50% 0 0 0;
}
.tile:nth-child(2n + 1) {
clear: left;
}
}
Here is a good SASS to CSS converter for you to use in the future. At least until you become more familar with SASS.
http://sassmeister.com/
Related
When running my login page on IE 11 with a screen size of less than 700px, the site looks like this:
The space on the right hand side that causes scrollbars that should not exist. I usually would assume that there is something overflowing, but I don't see any content that would cause this behaviour.
Here is a rundown of the page's code:
https://codepen.io/bitz/full/brayEb/
I was thinking that it has something to do with the way I set the width:
html {
height: 100%;
width: 100%;
margin: 0;
background: rgb(90, 103, 113);
font-family: Arial !important;
font-size: 12px !important;
}
But I tried changing it a bit to no effect.
Try to take this off from your CSS
#media only screen and (max-width: 1000px) {
body#login-body
{
background-size: contain;
}
}
Turns out IE does not like transform css at all, so I opted to center the objects in a different way, as outlined here.
Basically:
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: /*whatever width you want*/;
}
Instead of the system that was used in the codepen.
I am working on a responsive website, and am having problems with Media Queries.
I have 2 div's, side by side set at 50% width, with float: left and float: right assigned to them respectively. On resize, I wish to remove these floats and display the divs width at 100%.
This is not working however.
Here's my code;
#media only screen and (max-width: 700px) {
#block-half-left, #block-half-right {
float: none;
width: 100%;
}
}
#block-full {
width: 100%;
height: 200px;
background-color: #fff;
margin-right: auto;
margin-left: auto;
}
#block-half-left {
width: 50%;
height: 200px;
background-color: gray;
float: left;
}
#block-half-right {
width: 50%;
height: 200px;
background-color: green;
float: right;
}
The problem is not in the code itself, but its order of appearance.
First of all: You should avoid using !important to fix problems like this, since it is usually just a matter of being more specific on where the styling points.
In this case, however your Media Query is stated first, and after that you're stating the "other" part. CSS (like most languages) is read from top to bottom. If you just move your Media Query to the bottom of your CSS, your problem should be solved.
Specificity is important in CSS.
The simplest way to increase the specificity of your non-floating blocks are to move the rules to the bottom.
E.g:
#block-half-left {
width: 50%;
height: 200px;
background-color: gray;
float: left;
}
#block-half-right {
width: 50%;
height: 200px;
background-color: green;
float: right;
}
#media only screen and (max-width: 700px) {
#block-half-left, #block-half-right {
float: none;
width: 100%;
}
}
More on specificity: https://developer.mozilla.org/en/docs/Web/CSS/Specificity
Furthermore, you'll have a much easier time dealing with specificity in CSS if you use classes, rather than IDs. I.e. .block rather than #block.
#content_2 {position:
absolute;
top: 13%;
left: -10px;
width: 100%;
height: 100%;
z-index: 1;}
#content_image_2 {float: left;
top: 13%;
background-color: #ffffff;
background-repeat: no-repeat;
width: 70%;
max-width: 70%;
height: 30%;
max-height: 30%;
border-radius: 10px;
white-space: nowrap;}
#content_image_2 img{float: right;
min-height: 40%;
max-height: 40%;
width: auto;}
So i have these images inside a div. They are set to float right.
When i shrink the screen they wrap and readjust their position inside the div. Prefect! that is what i want, but when it gets too small the float images pop out of the div. I want to just not show up if the div is too small, but when i use overflow: hidden, the pages goes crazy and the floats don't work at all.
Does anyone know a way around this? or maybe another way to make this happen?
If you want to hide the images if the div is too small you can use a media query.
#media screen and (max-width: 320px) {
#content_image_2 img{
display: none;
}
}
Let's suppose your div has an id, let's say, it is my-div. Whenever it is small, you want to hide the images inside it:
#my-div.small img {
display: none;
}
Now, let's see how can we add/remove the small class:
function addClass(id, class) {
var element = document.getElementById(id);
if (!!element) {
//prevent duplication of class name
removeClass(id, class);
element.className += " " + class;
}
}
function removeClass(id, class) {
var element = document.getElementById(id);
if (!!element) {
document.getElementById(id).className = document.getElementById(id).className.replace(/\bMyClass\b/,'');
}
}
At the appropriate places check the width and height of the div and if it becomes small, add the small class, otherwise, remove it.
Well I just turned the table into another div, and all the sizing / overflow css works. I knew I shouldn't have used a table :/
//sorry for the bad formating, i am on my phone...
When someone asks how to center a page, then the response is like:
margin-left:50%;
left:(-1/2 width);
I used this code on a site with a width of 1000px,so it comes to screens, where this site does not fit.
Now the site gets centered on the smaller screen and gets equaly pushet to left and right.
So lets say, our screen is 600px wide:
200px are left
600px are on screen
200px are right
You can scroll to the right, but the pixels on the left are unreachable...
How can i solve this to control, how much of my site gets dragged to the left in case of smaller screens?
This is especially important for mobile phones...
If you are worried about different screen sizes then I highly suggest using Media Queries but this is also a useful way of setting up centered elements. Just use a % width instead of a set width and followed by margin: 0 auto;
Look at fiddle for visual aid. (If this answer does not suit your needs at all then I'll gladly remove it)
div {
margin: 0 auto;
width: 80%;
height: 500px;
background: mediumSeaGreen;
}
JSFIDDLE
Your best bet (Ignore the CSS it's from my portfolio.
.subMenu {
display: none;
float: none;
width: 100%;
background: rgba(254, 126, 1, 0.5);
border-bottom: 5px solid rgba(0, 0, 0, 0.6);
font-size: 20px;
padding-left: 60%;
position: relative;
left: 0;
top: 3.85em;
list-style-type: none;
padding: 1.5em 0;
margin: 0;
overflow: hidden;
}
#media only screen and (max-width: 680px) {
.subMenu {
top: 4.9em;
font-size: 10px;
min-height: 100% !important;
padding: 0;
background: rgba(0, 0, 0, 0.5);
}
}
You can also use jQuery to dynamically find the width.
var width = $('div').width();
$('div').text(width);
You could try using margin: auto
http://jsfiddle.net/56N9w/
As you see there if you make the window too small for the content to fit it will left align by default
Use this:
margin: 0 auto;
width: 400px;
alternative:
margin: 0 auto;
width: 50%;
another alternative:
#outer-div {
margin: 0 auto;
width: 50%;
}
#inner div {
/* insert any CSS you want here */
}
NOTE 1: When using margin: 0 auto, you need to define the width otherwise it won't center.
NOTE 2: You should really put it inside another box, or make the page width 100% (or a width larger than the box).
NOTE 3: You can't center vertically with margin: auto auto. This simply won't work. See below for the solution to this:
Centered box both horizontally and vertically:
Working in jsbin:
http://jsbin.com/OSUViFi/1/
The code (same as the jsbin above):
page.html
<div id="outer-container">
<div id="inner-container">
<div id="centered-box">
</div>
</div>
</div>
style.css
#outer-container {
width: 100%;
height: 100%;
display: table;
position:absolute;
overflow: hidden;
}
#inner-container {
display: table-cell;
vertical-align: middle;
}
#centered-box {
margin: 0 auto;
height: 400px;
width: 400px;
background: #000;
}
Specific for your needs (not including vertical alignment which it looks like you don't need):
jsbin example:
http://jsbin.com/axEZOTo/2
The code (same as the jsbin above):
page.html
<div id="container">
<div id="centered-box">
</div>
</div>
style.css
#container {
width: 1000px;
margin: 0 auto;
height: 100%;
background: #999;
}
#centered-box {
max-width: 70%;
min-width: 200px;
height: 500px;
margin: 0 auto;
background: #000;
}
Here, the smallest it can go is 200px, this number you can change to the smallest amount that you want to allow your box to have.
NOTE:
I finally figured out what you were trying to say in your question, which was poorly worded.
You only used 600px as an example, but you really just want to have it be a fluid layout that changes with screen size.
http://jsfiddle.net/Rncu6/
The green div has a max-width attribute, and it should shrink when the screen shrinks.
Instead, what happens is that the green div falls off to another line. If I try to remove the float:left on the green div, it suddenly overlaps with the yellow div, which is not what I want.
How do I fix this?
This seems like a really frustrating issue. The best way I can think to solve it is to remove float:left from p and replace it with display: table-cell.
p {
display: table-cell; /* replaces float:left */
max-width: 300px;
background-color: lightgreen;
height: 200px;
}
The only problem with this approach is that it will render all the margin attributes useless. To work around that, you can just add the inverse of those margin attributes to #img1. For example:
p { margin-left: 10px; }
Would be replaced with:
#img1 { margin-right: 10px; }
JS Fiddle Example
Caveat: I don't know how small you want your minimum width to become, but you'll notice that at a certain point the p will still move onto the next line. This is because it is becoming too small for individual words (e.g. longer words like "paragraph") to fit on one line. To work around that, you can use the word-break:break-all; attribute.
p { word-break: break-all }
That way, the width of p will continue to shrink until the width can no longer fit individual characters on one line.
JS Fiddle Example
Give width in percentages
#img1 {
background-color: yellow;
width: 20%;
height: 100px;
float: left;
}
p {
float:left;
margin-top: 0;
max-width: 50%;
background-color: lightgreen;
margin-left: 10px;
height: 200px;
}
http://jsfiddle.net/Rncu6/11/
The overlapping occurs because the size of the DOM is becomes larger than the browser so it gets pushed below the img div. As already mentioned you can use % to compensate for that. Although, if you want to absolutely define the divs in pixels until the browser can't display them any more.
To expand upon the current answer you could use Media queries...
#img1 {
background-color: yellow;
width: 100px;
height: 100px;
float: left;
}
p {
margin-top: 0;
float: left;
max-width: 300px;
background-color: lightgreen;
margin-left: 10px;
height: 200px;
}
p:after {
content: " ";
display: block;
height: 0;
clear: both;
}
#media screen and (max-width: 450px) {
#img1 {
width: 20%;
}
p {
max-width: 50%;
}
}
And here's the jsfiddle - http://jsfiddle.net/SxLCJ/