I was wondering about a way to order divs according to screen orientation in mobile devices or window size in desktop computers. I have two div's and I was wondering if there's a way to modify their behavior depending on the distribution of the browser's available screen.
For instance when, they're in a horizontal position I want them to behave like this:
---------------- ----------------
| || |
| || |
| || |
| div1 || div2 |
| || |
| || |
| || |
---------------- -----------------
when they're in a vertical position, like this:
----------------
| |
| |
| |
| div1 |
| |
| |
| |
----------------
----------------
| |
| |
| |
| div2 |
| |
| |
| |
----------------
I'd love to hear your opinion.
Use the CSS media query!
It allows you to specify what CSS you want applied under certain conditions (in this case, changes in window dimensions).
Check out this link:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
What I would suggest is do all of your general styling at the top of your CSS file, then apply the media queries at the bottom. For your case, within each media query, you would specify the behavior/positioning you want for that specific scenario.
Sample Usage:
#media screen and (max-width: 980px) { ...css... }
The above statement means, for all resolutions UP TO 980px, apply this styling. If you do something like:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) { ...css... }
This will apply the given CSS for all resolutions from 320px up to 480px.
Similarly, only applying a min-width of XX will apply a given CSS for all resolutions XX and above.
Simply float them, if the screen is too narrow, they'll drop down appropriately.
div {
float:left;
}
If you wanted them stacked for mobile only. detect your mobile browser and append .mobile to your body, or load a mobile css file completely.
div {
float:left;
}
.mobile div {
clear:both;
}
Related
I'm trying to achieve following layout with HTML/CSS, where the navigation elements "A" and "C" are situated above the main content "B" on small screen and distributed corresponding to the left "A" and right "C" on larger screens.
My goal is to use constant HTML-elements and only change CSS-styles based on media-queries.
How to achieve this?
Mobile Desktop
(small screen) (large screen)
+-------------------+ +-----------------------------------+
| A | C | | A | B | C |
+-------------------+ +---------+ +---------+
| B | | |
| | | |
| | | |
| | | |
| | | |
| | | |
+-------------------+ +---------------+
HTML
<div>
<div>A</div>
<div>B</div>
<div>C</div>
</div>
I think flexbox would help here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Set a display: flex on the container div and play a bit with the alignment as described in the linked article.
Use media queries on css.
#media (max-width: 600px) {
//Display as u want the tables or divs for small devices
//Change width as desired
}
#media (min-width: 601px) {
//Display as u want the tables or divs for big devices or desktop
//Change width as desired
}
Using HTML and CSS only, we can't achieve this requirement. If you use bootstrap in your code. You can able to achieve.
In bootstrap, we have responsive utilities concept is there using that you can build your above requirement
For your reference
My desktop webpage has the following design:
---------------------
|elem1|elem2|tabs |
| | |-------|
| | |t1 | t2|
| | | |
---------------------
Tabs is a container provided by Bootstrap (http://getbootstrap.com/javascript/#tabs); t1 and t2 are some tabs inside that container.
Now I want to create a responsive design, so if the user switches to the mobile view the website should look the following (portrait mode):
-------------
|elem2 |
|-----------|
|tabs |
|-----------|
|elem1|t1|t2|
-------------
So basically I want that elem1 (left in the desktop) moves into my tab container and becomes a tab itself (or at least the content of a tab that is only visible in the mobile view). Is this even possible with a CSS-only solution?
First I thought about putting creating the elem1 twice and display the correct one depending on the screen size but I don't like that solution due to maintenance.
I have a page in which I have a structure of divs in an inline block. Now each of the block divs have a minimum size and when the window size reduces to a size smaller than the sum of all the inner divs minimum width, I move some of the elements to the next line. I would now like a padding to be added to the div which moves to the next line alone and I am not looking to use js to achieve this. How can I do this in just CSS?
<div width="100%">
<div style="display:inline-block; width=33%; max-width=300px; min-width=135px">
<div style="display:inline-block; width=33%; max-width=300px; min-width=135px">
<div style="display:inline-block; width=33%; max-width=300px; min-width=135px">
</div>
Rendering
------------------- ------------------- -------------------
| | | || |
| | | || |
| div1 | | div 2 || div 3 |
| | | || |
------------------- ------------------- -------------------
constrained space
------------------- -------------------
| | | |
| | | |
| div1 | | div 2 |
| | | |
------------------- -------------------
<^margin 5px inserted^>
-------------------
| |
| |
| div 3 |
| |
-------------------
You can use media queries to apply CSS rules based on the width of the viewport.
#media all and (max-width: _width_value_) {
/* When the screen size is less than or equal to _width_value_ the css rules here will apply */
}
Here's a jsfiddle offering a solution to your original question.
margin-bottom will do the trick, however, it'll be there even when all of the divs are on one line. There's no other way without the JavaScript imho:
.innderDiv {
display:inline-block;
width: 33%;
max-width: 300px;
min-width: 135px;
border: 1px dashed;
margin-bottom: 5px;
}
http://jsfiddle.net/ruslans/KNDFE/
I am trying to create a page that has a width that adjusts to the screen with a fixed width column on the right. So for example:
| | |
|-------Content------|--Column--|
| | |
| | |
|---Content---|--Column--|
| | |
| | |
|-----Content----|--Column--|
| | |
http://www.reddit.com/ would be a good example of this.
Thanks
This blog is pretty useful for grabbing complex layouts.
ultimate-2-column-right-menu-pixels
this is essentially what reddit does: http://jsfiddle.net/pxfunc/rCG84/
the side div 1.) is above content in the html, 2.) is set to float:right;, and 3.) given a specific width (width:300px)
<div id="side"></div>
<div id="content"></div>
the content div will adjust with the window size
This is a tricky question, but I will do my best to ask it:
I have a middle column of content and I want to add columns to the left and right of it, but I want them to "hug" the middle column. How can I center the middle column always and have the other two columns "hug" it?
The columns have a fixed width of 750px and basically when the viewport is maximized it should be something like this on a big monitor:
-------------------------------------
| | | | | |
| | | | | |
| | left | mid | right | |
| | | | | |
| | | | | |
-------------------------------------
and when the window is not wide enough, the left and right columns should get cut-off, but the middle column should still be centered and visible (assuming they don't make it too small horizontally):
-------------
| | | |
| | | |
le|ft | mid | ri|ght
| | | |
| | | |
-------------
Where "le" and "ght" are off-screen and not visible in the viewport.
I'm interested in any ways of accomplishing this. Currently I'm using
margin-left: auto;
margin-right: auto;
to center the middle column, but if there are ways to accomplish this without that, by all means =)
Thanks for reading this tricky question. I hope I got my idea across.
(If you can think of a better question title, feel free to edit it. I wasn't sure what to put)
P.S. Each column is actually made up of a few divs itself, (blocks that make up a column), I'm not sure if that makes the problem any easier to solve, or if that totally changes the problem...
Something like this ? http://jsfiddle.net/ndtLX/
i'm using an absolute positioned div above 2 floated divs, each large 50% of the container.
the problem is that on the left and right columns, the off-screen happen on the other side, and not on the same side as you asked...
You could also try floats to see if that gives you what you want
.divLeftCol
{
float: left;
}
.divRightCol
{
float: right;
}
<div class="divLeftcol"></div>
<div class="divCenter"></div>
<div class="divRightcol"></div>