When my website is full size, I have content in the footer aligned to the left and right, as follows;
<div class="site-info">
<span class="left">© Client 2016</span>
<span class="right">Site by<img class="credits-img" src="http://voicecoaches.com/wp-content/uploads/2010/08/john_text.png" width="50px" align="right"></span>
</div>
Using this CSS;
.right {
float: none;
}
.left {
float: none;
}
When the website is displayed on a phone, I want the content in the span classes to be displayed in the middle of the screen, with the '© Client 2016' text being displayed on one line, and the text/image link being displayed on another line below it, both centered. Any help is appreciated, thanks
Here is one way, using flexbox
.site-info {
background: lightgray;
overflow: auto;
}
.right img {
float: right;
}
#media screen and (max-width: 480px) {
.site-info {
display: flex;
flex-direction: column;
align-items: center;
background: lightgray;
}
.right {
display: flex;
align-items: center;
}
.right img {
margin-left: 10px;
}
}
<div class="site-info">
<span class="left">© Client 2016</span>
<span class="right">Site by <img class="credits-img" src="http://voicecoaches.com/wp-content/uploads/2010/08/john_text.png" width="50px"></span>
</div>
And if you can't/don't want flexbox, here is one without
.site-info {
background: lightgray;
overflow: auto;
}
.right a {
float: right;
}
#media screen and (max-width: 480px) {
.site-info > span {
display: block;
text-align: center;
}
.right * {
vertical-align: middle;
}
.right a {
float: none;
margin-left: 10px;
}
}
<div class="site-info">
<span class="left">© Client 2016</span>
<span class="right">Site by <img class="credits-img" src="http://voicecoaches.com/wp-content/uploads/2010/08/john_text.png" width="50px"></span>
</div>
/*Screens up to 480px wide*/
#media screen and (max-width: 480px) {
.left, .right {
text-align: center;
}
}
Add this to your css and if the screen size is less then 480px it will do this code instead.
You can read more about the #media rule here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Related
My div class info-container doesn't seem to be positioned proper on mobile. Code seems ok, so not sure what the problem is. I want the class info-container underneath the logo in mobile only. However the code isn't seem to be making effect.
I am fairly new to html/css
.topSection {
display: flex;
justify-content: space-between;
}
.info-container {
display: flex;
flex-direction: column;
}
.info {
display: flex;
align-items: center;
}
.info img {
margin-right: 8px;
}
#media only screen and (max-width: 600px) {
.info-container {
position: relative;
top:12px;
left:5px;
}
}
<div class="topSection">
<div class="logo">
<a href="http://www.elegantcurtainsandblinds.co.uk/index.php"><img
src="http://www.elegantcurtainsandblinds.co.uk/images/eg_logo_new.png"
alt="Logo"></a>
</div>
<div class="info-container">
<div class="info">
<img src="http://elegantcurtainsandblinds.co.uk/images/mobile.png" height="30px" width="30px;" />
<a style="text-decoration:none;color:#2B8C1A;" href="tel:01924724848">Call Us: 01924 724848</a>
</div><br>
<div class="info">
<img src="http://elegantcurtainsandblinds.co.uk/images/images.png" height="30px" width="30px;">
<p style="color:#2B8C1A">Visit Our Showroom</p>
</div><br>
<div class="info">
<img src="http://elegantcurtainsandblinds.co.uk/images/video.png" height="30px" width="30px; target="_blank"">
<p style="color:#2B8C1A">Watch Our Video</p>
</div>
</div>
</div>
Add in media query this css
#media only screen and (max-width: 600px){
.topSection {
display: unset;
}
}
Add display:block; to parent class on mobile
http://prntscr.com/kdq5tq
It was not showing properly because of flex property, try adding below css.
#media only screen and (max-width: 600px) {
.topSection {
display:block;
}
}
#media only screen and (max-width: 600px) {
.info-container {
position: relative;
top:12px;
left:5px;
}
.topSection {
display: flex;
justify-content: space-between;
flex-direction: column;
}
}
Please check this code it working .
add below css code for mobile layout
#media only screen and (max-width: 600px){
.topSection {
display: block;
justify-content: space-between;
clear: both;
overflow: hidden;
}
.info-container {
position: relative;
top: -28px;
left: 0;
display: inline-block;
width: 100%;
float: left;
clear: both;
}
.info {
float: left;
width: 33%;
}
}
Is it possible to stack right side div over the left sided div in mobile view with the help of CSS? The default behavior is the right sided div floats under the left sided div.
CSS:
.left {
position: relative;
float: left;
background: #F48024;
width:576px;
height: 324px;
}
.right {
position: relative;
float: left;
background: #EFF0F1;
width:576px;
height: 324px;
}
HTML:
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
Trying to achieve 3rd layout of this diagram.
You can achieve this by using flex box! Change Your css to this:
.main{
display:flex;
flex-wrap:wrap;
justify-content: center;
}
.left {
position: relative;
background: #F48024;
width:576px;
height: 324px;
}
.right {
position: relative;
background: #EFF0F1;
width:576px;
height: 324px;
}
#media screen and (min-width:1152px){
.main {
justify-content: space-between;
}
.left {
order:2;
}
.right {
order:1;
}
}
order property determines which element stacks first. You can read more about flex box here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This may serve as a quick fix:
#media screen and (max-width:480px){
.main {
display: flex;
flex-direction: column-reverse;
}
}
Note:
You may have to use other flex related css props too to align and justify the content with in the div props like justify-content and align-items.
But if you have many div elements, all of them will be reversed.
div-n
...
div-2
div-1
#media only screen and (max-width: 1000px) and (min-width: 200px) {
.div {
margin-top: 200px;
position: absolute;
display:flex;
flex-direction: column-reverse;
}
}
You can do something like this using media query:
div {
width: 500px;
height: 200px;
}
.left {
float: left;
background-color: yellow;
}
.right {
float: left;
background-color: green;
}
#media only screen and (max-width: 1000px) {
.left {
margin-top: 200px;
position: absolute;
}
.right {
position: absolute;
}
}
<div class="left">left</div>
<div class="right">right</div>
Hi I have a navigation div, which has a div on the bottom of it. This div has two other divs "DIV 1" and "DIV 2" (see on picture). Now I the navigation is closed on a tablet device, so I would show the second div which contains float: right over the first div which contains float: left, like in the picture. How can I do this? Now the first div is over the second. Thanks.
You can do this with Flexbox and media queries just change order of second element to order: -1 , here is Fiddle
.nav {
height: 200px;
display: flex;
align-items: flex-end;
border: 1px solid black;
}
.one {
background: #5B9BD5;
}
.two {
background: #FF0000;
}
.div {
flex: 1;
padding: 10px 0;
border: 1px solid black;
margin: 5px;
box-sizing: border-box;
}
#media(max-width: 480px) {
.nav {
flex-direction: column;
align-items: normal;
justify-content: flex-end;
}
.div {
flex: 0 0 50px;
}
.two {
order: -1;
}
}
<div class="nav">
<div class="div one">1</div>
<div class="div two">2</div>
</div>
You can use media queries for that purpose.
You can just manipulate your divs at some point to change their style.
#media (max-width: 600px) {
#someElement {
float: left;
}
}
You can try the following, along with media queries to remove the float at 800px:
JSFiddle: https://jsfiddle.net/7ws3m9Lx/
CSS:
.div1,.div2 { width: 50%; }
.div1 { float: left; }
.div2 { float: right; }
#media screen and (min-width: 0) and (max-width: 800px){
.div1,.div2 { float: none; width: 100%; }
}
HTML:
<div class="parent">
<div class="div2">DIV2</div>
<div class="div1">DIV1</div>
</div>
I'm trying to create a layout for different resize. I need to reach the result in these images here:
I have this code:
.container {
position: relative;
display: flex;
align-items: stretch;
}
.item {
background-color: black;
box-sizing: border-box;
padding: 20px;
flex: 2;
color: #fff;
}
.item:nth-child(2) {
background-color: grey;
flex: 1
}
.item:nth-child(3) {
background-color: green;
flex: 0.5;
}
#media screen and (max-width: 990px) {
.container {
height: auto;
display: table;
}
.item:nth-child(2) {
float: left;
}
.item:nth-child(3) {
float: right;
}
}
<section class="container">
<div class="item">
<h2>title1</h2>
<hr>You'll notice that even though this column has far more content in it, instead of the other columns ending early, they size themselves to meet the end of this column vertically.</div>
<div class="item">
<h2>title2</h2>
<hr>Normally, the only way to achieve this would be either a hack, or to set all boxes to min-height.
</div>
<div class="item">
<h2>title3</h2>
<hr>This is a column with not much content.
</div>
</section>
Here there's a codepen https://codepen.io/darudev/pen/pyBrzL
Problem is in 990px resize view, I don't find solution to create the same view as "mockup".
Is there someone that can help me or give me some suggestions?
Thank you.
You don't need the table and float properties in your code.
#media screen and (max-width: 990px) {
.container {
height: auto;
display: table;
}
.item:nth-child(2) {
float: left;
}
.item:nth-child(3) {
float: right;
}
}
The entire layout can be made with flexbox.
Here's the solution: When the screen resizes smaller than 990px, allow flex items to wrap and give the first item a 100% width, which forces the following items to the next line.
.container {
display: flex;
}
.item {
background-color: black;
box-sizing: border-box;
padding: 20px;
flex: 2;
color: #fff;
}
.item:nth-child(2) {
background-color: grey;
flex: 1;
}
.item:nth-child(3) {
background-color: green;
flex: 0.5;
}
#media screen and (max-width:990px) {
.container { flex-wrap: wrap; }
.item:first-child { flex-basis: 100%; }
}
<section class="container">
<div class="item">
<h2>title1</h2>
<hr>You'll notice that even though this column has far more content in it,
instead of the other columns ending early, they size themselves to meet the end
of this column vertically.</div>
<div class="item">
<h2>title2</h2>
<hr>Normally, the only way to achieve this would be either a hack, or to set
all boxes to min-height.</div>
<div class="item">
<h2>title3</h2>
<hr>This is a column with not much content.
</div>
</section>
revised codepen
I am working on a site and I have two images that need to be inline when device width is more than 425px (min-width: 425px) but for some reason it does not seem to be working how it should be and my css with the #media but it doesn't work for some reason although it is fairly basic
CODE
.info-img {
width: 49.75%;
}
.info-images {
display: inline-block;
text-align: center;
}
#media screen and only (max-width: 425px) {
.info-img {
width: 100%;
padding-bottom: 1px;
}
.info-images {
display: block;
text-align: center;
}
}
<div class="info-images">
<img src="https://dl.dropboxusercontent.com/s/dd5exdwwpa13yxnthg/unspecified-4.jpeg?dl=0" class="info-img">
<img src="https://dl.dropboxusercontent.com/s/fo3bt6ruhx4qppztho/unspecified-6.jpeg?dl=0" class="info-img">
</div>
</div>
<style type="text/css">
#import url('https://dl.dropboxusercontent.com/s/ikcsorhvohzdipo/information.css?dl=0');
</style>
The problem is because you are giving inline-block to parent instead of img, plus you are writing your media wrongly (its not #media screen and only, but #media only screen and).
Snippet
.info-images {
font-size: 0;
/* fix inline-block gap */
}
.info-img {
width: 50%;
display: inline-block;
vertical-align:top; /* may be necessary */
box-sizing: border-box;
padding: 0 1%
}
#media only screen and (max-width: 425px) {
.info-img {
width: 100%;
padding-bottom: 1px;
}
.info-images {
display: block;
text-align: center;
}
}
<div class="info-images">
<img src="//lorempixel.com/1600/900" class="info-img">
<img src="//lorempixel.com/1600/900" class="info-img">
</div>