I have a row of 3 inline-blocks the span the width of the page horizontally:
When the page reaches 1000px wide I want the tiles to stack themselves as a pyramid:
And then at 460px they need to stack vertically:
My current html/css structure is:
<div class='tile-row'>
<div class='tile'></div>
<div class='tile'></div>
<div class='tile'></div>
</div>
.tile-row{
margin: 0 auto;
max-width:1485px;
}
.tile{
width:32%;
display: inline-block;
height: 200px;
}
How would I set up media queries to accomplish the above scenarios? Is there an easier way to do this without using media queries?
Fiddle: http://jsfiddle.net/C2pjx/
.tile-row{
margin: 0 auto;
}
.tile{
width:32%;
float: left;
height: 100px;
background: red;
margin-left:10px;
margin-bottom: 10px;
}
#media only screen and (max-width: 1000px) {
.tile-row > div:nth-of-type(1)
{
float: none;
margin: 10px 100px;
}
}
#media only screen and (max-width: 460px) {
.tile-row > div:nth-of-type(1){
margin: 10px 0;
}
.tile{
float:none;
background: blue;
margin: 10px 0;
}
}
Related
I am trying to create 3 divs using flexbox. i want 1st and 2nd div to be side by side on desktop and mobile screen but i want 3rd div to be under 2nd div in desktop screen but in mobile screen i want 3rd to be under 1st and 2nd div. Can anyone help me with that? i would really appretiate
.main-div {
display:flex;
flex-direction: row
}
.child-div-1 {
background-color: #555;
width:200px;
height:400px;
}
.child-div-2 {
background-color: red;
width:200px;
height:200px;
}
.child-div-3 {
background-color: green;
width:200px;
height:200px;
}
#media only screen and (max-width: 991px) {
}
<div class="main-div">
<div class="child-div-1"></div>
<div>
<div class="child-div-2"></div>
<div class="child-div-3"></div>
</div>
</div>
I am trying to make this
body {
padding: 0;
margin: 0;
}
.main-div {
/*display:flex;*/
/*flex-direction: row;*/
width: 100%;
padding: 0;
margin: 0;
height: auto;
}
.main-div > div {
padding: 0;
margin: 0;
display: inline-block;
}
.child-div-1 {
background-color: #555;
width:200px;
width: 48%;
height:400px;
float: left; /*this part somehow did the trick*/
}
.child-div-2 {
background-color: red;
width: 200px;
width: 48%;
height:200px;
vertical-align: top; /*to remove extra gaps */
}
.child-div-3 {
background-color: green;
width:200px;
height:200px;
}
/*#media only screen and (max-width: 991px) {
}*/
#media (max-width: 991px) {
.child-div-3 {
width: 100vw;
}
}
#media (min-width: 991px) {
.child-div-3 {
width: 200px;
}
}
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<div class="main-div">
<div class="child-div-1" style=""></div>
<!-- <div> -->
<div class="child-div-2"></div>
<div class="child-div-3"></div>
<!-- </div> -->
</div>
</body>
This code somehow did what you asked for. I used display: inline-block all div inside main-div, then used float: left for child-div-1, then used #media to increase the width for small screens. I used width: 48% instead of pixels for width of first and second div to view the result. You can set them to change according to the devices.
PS: I don't know how float: left worked here
I'm trying to get the right column of a 3 column layout to move below the left column on smaller screens. Right now the right column moves in the correct direction except that it hangs below the middle column.
I created this basic simulation of my issue. Note the middle column will always be longer than the left and right columns as shown here.
<style>
.container {
max-width:1280px;
width:100%;
height:200px;
margin-left:auto;
margin-right:auto;
display:flex;
flex-wrap: wrap;
}
.leftsidebar {
width:20%;
height:200px;
background-color:gray;
margin-top:15px;
}
.middle {
width:57%;
background-color:blue;
margin-left:15px;
margin-right:15px;
height:800px;
margin-top:15px;
}
.rightsidebar {
width:20%;
background-color:orange;
height:200px;
margin-top:15px;
}
</style>
<div class="container">
<div class="leftsidebar">left</div>
<div class="middle">middle</div>
<div class="rightsidebar">right</div>
</div>
You can't accomplish that with Flexbox, unless setting fixed height's all over.
Here is a solution that combine Flexbox with float, and use a media query to swap between the two, when on narrower screens.
Note, when using percent based width combined with fixed margins, it can at some point cause the item to wrap. Use CSS Calc to avoid that, as showed in the answer.
Stack snippet
.container {
max-width: 1280px;
height: 200px;
margin: 0 auto;
display: flex;
}
.leftsidebar, .rightsidebar {
width: 20%;
background-color: gray;
margin-top: 15px;
}
.rightsidebar {
background-color: orange;
clear: left;
}
.middle {
width: calc(60% - 30px); /* calc for margin */
background-color: blue;
margin: 15px 15px 0 15px;
height: 800px;
}
#media (max-width: 600px) {
.container {
display: block;
}
.leftsidebar, .rightsidebar {
height: 200px;
float: left;
}
.middle {
width: calc(80% - 30px); /* calc for margin */
float: right;
}
}
<div class="container">
<div class="leftsidebar">left </div>
<div class="middle">middle </div>
<div class="rightsidebar">right </div>
</div>
I could come up only with old good floats, no flexboxes at all. If you don't have to use flexboxes and you are interested, with pretty light hustle it might look like this (snap point is 700px):
* {
box-sizing: border-box;
}
.container {
width:90%;
height:200px;
margin:0px auto;
}
div > div {
background-color: orange;
float: left;
color: white;
text-align: center;
padding: 1em;
}
.leftsidebar {
width: 20%;
height: 200px;
margin-top: 15px;
}
.middle{
width:56%;
margin: 15px 2% 0%;
height:415px;
}
.rightsidebar {
width: 20%;
height: 200px;
margin-top: 15px;
}
#media (max-width: 700px) {
div > div:nth-of-type(2n + 1) {
width: 33%;
}
div > div:nth-of-type(2n) {
float: right;
width: 65%;
margin-right: 0%;
}
}
<div class="container">
<div class="leftsidebar">left </div>
<div class="middle">middle </div>
<div class="rightsidebar">right </div>
</div>
I have an unordered list with display: grid, whenever I go to mobile view on chrome devtools the grid changes to be 1 item in a column instead of 5. Until here everything is fine but I get some weird left margin that I haven't defined anywhere in my code and I don't understand why it's here.. When I set margin:0 for the ul it's still there.. any idea?
My css & html:
ul {
list-style: none;
padding: 0;
margin: 0 5%;
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-gap: 10px;
max-width: 100%;
}
.title2 {
margin-right: 10px;
}
#media screen and (max-width: 480px) {
ul {
width: 300px;
margin-right: 10px;
grid-template-columns: 280px;
}
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 90%;
height: 320px;
text-align: center;
margin: 5% 0;
}
#media screen and (max-width: 480px) {
.card {
height: 265px;
}
}
<div class="card">
<div class="img-container">
<img class="product-thumbnail" src="assets/products/{{product.image}}" alt="{{product.name}}" title="{{product.name}}">
</div>
<div class="container">
<div class="title4 product-name"><strong>{{product.name}}</strong></div>
<div class="product-price">{{product.price}} $</div>
<p>
<button class="btn-purchase" (click)="purchaseItem()">Purchase</button>
</p>
</div>
</div>
<div class="title2">Products:</div>
<ul>
<li *ngFor="let product of products"><app-product [product]="product"></app-product></li>
</ul>
Inside media queries set the left/right margin of the .card to auto to center it horizontally:
.card {
margin: 5% auto;
}
I'd also recommend to use the basic CSS browser reset like this:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}
Because you have given ul a margin-right:10px only on small screen i.e 480px its going to take other margins from larger screen if defined.
#media screen and (max-width: 480px){
ul {
width: 300px;
margin:5% 0;
grid-template-columns: 280px;
}
or if you also want to give margin-right:10px on small screen than
#media screen and (max-width: 480px){
ul {
width: 300px;
margin:5% 10px 5% 0;
grid-template-columns: 280px;
}
Can any one tell why the <div> width is NOT adjusted to 48% as the screen size changes? Is it because I have used position: relative;?
CSS:
.wrap {
width: 24%;
background: white;
margin: 15px;
padding: 10px;
float: left;
display: inline-block;
overflow: hidden;
position: relative;
}
#media(max-width: 580px){
width: 48%;
}
Seems like you just forgot the .wrap and curly braces in the media query:
#media(max-width: 580px) {
.wrap {
width:48%;
}
}
Also see these examples about how to notate media queries.
Solution to your problem
#media(max-width: 580px){
.wrap{
width:48%;
}
}
https://jsfiddle.net/11opj4nq/
Hi remember about mobile first :) . Good practice is to override code in larger devices.
.wrap {
width: 48%;
background: white;
margin: 5px;
padding: 10px;
float: left;
display: block;
overflow: hidden;
position: relative;
}
#media screen and (min-width: 580px) {
.wrap {
width: 24%;
margin: 15px;
}
}
I know there are lots of people asking the div align center problem. But I tried most solution and it seems won't work in my case. Sorry that I have to ask here. I created the floating ad at my site http://tacfeed.com using the following css,
/* Default Stylesheet */
#close {
margin-left: auto;
margin-right: auto;
float:left;
display:inline-block;
padding:2px 5px;
color:black;
background: #fff;
}
#responsive-adsense {
display: none;
}
#responsive-adsense{
display: none;
}
/*
GENERAL MEDIA QUERY FOR SMALL SCREEN SIZES - COVERS COMMON MOBILE DEVICES, PHONES/TABLETS...
*/
#media only screen and (max-width: 1023px) {
.adcontainer {
display: none;
}
#responsive-adsense{
display: none;
}
}
#media only screen and (max-width: 899px) {
.adcontainer {
width: 100%;
height: auto;
position: fixed;
bottom: 0px;
display: block;
background: #fff;
color: #fff;
margin: 0 auto;
padding: 0px;
}
#responsive-adsense {
margin-left: auto;
margin-right: auto;
padding: 0px !important;
width: 728px !important;
display: block !important;
margin:0;
}
}
#media only screen and (max-width: 767px) {
.adcontainer {
width: 100%;
height: auto;
position: fixed;
bottom: 0px;
display: block;
background: #fff;
color: #fff;
margin: 0 auto;
padding: 0px;
}
#responsive-adsense {
margin-left: auto;
margin-right: auto;
padding: 0px !important;
width: 728px !important;
display: block !important;
margin:0;
}
}
#media only screen and (max-width: 599px) {
.adcontainer {
width: 100%;
height: auto;
position: fixed;
bottom: 0px;
display: block;
background: #fff;
color: #fff;
margin: 0 auto;
padding: 0px;
}
#responsive-adsense {
margin-left: auto;
margin-right: auto;
padding: 0px !important;
width: 468px !important;
display: block !important;
margin:0px;
}
}
#media only screen and (max-width: 479px) {
.adcontainer {
width: 100%;
height: auto;
position: fixed;
bottom: 0px;
display: block;
background: #fff;
color: #fff;
margin: 0 auto;
padding: 0px;
}
#responsive-adsense {
margin-left: auto;
margin-right: auto;
padding: 0px !important;
width: 320px !important;
display: block !important;
margin:0px;
}
}
/* Here's the css for mobile devices */
#media only screen and (max-width: 320px) {
.adcontainer {
width: auto !important;
padding: 0px !important;
height: 50px !important;
}
#responsive-adsense {
margin-left: auto;
margin-right: auto;
padding: 0px !important;
width: 320px !important;
display: block !important;
margin:0px;
}
}
/*
Add your custom styles in this file instead of style.css so it
is easier to update the theme. Simply copy an existing style
from style.css to this file, and modify it to your liking.
When you update your theme, backup this file and re-add it after.
*/
/* Global */
.mystyle {}
/* Tablet - 800px, 768px & 720px */
#media only screen and (min-width: 720px) and (max-width: 800px) {
.mystyle {}
}
/* Mobile - 480px & 320px */
#media only screen and (max-width: 719px) {
.mystyle {}
}
/* Mobile - 320px */
#media only screen and (max-width: 479px) {
.mystyle {}
}
And here is the HTML code at footer, before the end of .
<div class="adcontainer" style="background-color: rgba(255, 0, 0, 0)">
<div id="responsive-adsense">
<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>[X]</span>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- mobileadfor2013 -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:50px"
data-ad-client="ca-pub-2658894403753596"
data-ad-slot="4801520732"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</body>
Now, I got two problems. First, the ad align center in portrait mode, but it won't align center if I rotate my iPhone or Android phone to landscape. I tried to use "vertical-align", "margin", "float" and all seems no luck.
Second, the ad does not align to the very bottom of the screen. You can try to visit our site tacfeed.com on mobile. You can see there is at least 1 px left in the bottom area.
Any help or advise would be appreciated.
It seems people don't know this solution to position things to center...you always think the solution needs to be complicated in order to work but you can do this with CSS and it has support on all browsers...
To align verticaly to center a div you only need to add:
position: absolute;
left:0;
right:0;
margin: auto;
Horizontal:
position: absolute;
top:0;
bottom:0;
margin: auto;
And now, absolute center:
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
margin: auto;
+Update
AND, here is a jsfiddle to show that/how it works
++Update
Also, this comes as an update, since now your ad is position:absolute, you can add bottom:0 to it and it will stick to the bottom, no pixels in between.
+++Update
And another jsfiddle to show the exact way of aligning it to center and make it stick to the bottom