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;
}
}
Related
Ok, I'm aware of media queries but they are strictly related to a certain width. Sometimes it's not convenient. Say I have bootstrap navbar with logo image and h1 in one line, like here
<nav class="navbar">
<a class="navbar-brand">LOGO</a>
<h1 class="d-inline">Long enough header</h1>
</nav>
https://jsfiddle.net/zzmaster/qno7utp0/2/
On a certain screen width it wraps into two lines. I'd prefer to hide the logo and make this process independent of the width of the second element. Ideally I think of a class of hiding priority like this
<div class="container">
<div class="prio-1">one</div>
<div class="prio-2">two</div>
<div class="prio-3">three</div>
</div>
meaning preventing line wrap by hiding less priority-objects. Is it possible?
I believe this is the solution. So as per this css
If width is more than 500px all the three prio-3, prio-2, prio-1 will be visible.
If width is between 200px and 500px both prio-2, prio-1 will be visible.
If width is less than 200px only prio-1 will be visible.
#media screen and (max-width: 500px) {
prio-3 {
display: none;
}
}
#media screen and (max-width: 200px) {
prio-2 {
display: none;
}
prio-3 {
display: none;
}
}
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.
I have for divs:
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
On desktop, they are positioned like this:
1
2
3
4
On mobile, I would like them to be positioned like this:
1 3
2 4
if i do
div{
width: 50%;
float: left;
clear left;
}
#3,#4{
float: right;
clear: right;
}
They end up like this:
1
2 3
4
The divs are dynamically generated, so if I can avoid adding additional markup, that would be very good.
Demo Fiddle
Given the HTML
<div class='wrapper'>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>
</div>
You could use the CSS:
.wrapper > div {
border:1px solid; /* <-- not needed, used to show div locations */
height:100px; /* <-- not needed, used to show div locations */
}
#media screen and (max-width: 300px) { /* <-- apply styles on certian screen size */
.wrapper {
-webkit-column-count:2; /* <--put the divs in two columns */
-moz-column-count:2; /* <--put the divs in two columns */
column-count:2; /* <--put the divs in two columns */
}
}
Changing the 300px for whatever you deem a mobile device screen to be
I know this has been answered, but I thought I'd give you a different perspective and actually a more commonly used one as well. If you apply bootstrap framework (even if not to a global extend) but you can gut out the css the is valid to your problem, you will be able to do this a lot more comfortably. without getting into css specifity. All you have to do is make proper us of col-md-12 and col-xs-6
See DEMO
Another approach would simply use media queries to change the width of the divs. This would allow you to avoid adding more markup.
http://jsfiddle.net/14ecjy7n/1/
div {
box-sizing: border-box;
float: left;
}
#media all and (max-width: 639px) {
div {
width: 50%;
}
}
#media all and (min-width: 640px) {
div {
width: 100%;
}
}
I have created a website using bootstrap and the responsive features works fine, except for the background color of the div. The elements (images) are stacked but the background color remains only behind the first image in the row. I am looking for a way to extend the background-color on mobile devices.
HTML:
<div id="omos">
<div class="row">
<div class="col-md-6 col-xs-12">
<h2>Kristoffer Andreasen</h2>
<img style="height:280px; width:420px;" src="http://i.imgur.com/874qJmM.png" class="img-responsive">
<div class="Krille">
<p>Indhold</p>
<p>Marketing</p>
<p>Webdesign</p>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="Kalli">
<h2>Kasper Hjortsballe</h2>
<img style="height:200px; width:200px;" src="http://i.imgur.com/kTleong.png" class="img-responsive">
<p>Programmør</p>
<p>Layout</p>
<p>Grafik</p>
</div>
</div>
</div>
</div>
CSS:
#omos {
background-color: #f7f7f7;
height: 80vh;
clear: both;
text-align: center;
}
I have tried several options but no one seems to solve the problem. Does anyone know what to do?
Remove the height property of the div, and it should work.
Bootstrap uses media queries to show things differently on differnet sized screens. If you're saying your CSS works on desktop but not on mobile, it would be because you're not using media queries.
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
/* your mobile css, change this as you please */
#omos {
background-color: #f7f7f7;
height: 80vh;
clear: both;
text-align: center;
}
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
/* your desktop css */
#omos {
background-color: #f7f7f7;
height: 80vh;
clear: both;
text-align: center;
}
}
let's think about what your style sheet does,
height: 80vh;
that makes us do something that is 80% of the viewports height, so if our div stacks outside of that when switching to 12 col it is not going to get the color, as your color is not based on the div, but is based relative to the viewport, twitters media queries however will change your child elements and override this wrapping divs height, so you get stuck, I'd see if min-height will work, or remove height all together if possible(not sure what you're vision is exactly)
Set the height property to auto, it will work fine.
height: auto
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/