I am trying to create fluid and flexible "tiles" for a website, that span across 100% of the viewport of the browser. However, I would like them to scale a bit if needed to eliminate all white space if a the next tile doesn't fit.
A normal div tag with a min-width & min-height of 200px, set to "display: inline-block" gets me most of the way. As I expand the browser window, the boxes will move up to the top line if there is room for another.
My problem is when there isn't room for the next div, there is whitespace on the right. Instead of that, I want each div to 'scale up' to fix the full width of the line.
So if the browser was set to 675px, instead of having 3 divs at 200px, there would be 3 at 225px. But if you then resize the browser to 800px, then there would be 4 divs of 200px.
Sorry if that is hard to understand. Essentially, I am trying to mimic how http://pulse.me displays their articles.
I would like to do this in pure CSS if at all possible, but I suspect for the window resize at least, some javascript will be needed. Any thoughts?
For a pure-CSS approach, you can use media queries combined with percentage widths:
.tile {
/* 4 tiles per row */
width: 25%;
}
#media (max-width: 500px) {
.tile {
/* 3 tiles per row */
width: 33.33333333332%
}
}
#media (max-width: 300px) {
.tile {
/* 2 tiles per row */
width: 50%
}
}
Here's a fiddle that demonstrates this: http://jsfiddle.net/bDBMP/1/
Related
I'm using bootstrap and I made a nice website. At the end I wanted to center it and make some ad space on the sides, so I used this:
#wrap {
width: 1200px;
margin: 0 auto;
}
My website was fully mobile responsive, the navbar turned into a buttton and the post gradually got more stacked as opposed to being in a grid (it's sort of like a news/magazine type of thing)
How would I go about centering it while keeping it responsive, to make it look better/make ad space on the sides?
Try width 100% and height 100% instead of fixed pixels
You may want to use max-width as by using width you are stating that it is always 1200px wide (regardless of the device width).
The max-width property is used to set the maximum width of a given
element. It prevents the used value of the width property from
becoming larger than the value specified for max-width.
If you put fixed pixels, this size won't vary when the screen size shrinks. You can try adding media queries that change that fixed width. For example:
//for screens smaller than 600px, adapt the width to the full width of the screen
#media only screen and (max-width: 600px) {
#wrap {
width: 100%;
}
}
Try giving % instead of using px to width.
#wrap { width: 90%; margin: 0 auto; }
I am trying to group two buttons together.
I have a design that works on big screens, with two buttons floating to the right on the same line. However when resizing, there is one button that will get onto the text :
The requirements are :
the buttons are on the right of the text when the screen is big enough (works fine)
the buttons get on top of each other (instead of next to each other like in the screenshot) when the screen gets smaller. They also should have the same width in this case.
Sure, you just need to use media queries in CSS.
In your media query you can define min-width or max-width. Min-width lets you say that at x screen width and larger, follow this set of styles. Max-width is at x screen width and smaller. Best practice is to use min-width and style your site for smaller screens first and then apply more complex styles on top of that with media queries. However if you just need it for one element, it's okay to work down:
#media screen and (max-width: 768px) {
.button-container {
float: none;
display: block;
}
.button {
width: 200px;
display: block;
}
}
How can I prevent the width of a div from expanding beyond a percent AND a pixel? In other words, the browser should calculate the pixel value of the percent, and then choose the lower of the two values.
If I were to set them both like this: {max-width:100px;max-width:20%;} the asset pipeline would simply choose the second one and ignore the first one.
width:20%;
max-width:100px;
This sets the width to 20% but caps it at 100 px.
One way to accomplish this is to simply use two divs
<div class="outer">
<div class="inner">
This content will not exceed 100px or 20% width.
</div>
</div>
<style>
.outer {
max-width: 90%;
}
.inner {
max-width: 100px;
}
</style>
This will NOT work with different image sizes/aspect ratios. You can define max-width and max-height separately, if you know the sizes of images. Use this method for a specific group of images, but not as a general rule.
Practical example: You have 5 photos from your phone to be placed in a page and you need some text to be in the other half of screen. You reduce the size of images to 500px wide and 300px high. You want them not to exceed half the screen and not be wider than 250px on tablet. Calculate the max height: 250*300/500=150px.
.img-class {
max-width: 50%;
}
#media (max-width: 800px) {
.img-class {
max-height: 150px;
}
}
Tested on latest Chrome, Firefox and IE.
You can now use css min. But you should note that IE does not support it.
width: min(20%, 100px)
https://developer.mozilla.org/en-US/docs/Web/CSS/min()
I had a specific problem which required a similar solution. I needed to display all images (independent of aspect-ratio, position or extra HTML markup) at their original size, up to a set maximum width in pixels. If the screen is smaller than this fixed size, it should shrink to fit. I.e. setting a width would not satisfy the requirements.
To expand on #Kiaurutis' answer:
img {
max-width: 400px;
}
#media (max-width: 400px) {
img {
max-width: 100%;
}
}
A working example can be seen here: https://jsfiddle.net/vrehxmpx/. In this example there is an image greater than 400px (always scaled down) and an image smaller than the threshold (only scaled down when the screen is smaller than the image).
To adjust for margins, borders and other stuff you might have on the image, just increase the #media's max-width.
Don't do this.
I believe the selected answer is correct for the scenario that the OP describes. However, some of the comments argue that the OP has asked to set the max-width property to the lower of the two values, not the width. This also can be done, please see below.
Note: This solution does not make a lot of sense to me. Please use the selected answer, it correctly demonstrates what max-width was made for. The code below will ensure that the max-width property is the lesser of 20% or 100px.
img {
max-width: 20%;
}
#media (min-width: 500px){ /* at 500 pixels, 20% of the width will be 100px */
img {
max-width: 100px;
}
}
I had the same width "page wrap" on my site. I wanted it to be 95% width by default but not more than 1280px. here is how I made it with CSS
.wrap{max-width:95%;margin:0px auto;}
#media screen and (max-device-width:1280px),screen and (max-width:1280px){.wrap{max-width:1280px;margin:0px auto;}}
I have a page where my content looks great when shifted slightly to the left via the padding tag (%) in CSS. However, when I decrease the window size down to a more "mobile" size, the content (text) is still slightly to the left. I'd like it to be perfectly centered with a desired amount of padding, after a certain min-width occurs.
Use media queries to give the desired effect.
#media (max-width: 480px) {
div {
text-align: center;
padding: 5%;
}
}
I am creating a website with a responsive layout.
I have two columns: Sidebar and Content.
The sidebar has 20% width and has a fixed position whereas the Content has 80% width with static position.
How do I stop the content from hiding under the Sidebar when the screen size is reduced?
overflow:hidden
Try adding that
you can do this with media queries
#media (max-width: 800px) {
#sidebar {
display: none;
}
}
When you make something fixed, it's taken out of the document flow. As such, the content should be hiding underneath the sidebar irrespective of whether the two columns widths are set to 20% and 80%.
You can see that here: http://jsbin.com/OQOSEZoF/3/edit (the words '80%' don't show).
So you will probably need to set padding-left: 20% on the content <div> anyway. That may solve your problem on it's own.
If however, if you have other content down the page, such as a footer that is being overlapped by the fixed div, you could use media queries to change styles depending on the screen size.
#media only screen and (max-width : 500px) {
#sidebar {
position: static;
}
#content {
padding-left: 0;
}
}
See the demo here: http://jsbin.com/OQOSEZoF/6/edit
When you resize the result to less than 500 pixels, the text in the footer becomes visible because the sidebar switches to static.