I have two columns: .group-left and .group-right. On mobile, I want the right column to be displayed above the left. The code below displays the right column below the left on mobile devices. The height of the right column is variable so I don't think I can use absolute positioning. Is there another way to accomplish this with CSS?
#media all and (min-width: 980px) {
.node-type-new-donate-page .group-left {
width: 47% !important;
min-width:320px;
}
.node-type-new-donate-page .group-right {
width: 48%;
min-width:320px;
float:right;
}
}
#media all and (max-width: 979px) {
.node-type-new-donate-page .group-left {
width: 95%;
min-width:300px;
}
.node-type-new-donate-page .group-right {
width: 95%;
min-width:300px;
}
}
Make sure your divs are in the right order (group-left on top)
<div class="node-type-new-donate-page">
<div class="group-left">go left</div>
<div class="group-right">go right</div>
</div>
Then add float:left to .group-left for your min-width 980px;
#media all and (min-width: 980px) {
.node-type-new-donate-page .group-left {
width: 47% !important;
min-width:320px;
float:left;
}
.node-type-new-donate-page .group-right {
width: 48%;
min-width:320px;
float:right;
}
}
#media all and (max-width: 979px) {
.node-type-new-donate-page .group-left {
width: 95%;
min-width:300px;
}
.node-type-new-donate-page .group-right {
width: 95%;
min-width:300px;
}
}
depending on your layout you might need to use clearfix on your .node-type-new-donate-page
Related
I am trying to achieve 3 column layout with responsive divs (16/9), and on smaller screens make this 2 column, or single column layout.
The problem is guessing padding for divs based on their width, which is in percentage. Is this possible?
Test on jsfiddle so you can resize body to see behavior with different columns: https://jsfiddle.net/cLr010kz/6/
body{
margin:0;
}
.wrap{
max-width:960px;
}
.a{
position:relative;
top:0;
left:0;
width:100%;
float:left;
padding-bottom: 47%;
overflow:hidden;
cursor: pointer;
background:red;
}
.a:nth-child(1){
background:blue;
}
.a:nth-child(2){
background:green;
}
#media (min-width: 500px) {
.a{
width: 50%;
padding-bottom: 27%;
}
}
#media (min-width: 700px) {
.a{
width: 33.3333333%;
padding-bottom: 19%;
}
}
<div class="wrap">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
</div>
For some reason .headPhone is staying to the right when i resize my browser or view the pageon a mobile. I want to take the float off or add some margin so it centers on a smaller display. How can i achieve this?
HTML
<div class="headDiv">
<div class="headPhone">
<p class="fa fa-phone fa-xlg">000000</p>
</div>
</div><!--headDiv-->
CSS
.headDiv {display:block; max-width:100%;}
.headPhone {float:right;}
#media (max-width: 768px) {
.headDiv .headPhone {float:none; margin: 0 auto;}
}
You could use display:table so the div will shrink to fit the content automatically.
http://jsfiddle.net/Lb7ky6vL/
#media (max-width: 768px) {
.headDiv .headPhone {
float: none;
display: table;
margin: 0 auto;
}
}
The float right was your issue and it sort of overrides the properties of display: block;. I answered this under the impression that you wanted the div to be full width. I added some color for checking.
.headDiv {
display: block;
max-width: 100%;
background: yellow;
}
.headPhone {
float: right;
background: red;
}
#media (max-width: 768px) {
.headDiv .headPhone {
width: auto;
float: none;
margin: 0 auto;
}
}
I have absolute positioned image (on the left) with some div's positioned relative in it. On the right side I have div positioned by float: right. Is there any way to resize image when it touches floated div? Not the edge of the browser. For now I made something like this
#media screen and (max-width: 1860px){ .content-image img { max-width: 1250px; } }
#media screen and (max-width: 1780px){ .content-image img { max-width: 1200px; } }
#media screen and (max-width: 1710px){ .content-image img { max-width: 1150px; } }
#media screen and (max-width: 1640px){ .content-image img { max-width: 1100px; } }
#media screen and (max-width: 1570px){ .content-image img { max-width: 1050px; } }
#media screen and (max-width: 1500px){ .content-image img { max-width: 1000px; } }
#media screen and (max-width: 1430px){ .content-image img { max-width: 950px; } }
#media screen and (max-width: 1360px){ .content-image img { max-width: 900px; } }
#media screen and (max-width: 1290px){ .content-image img { max-width: 850px; } }
#media screen and (max-width: 1220px){ .content-image img { max-width: 800px; } }
#media screen and (max-width: 1150px){ .content-image img { max-width: 750px; } }
#media screen and (max-width: 1080px){ .content-image img { max-width: 700px; } }
#media screen and (max-width: 1010px){ .content-image img { max-width: 650px; } }
but maybe there is more cleaner way? And maybe more simplier?
Put the image in a div. For the CSS, use the following:
#image-container {
margin-right: 20%;
position: absolute;
}
#right-div {
float: right;
width: 20%;
}
.content-image {
max-width: 100%;
}
Fiddle
I am trying to achieve the following in a two column float css design
My css for the two is this:
.div1 {
width: 25%;
float:left;
}
.div2 {
width: 75%;
float: right;
}
.container {
width:960px;
}
#media screen and (max-width: 320px) {
.div1, .div2 {
width: 100%;
display: block;
float: none;
clear: both;
}
.container {
width: 100%;
}
}
my html is this:
...
<div class="container">
<div class="div1">
... content inside
</div>
<div class="div2">
<img src="photo_loc"/>
</div>
</div>
I have Div I and Div II. Div I is 25% width and Div II is 75% width. When I go to 320px (iphone portrait) using responsive design Div II goes below Div I, which I assume is the normal process.
What I am trying to do is have Div II above Div I using floats, how can this be achieved through css?
Working Fiddle
.div1 {
width: 25%;
float:left;
background:orange;
}
.div2 {
width:75%;
float: right;
background:red;
}
#media screen and (max-width: 320px) {
.div1, .div2 {
width: 100%;
display: block;
float: none;
clear: both;
}
.div1{
position:relative;
top:100px;
}
.div2{
position:absolute;
top:0;
height:100px;
}
}
Swap the HTML positions of div1 and div2 around.
It may not be semantically correct in terms of how the page should be layed out but it will still work.
Keep the CSS the same and have your html like this
<div class="div2">Text for box 2</div>
<div class="div1">Text for box 1</div>
Demo: http://jsfiddle.net/u3Ng3/1/
My media query for portrait orientation doesn't seem to work. Any ideas what I'm doing wrong, please?
html:
<div class="titleCard" id="first" style="background-color:white"></div>
css:
html, body { -webkit-backface-visibility:hidden;}
#first {
background-color: #000;
width: 100%; max-width: 1920px;
height: 100%; max-height: 1080px;
background: url('images/bg.png') no-repeat center;
background-size:cover;
position:relative;
}
.bgwidth { width: 100%; max-width: 1920px; }
.bgheight { height: 100%; max-height: 1080px; }
#media all and (orientation:portrait) {
background: url('images/Mobile_Art.jpg') no-repeat center;
}
It works (simplified test). It's just that you're not telling it for what element it should change the background when the orientation changes.
You probably meant to have something like:
#media all and (orientation: portrait) {
#first {
background: url('images/Mobile_Art.jpg') no-repeat center;
}
}
instead of:
#media all and (orientation:portrait) {
background: url('images/Mobile_Art.jpg') no-repeat center;
}