How can I set a fluid height for each row? The rows would either be 4 or 6 based on the orientation as there are 24 total icons (6x4 or 4x6).
I was able to solve the 4 col and 6 col icon set and have a fluid width. However, I cannot figure out how to get the spacing between rows fluid for the height.
Also, I'm open to suggestions on how to improve the code as well if you think there's a better alternative.
Here's my code:
CSS
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: portrait) {
/* Clear 4 columns */
.profile {
display: none;
}
.app {
float: left;
text-align: center;
width: 25%;
}
.clear4 {
clear: both;
}
}
#media only screen and (min-width: 320px) and (max-width: 768px) and (orientation: landscape) {
/* Clear 6 columns */
.profile {
display: none;
}
.apps {
}
.app {
float: left;
text-align: center;
width: calc(100%/6);
}
.clear6 {
clear: both;
}
}
HTML
<div class="apps">
</div><!-- .apps -->
you mean the space between the app divs?
.app {
float: left;
position:relative;
text-align: center;
width: 100%;
margin-bottom:50px;
margin-top:50px;
}
have a look in here fiddle
Related
.container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
/* Small */
#media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Medium */
#media (min-width: 992px) {
.container {
width: 970px;
}
}
/* Large */
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
I tend to use containers everywhere To middle content in different devices and keep it balanced (media) like min-width 1200px {width: 1200px}etc. However when I try to style a site that begins from the edges. it comes in the middle which does not help in these kinds of sites.
what should I do?
If you are going to say get rid of containers, I do not know how to work without them Can you tell me what to do instead of the containers that I tend to use?
I have two main div on my site, a left and a right.
The left one has these classes: col-md-3 left_side
And the right one: col-md-9 right_side
In the CSS file, the left_side and the right_side classes have only just some padding, no float. The floating is from the col-md bootstrap classes.
How can I do that if I am viewing the site on mobile or tablet, to change these to divs sequence? The right_side div will be the first.
I want this, because now on mobile, the left_side div is the first, and I have to scroll down a lot to view the actual page content or the product page I selected.
Update: Whit this code, i still get the same problem.
#media (max-width: 575px) {
.left_side {
float: right;
}
.right_side {
float: left;
}
}
#media (min-width: 576px) and (max-width: 767px) {
.left_side {
float: right;
}
.right_side {
float: left;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.left_side {
float: right;
}
.right_side {
float: left;
}
}
This is a simple solution for this issue:
Edit: changes css
Edit2 Using max-width instead min-width in css media query
.left_side {
background-color: red;
}
.right_side {
float: right !important;
background-color: blue;
}
#media (max-width: 992px) {
.right_side {
float: none !important;
}
}
<div class="col-md-9 right_side">Right in desktop, top in mobile</div>
<div class="col-md-3 left_side">left in desktop, bottom in mobile</div>
This question already has answers here:
Why does media query only work when placed last in my CSS?
(2 answers)
Closed 6 years ago.
I had a quiz in a html/css class I'm taking asking me to use media queries to reorganize some divs based on screen size. The code they supplied that I was supposed to add onto was this:
<style type="text/css">
/*
These are the responsive styles. Throw some breakpoints in here!
*/
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 100%;
}
#media screen and (max-width: 400px) {
.dark_blue {
color: blue;
}
}
</style>
There was a lot more than that but that is the relevant part. I came up with this:
<style type="text/css">
/*
These are the responsive styles. Throw some breakpoints in here!
*/
#media screen and (min-width: 450px) {
.light_blue, .green {
width: 50%;
}
}
#media screen and (min-width: 550px) {
.red {
width: 33.3%;
}
.orange {
width: 66.6%;
}
}
#media screen and (min-width: 800px) {
.container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
}
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 100%;
}
#media screen and (max-width: 400px) {
.dark_blue {
color: blue;
}
}
</style>
But it did literally nothing. The page was completely unchanged. I eventually gave up and looked at the answer, they had written exactly the same the CSS that I had, only in a different order:
<style type="text/css">
/*
These are the responsive styles. Throw some breakpoints in here!
*/
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 100%;
}
#media screen and (min-width: 450px) {
.light_blue, .green {
width: 50%;
}
}
#media screen and (min-width: 550px) {
.red {
width: 33.3%;
}
.orange {
width: 66.6%;
}
}
#media screen and (min-width: 800px) {
.container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
}
#media screen and (max-width: 400px) {
.dark_blue {
color: blue;
}
}
</style>
So my question is, how does order get applied here and why didn't my code do anything at all?
CSS stands for Cascading Style Sheets, so there rules will be interpreted cascading down, so if you have
.blue { color: blue; }
And then later on down the same CSS file, you put
.blue { color: pink; }
It will overwrite the color of .blue to pink
With media queries you want to add your default styling first and then add your media queries, because it will detect media queries first and then just use those rules instead of your default styling.
Because the browser will be able to detect (for example) your devices min-width is 800px, it'll pick up those styles and not bother to overwrite them when the file gets interpreted further down in your default styling
Hard to explain. Hope that sort of cleared things up
I want to edit the margin-top of a text in the mobile device. I have come this far but I know there is something crazy in the code:
.Foljoss {
padding-left: 18px;
background: #fff;
}
#media screen and
(max-width: 768px; margin-top:17px)
It is the last part in which I dont get it. How can I adjust the top margin for the <div class="Foljoss"> on the mobile version? Notice that the #media screen-part is not correct.
You need to wrap the css inside a selector inside the media query.
#media screen and (max-width: 768px) {
.Foljoss {
margin-top: 17px;
}
}
body {
background-color: lightgreen;
}
.show-on-mobile {
display: none;
}
#media screen and (max-width: 568px) {
.show-on-mobile {
display: block;
}
.hide-on-mobile {
display: none;
}
body {
background-color: lightblue;
}
}
<div class="show-on-mobile">Only visible when width is <= 568px</div>
<div class="hide-on-mobile">Disappears when screen width > 568px</div>
/* 767 is max for mobile */
#media screen and (max-width: 767px) {
.Foljoss {
margin-top: 17px;
}
}
Hi I am almost finished with my website but I have a small issue of the columns not displaying at 100% when on a mobile device, I do not know what I have done wrong in the css below but the max-width 320px does not seem to be making the column go 100% when on mobile.
here is a link to my site to see what happens
http://www.ico.mmu.ac.uk/08506125/portfolio/index.html
I know it's a really simple solution...
#media(max-width : 320px){
.column.half { width: 100%;}
}
/* Column sizes */
#media (min-width: 40rem)
.column {
float:left;
padding-left:1em ;
padding-right:1em;
}
.column.full { width: 100%; }
.column.two-thirds { width: 66.7%; }
.column.half { width: 50%;}
.column.third { width: 33.3%; }
.column.fourth { width: 25%; }
.column.flow-opposite { float: right; }
/* Column sizes end */
/* Medium screens (640px) */
#media (min-width: 40rem) {
html { font-size: 112%; }
.third { float:left; display:inline;}
.half { float:left; display:inline;}
.two-thirds { float:left; display:inline;}
.image { border-style: double; border-color:white;}
}
/* Large screens (1024px) */
#media (min-width: 64rem) {
html { font-size: 120%; }
}
Just put this condition in the bottom because you override it with your default width.
.column.half { width: 50%;}
#media(max-width : 320px){
.column.half { width: 100%;}
}
please notice "half" class stop getting "float left" on 640px so you've got the issue already from there...because there are devices with bigger screen resolution, maybe it can be better for you to change 320px to 640px:
#media (max-width: 40rem){
.column.half
{
width: 100%;
}
}