Centered layout not responsive - css

I am developing a website with a centered layout, i.e. a 3 column grid with the websites content in the middle column (50%) and a 25% empty columns to the left an right.
So far, it looks pretty good in a full-sized browser. However, if I reduce the browser window's size (or use a mobile viewport) the 25% columns remain to use space. Is there a possibility by which in smaller environments the 25% columns gradually reduce their size to zero?
Or is the grid-approach bad?

Try #media (Mozilla CSS - media).
#media (min-width: 576px) {
.col1 {...}
.col2 {...}
.col3 {...}
}
#media (min-width: 768px) {
.col1 {...}
.col2 {...}
.col3 {...}
}

Related

Bootstrap container to take full screen on Medium device and small device but half on large device

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;
}
}

How to grow the width of a div as the width screen decreases using Css?

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.

Add horizontal scroll bar when screen size is less than 768px

I'm using Bootstrap for responsive design. But I want to use it for minimum 768px (col-sm-*) width.
I have a bunch of elements with .col-* classes, the problem is that when I resize the window to less than 768px, the whole design breaks down.
How to limit the website's width 768px, and show horizontal scrollbar on smaller window sizes?
For example, I use this dummy method, but of course, it doesn't help:
#media screen and (min-width: 0) and (max-width: 768px) {
...
}
It will display a scrollbar, if width parameter is true.
#media screen and (min-width: 0) and (max-width: 991px) {
overflow: auto;
}
If you want to display the scrollbar try to add this in your css
#media screen and (min-width: 0) and (max-width: 991px) {
overflow-x : scroll;
}

Can I have several fixed width layouts on one page?

Ok, I know how to build fixed width as well as fluid and adaptive layouts.
I just wonder if I can accomplish this:
- Have fixed width layout for example 960px
- Which falls down to another fixed width layout, let's say 640px, if screen get's smaller than 960px. Thanks!
You have the ans in media queries, use this:
#media all and (min-width: 960px) {
#content {
width: 960px;
}
}
#media all and (max-width: 959px) {
#content {
width: 640px;
}
}
The fiddle is here: http://jsfiddle.net/piyushkmr/V4Q2m/1/

DIV with max-width and min-width to evenly spread

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.

Resources