Let's say I have the following mark-up:
<style type="text/css">
.floatleft {
float: left;
}
.floatright {
float: right;
}
</style>
<div id="container">
<div id="box1" class="floatleft"></div>
<div id="box2" class="floatright"></div>
</div>
When I view this on a small screen on an iPad or iPhone etc. The two boxes will either:
Shrink (but stay next to each other) or
#box2 will "jump" down and position itself under #box1.
Q: How do I make #box2 jump down under the first <div />?
Use media queries and remove the floating on small sized screens.
Change #box2 to float: left; when on a mobile device, using a media query.
You just need to remove the property float with mediaqueries:
#media screen and (max-width:480px) {
#box1, #box2 {
float:none;
}
}
The demo http://jsfiddle.net/yYq8W/8/
Related
This question already has answers here:
Media Queries: How to target desktop, tablet, and mobile?
(22 answers)
Closed 7 years ago.
Is there a way, without using bootstrap grid, to:
On larger devices
div.left left-aligned in .header-wrapper
div.right right-aligned in .header-wrapper
On small device
stack div.left and div.right on top of each other
JSfiddle
<div class="container">
<div class="header-wrapper">
<div class="left"> This is some longer text that may not fit in-line with buttons</div>
<div class="right">
<a type="button" class="btn btn-default">Table</a>
<a type="button" class="btn btn-default">Charts</a>
</div>
</div>
<p>Some content here</p>
<div class="header-wrapper">
<div class="in-line">
This would be an inline example
</div>
<div class="in-line">
Divs will stack without media queries
</div>
</div>
</div>
Is it possible without media queries?
for example using inline-block on .left .right would take care of stacking. (see inline-example in html code)
Is it possible to left/right align inline-block divs?
As everyone else has said, you need to use media queries.
Try this (obviously change sizes to your liking):
.header-wrapper { width: 100%; }
.header-wrapper > div { width: 200px; height: 50px; }
.left { background: blue; float: left; }
.right { background: red; float: right; }
#media screen and (max-width: 768px ) {
.right {
float:left;
clear: left;
}
}
On screens smaller than 769px, the box with class .right will get float: left; applied to it, which will cause it to, well, float left. The clear: left; will cause it to stack underneath the div with class .left.
I'm probably not groking what your'e saying, so I used a little flexbox and one media query, it looks like what I think you wanted. If not, let me know. BTW, I used to hate media queries because it's syntax was weird and smelled funny, but I came to the conclusion that they are here for a good reason.
http://jsfiddle.net/zer00ne/p7rbpuac/
Changes
.header-wrapper {
border: 1px solid green;
display: flex;
justify-content: space-between;
}
#media screen and (max-width:360px) {
.header-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
}
}
Making 3 column responsive design using media queries is simple, but in case I want the middle column to stay in mid with 100% height and the right column goes on the left column it gets tricky.
The problem emerge because mid column height is variable, therefore it will be impossible to give negative margin-top to the transformed right column.
here is css code example:
/* 3 columns css */
.colLeft, .colRight, .colMid{
width: 280px;
float: left;
}
.colMid{
width: 500px;
}
.colRight{
width: 240px;
}
.container{
width: 1020px;
margin: 0 auto;
}
/* Media queries */
#media screen and (max-width: 1020px) {
.container {
width: 780px!important;
}
.rightCol{
width: 280px;
}
}
Html:
<div class="container">
<div class="leftCol">
</div>
<div class="midCol">
</div>
<div class="rightCol">
</div>
</div>
this code works fine, But mid column height push the transformed right column down.
My question: Is there HTML/CSS solution for this issue? or do I have to change HTML rendering when screen re-size?
Thanks,
Looks like your float: left is being applied to your .colRight class. This could be what is causing your right column to display on your left column.
I found the solution, using only CSS/HTML. Here is the explanation:
I created a duplicate rightCol div and placed it inside leftCol div, and named it righCol-left.
Initially the rightCol-left is set to "display:none"
when media screen is lower than 1020px, hide rightCol (display:none), and display rightCol-left (display:block)
here is the CSS:
.rightCol-left{display:none;} /*duplicate div*/
#media screen and (max-width: 1020px) {
.container {
width:780px!important;
}
.rightCol{
display:none;
}
.rightCol-left{
display:block;
width:280px;
}
}
here is the HTML:
<div class="leftCol">
/*Left column content*/
<div class="rightCol-left"> /* will be displayed when screen is below 1020px */
</div>
</div>
<div class="midCol">
/* mid column content */
</div>
<div class="rightCol"> /* gets hidden when screen is below 1020px */
</div>
This works perfect, the only bad thing would be the repeated HTML code. But this is not noticeable and very minor, after all, HTML code produce far less load to the webpage compared to JavaScript or anything else.
How do i prevent the content from jumping down below the sidebar when the min-margin is reached?
http://jsfiddle.net/7SAHm/4/
<div id="wrapper">
<div id="sidebar"></div>
<div id="content"></div>
</div>
#wrapper {
width: 100%;
overflow:hidden;
}
#sidebar {
float:left;
width: 20%;
min-width:50px;
background-color:#ffb8e0;
}
#content {
float:left;
width:80%;
background-color:#fff7b8;
}
Try to resize the browser window and see that the content jumps down, instead i want it to stay next to each other, even though 80%+50px > wrapper width, instad it should overflow not jump down.
Thanks in advance!
You should use a media query in your CSS to change the percentage-
I have edited your code to show you a demo http://jsfiddle.net/kevinPHPkevin/7SAHm/5/
#media screen and (max-width: 400px) {
#sidebar {
width: 50%;
}
#content {
width:50%;
}
}
I have a problem where I wish to alter the positioning of webpage using CSS for a mobile view. The current set up for desktop is a sidebar floated to the left and a textbox floated to the right. The HTML is as follows:
<div id="container">
<div id="sidebar">...</div>
<div id="textbox">...</div>
</div>
My dilemma is that on mobile devices I wish for the sidebar content to appear under the textbox and I am struggling to produce the CSS to do this. I am using media queries to target smart phones eg:
#media screen and (max-width:479px) {
/* Target portrait smartphones */
}
Can anyone provide me with the CSS to do this? Thanks in advance.
It's pretty simple, in order to do that you should use it like this
<div id="container">
<div id="textbox">...</div>
<div id="sidebar">...</div>
</div>
The textbox first because you'll remove float for mobile. So the textbox goes first then the sidebar.
The css:
.textbox {
width: ***px;
float right;
}
.sidebar {
width: ***px;
float left;
}
#media screen and (max-width:479px) {
/* Target portrait smartphones */
.textbox, .sidebar {
float: none;
}
}
Hope this helps ! :)
It would be easiest to have #sidebar after #textbox in your html, this wont effect desktop viewing, and then for mobile you can just remove the floats:
#media screen and (max-width:479px) {
#sidebar, #textbox {
float: none;
}
}
Kinda stuck on a small issue trying to use a div with a background image in the top left [a logo] not sure how to get this done.... since the variable width is not dependent on a percentage width... i.e.
the maximum width of the div is 1200px
the minimum width of the div is 900px
When someone resizes their browser I need that div to expand or contract depending on the viewport size.
Any thoughts on how I can do this [is this possible without javascript?]?
UPDATE
This is where I got to - seems to work well in most browsers until I hit IE7..
<div id="viewport" class="[[*layout]]">
<div id="contentwrapper">
<div class="wrapper logo">
<div id="header">
[[$TopNav]]
</div>
<div id="content" class="homepage">
[[!If? &subject=`[[*id]]` &operator=`==` &operand=`1` &then=`[[$HomePageTpl]]` &else=`[[$DefaultPageTpl]]` ]]
</div>
</div>
</div>
<div class="wrapper footer">
<div id="footer">
<div id="footnav">[[$FootNav]]</div>
<div id="copyright">[[$Copyright]]</div>
<div id="news-feed">[[$NewsFeed]]</div>
</div>
</div>
div {border: 1px dotted #ccc;}
div#viewport {width:100%;float:left;min-height:100%;position:relative;background-color:#000000;}
div#contentwrapper {width:100%;float:left;background-color:#ffffff;margin-top:8px;}
div#content, div#footer, div#header {float:right;width:900px;padding-left:100px;}
div#header {}
.wrapper {
margin:0 auto;
height:150px;
width:100%;
max-width:1110px;
min-width:1060px;
text-align:left;
}
.wrapper.logo {
background:transparent
url(/assets/images/layout/anderson-lyall-consulting-group-logo.png) no-repeat left top;
}
div#topnav {width:900px;float:right;margin:0 auto;border:1px solid #cc0000;}
CSS has 2 properties for those scenarios, that work from IE7+ called:
min-width: https://developer.mozilla.org/en/CSS/min-width
max-width: https://developer.mozilla.org/en/CSS/max-width
That's probably what you are looking for, you could set the width to 100% first then add the min/max width to control it.
For a no-js solution on modern browser you can use CSS media queries like so
#media screen and (max-width: 1199px) {
div { width: 900px; }
}
#media screen and (min-width: 1200px) {
div { width: 1200px; }
}
this will automatically resize the div depending on your window width and not on the content. Media queries support: http://caniuse.com/css-mediaqueries
a simple proof-of-concept demo
<html>
<head>
<style>
div { margin: 0 auto; border: 1px red solid }
div:after { display: block; }
#media screen and (max-width: 1199px) {
div { width: 900px; }
div:after { content: " max-width is 1199px" }
}
#media screen and (min-width: 1200px) {
div { width: 1200px; }
div:after { content: " min-width is 1200px" }
}
</style>
</head>
<body>
<div>Resize your browser</div>
</body>
</html>