I am trying to create a layout where each DIV has a max-width of 300px.
If the screen is 600px then two 100% divs should be placed next to each other.
If the screen is 700px then three 233px (each DIV 100%) should be placed next to each other.
This means that the DIVs should always take up 100% of the screen width.
I would also like to have a min-width (such as 150px) so that each DIV cannot be smaller than a certain amount.
This means that on a small screen I might get two columns with DIVs and on a large scren I might get four or more columns with DIVs.
In this example you would have 4 columns when screen is larger than 900px, and it would go down to 3 columns when screen hits 900px, then 2 columns when the screen hits 600px, and one columns when it hits 300px. This will keep divs taking up 100% of screen and maximum width will always be 300px (except for screens larger than 1200px wide, where you will still get 4 columns)
div {
width: 25%; /* anything above 900px and there will be 4 columns */
min-width: 150px;
float: left;
height: 200px;
}
#media screen and (max-width: 900px) {
div { width: 33%; }
}
#media screen and (max-width: 600px) {
div { width: 50%; }
}
#media screen and (max-width: 300px) {
div { width: 100%; }
}
This can be modified to have any number of columns and any number of different threshold screen sizes where number of columns will change.
If you have borders or margins you will also have to make the width %s slightly smaller.
div
{
width:33.3333%;
min-width:150px;
max-width:300px;
display:inline-block;
background:#EFEFEF;
border:1px solid #CCC;
height:100px;
}
I haven't tested it (today) but I think this will work until the minimum size is reached.
Related
I am using the bootstrap container to meet my requirements. The container fit perfectly on the large screen as I want. But my requirement is the fill the container on the medium screen and small screen
The container is full width on the small screen, but however for medium screen the width is same as large screen.
My variables for screens
$xsBreakpoint: 0px;
$smBreakpoint: 576px;
$mdBreakpoint: 768px;
$lgBreakpoint: 1024px;
$xlBreakpoint: 1200px;
Container css to take full height
.container {
padding: 0px 0 !important;
}
Html component using container
<div class="container">
<app-help-support-component></app-help-support-component>
</div>
Screenshot on a large screen which is perfect as I required
On the small screen as shown in the below the space should be removed and take the whole screen
I want to remove the space and the container should take whole width.
You need to add media query for make change in container width for medium devices (Device Width <= 1024px) as you required.
for make change in container width in medium devices you need to add the following media query code to you css:
#media (max-width: 1024px){
.container {
max-width: 100%;
}
}
Add this css for your container class:
#media (max-width: 1199px){
.container {
max-width: 100% !important;
padding: 0 !important;
}
}
I'd like to have a div be 80% of its container's width, when that width is 1000px or greater.
I'd like it to be 100% of my its container's width, when that width is 600px or smaller.
In the middle I'd like it to be, well, in the middle.
http://jsfiddle.net/ayjtr1q4/9/
div {
background: #def;
height: 100px;
margin: 0 auto;
}
#media screen and (min-width: 1000px) {
div {
width: 80%
}
}
#media screen and (min-width: 601px) and (max-width: 999px) {
div {
/* what goes in here? */
}
}
#media screen and (max-width: 600px) {
div {
width: 100%
}
}
<div>
As you resize the screen this snaps from 80% to 100%. I'd like to achieve a smooth transition between the two instead, so that if you set it to 800px wide you'll end up with a div that's 90% of that, i.e. 720px.
</div>
ContainerSize -> divSizeAs% (divSizeInPixels)
400px -> 100% (400px)
500px -> 100% (500px)
600px -> 100% (600px)
700px -> 95% (665px)
800px -> 90% (720px)
900px -> 85% (765px)
1000px -> 80% (800px)
1100px -> 80% (880px)
1200px -> 80% (960px)
Etc.
I know I could set a dozen media queries with breakpoints, but I'd rather it was a smooth transition, if possible.
I feel I could do something clever with calc, but am having a bit of a blank and can't quite get my head around what! But then I guess you'd need some max/min functionality, which I don't believe CSS has?
My middle-ground I've come up with so far is 3 media queries. One for >= 1000px (width:800%), one for <= 600px (width:100%) and one for in the middle... But even then I can't work out what my rules for the middle-ground should be?
You can do that with Calc. You are only concerned with the amount of space over 600px (100% - 600px), and the increment is the total space to smooth (400px). I'm not really a mathematician, maybe someone else (smarter) can give you a better equation.
#media screen and (min-width:1000px) and (max-width:600px){
#container{
width: calc(100% - ((100% - 600px) * 0.466));
}
}
Full code snippet:
#container{
background: red;
width: 800px;
height: 20px;
}
#media screen and (max-width:600px){
#container{
width: 100%;
}
}
#media screen and (max-width: 1000px) and (min-width: 600px) {
#container{
background: green;
width: calc(100% - ((100% - 600px) * 0.466));
}
}
<div id="container">
</div>
Here's a somewhat more elegant way to achieve what you're looking for, using only one breakpoint. Also, I recommend using em instead of px for your breakpoints.
div {
background: #def;
width: 100%;
height: 6.25em;
margin: 0 auto;
}
/* 37.5em = 600px */
#media (min-width: 37.5em) {
div {
background: #fed;
/* Replace .5 with whatever value
looks best in your layout */
width: calc(37.5em + ((100% - 37.5em) * .5));
}
}
<div>
As you resize the screen this snaps from 80% to 100%. I'd like to achieve a smooth transition between the two instead, so that if you set it to 800px wide you'll end up with a div that's 90% of that, i.e. 720px.
</div>
It does possible to adjust the width of a div as the width property of the browser is decreasing or increasing using pure Css?
I mean, if I have an element like this in a resolution:
div {
width: 20%;
}
Then, I want to increase 1% the width of the div for every 10px that I decrease the width browser, it's possible using just Css3?
Decreasing width as window is descreased is easy with CSS. Increasing width as window is decreasing is not.
Its possible to use a css only solution, but it will require a wild amount of #media queries:
JS Fiddle (using larger percentage for example)
#media only screen and (max-width: 400px) {
div {
width: 20%;
}
}
#media only screen and (max-width: 390px) {
div {
width: 21%;
}
}
#media only screen and (max-width: 380px) {
div {
width: 22%;
}
}
etc...
CSS doesn't have the logic built in to calculate the width of a viewport AND apply styles based on it without manually doing it with a media query. A js solution would definitely be recommended.
This also may help you a combination of the following code and use of calc() in CSS could help.
vw, vh
1vw = 1% of viewport width
1vh = 1% of viewport height
Let give it a try with your code.
I have a website with all content centered. The content has a width of 500px.
I'm only concerned about the content (the 500px) to be visible, how much of the gutter doesn't matter.
For desktop displays I have the following CSS rules:
margin: 0 auto;
width: 500px;
What should be applied so that the content area gets displayed in it's entirety on as many screen sizes as possible (i.e. as small as 320px)?
to support different screen sizes you should use percentage, not pixel. But in case you are more comfortable using fixed width (using pixel) you can use media queries to achieve that.
.container { //start with the smallest screen width
width: 300px;
margin: 0 auto;
}
#media screen and (min-width: 40em) { // 640px
.container {
width: 500px;
}
}
But I do recommend you to use percentage instead of pixel. Hope you find this useful.
What I am trying to do is, putting two divs in one line, the left div's width is fixed and the right one, gets resized when the browser is resized (achieved already). What I want to achieve is, set a resize limit for the right div, that is, the right div width decreases until the width is greater or equal to n px. after that the browser horizontal scroll.
(The reason for this is I have got a jquery tab on the right div with like 5 tabs, when I resize the browser the tabs jumps off on button of each other, hence I want to stop the right div to shrink until the last tab).
here is my code so far:
<div style="float: left; width: 300px; margin-right: 10px; ">
</div>
<div style="overflow: hidden;">
</div>
Please let me know if there is a better way of putting two div in one line (left width fixed and right resizable with limit).
Cheers,
You'll either be looking at min-width/max-width, or #media
For min-width just give a class or id to div2 and set min-width
#div2{
min-width:900px;
}
For control on different screen sizes use #media and set max/min widths.
#media only screen and (max-width: 499px) {
/* rules that only apply for canvases narrower than 500px */
}
#media only screen and (min-width: 500px) {
/* rules that only apply for canvases wider than 500px */
}
There's more information here: https://mislav.net/2010/04/targeted-css/
Try:
<div class='left'></div>
<div class='right'></div>
<styles>
.left {
float: left;
margin-right: 10px;
width: 300px;
}
.right {
float: left;
max-width: 300px;
overflow-x: auto;
}
</styles>