I have a problem with my media queries as it is not overriding each other. The first iteration (max-width: 960px) works fine but the second one (max-width: 380px) does not work and I do not know why. Help is appreciated, thanks.
.fb {
width: 50px;
margin-left: 20px;
margin-right: 20px;
}
#media only screen and (max-width: 960px) {
/* this works */
.fb {
position: relative;
width: 40px!important;
margin-left: 15px!important;
margin-right: 15px!important;
}
}
#media only screen and (max-width: 380px) {
/* this does not work */
.fb {
width: 30px!important;
margin-left: 10px!important;
margin-right: 10px!important;
}
}
<div class="social_container">
<img class="fb" src= "http://placekitten.com/200/300" alt="">
</div>
you are wrongly spelled margin-rigth please change it to margin-right and remove !important
.fb {
width: 50px;
margin-left: 20px;
margin-right: 20px;
}
#media only screen and (max-width: 960px) {
.fb {
position: relative;
width: 40px;
margin-left: 15px;
margin-right: 15px;
}
}
#media only screen and (max-width: 380px) {
.fb {
width: 30px;
margin-left: 10px;
margin-right: 10px;
}
}
<div class="social_container">
<a href="https://www.facebook.com/" target="_blank">
<img class="fb" src="https://i.stack.imgur.com/UzPkq.jpg" alt="">
</a>
</div>
see fiddle
.social_container a {
color: red;
}
#media only screen and (max-width: 960px) {
.social_container a{
color: green;
}
}
#media only screen and (max-width: 380px) {
.social_container a{
color: pink;
}
}
<div class="social_container">
fb
</div>
Related
I'm trying to get these two divs to play nicely together, but it won't work. I've got the big screen view down, but whatever I do, the divs won't stack on top of each other properly on small screens (mobile). Currently, my code has stacked them but is now refusing to show the second one all together. I've tried many of the suggestions in other asks, but I either have the same problem (doesn't show the second div) or they'll still show up next to each other.
I've tried many of the suggestions in other asks, but I either have the same problem (doesn't show the second div) or they'll still show up next to each other.
Big screen works, smaller screen is expected to show divs stacked on top of each other but it only shows div1.
.hiraola-banner_area-3 {
padding-bottom: 60px;
padding-top: 40px;
display: flex;
}
#media only screen and (min-width: 0px) and (max-width: 767px) {
.container_main1 {
height: 69px;
min-width: 100%;
}
.container_main2 {
height: 200px;
margin-top: 10px;
min-width: 100%;
}
}
#media only screen and (min-width: 768px) and (max-width: 2000px) {
.container_main1 {
flex: 0 0 40%;
padding-left: 50px;
padding-right: 20px;
}
.container_main2 {
flex: 1;
padding-right: 20px;
padding-left: 50px;
}
}
<div class="hiraola-banner_area-3">
<div class="container_main1">
<h2>Over Rijlessponsor</h2>
<p>BLOCK OF TEXT</p>
</div>
<div class="container_main2">
<h2>Benieuwd naar hoe het werkt?</h2>
<p></p>
<div class="myIframe">
<iframe class="resp-iframe" src="https://www.youtube.com/embed/5VAIxwWnsVY?">
</iframe>
</div>
</div>
</div>
You are missing
.hiraola-banner_area-3 {
flex-wrap: wrap;
}
.hiraola-banner_area-3 {
padding-bottom: 60px;
padding-top: 40px;
display: flex;
}
#media only screen and (min-width: 0px) and (max-width: 767px) {
.hiraola-banner_area-3 {
flex-wrap: wrap;
}
.container_main1 {
height: 69px;
min-width: 100%;
}
.container_main2 {
height: 200px;
margin-top: 10px;
min-width: 100%;
}
}
#media only screen and (min-width: 768px) and (max-width: 2000px) {
.container_main1 {
flex: 0 0 40%;
padding-left: 50px;
padding-right: 20px;
}
.container_main2 {
flex: 1;
padding-right: 20px;
padding-left: 50px;
}
}
<div class="hiraola-banner_area-3">
<div class="container_main1">
<h2>Over Rijlessponsor</h2>
<p>BLOCK OF TEXT</p>
</div>
<div class="container_main2">
<h2>Benieuwd naar hoe het werkt?</h2>
<p></p>
<div class="myIframe">
<iframe class="resp-iframe" src="https://www.youtube.com/embed/5VAIxwWnsVY?">
</iframe>
</div>
</div>
</div>
Start by setting the width of the container div. Then you can set the width of the two divs to 50% for large screens and 100% for small screens. That way they will auto adjust when the viewport changes size.
You can also use display:inline-block for big screen and display:block for small screen. Should get almost the same result but not using flex.
.hiraola-banner_area-3 {
padding-bottom: 60px;
padding-top: 40px;
}
.container_main1, .container_main2 {display:inline-block;}
#media only screen and (min-width: 0px) and (max-width: 767px) {
.container_main1 {
display:block;
height: 69px;
}
.container_main2 {
display:block;
height: 200px;
margin-top: 10px;
}
}
#media only screen and (min-width: 768px) and (max-width: 2000px) {
.container_main1 {
width:50vw;
padding-left: 50px;
padding-right: 20px;
vertical-align:top;
}
.container_main2 {
padding-right: 20px;
padding-left: 50px;
}
}
<div class="hiraola-banner_area-3">
<div class="container_main1">
<h2>Over Rijlessponsor</h2>
<p>BLOCK OF TEXT</p>
</div>
<div class="container_main2">
<h2>Benieuwd naar hoe het werkt?</h2>
<p></p>
<div class="myIframe">
<iframe class="resp-iframe" src="https://www.youtube.com/embed/5VAIxwWnsVY?">
</iframe>
</div>
</div>
</div>
Hope this helps.
This question already has answers here:
How to set 66% area to one element and 33% and 33% to the other two elements using flexbox? [closed]
(3 answers)
flex-grow not sizing flex items as expected
(5 answers)
How to size flex-items without percentages?
(2 answers)
Closed 4 years ago.
I am making a grid system which I am building with the flex class. It is my first time working with flex, so I am not quite sure how it is functioning yet.
The grid I have made until now
is looking like this.
I would like the flexbox item 6 is looking like the below picture:
At the moment item 5 and item 6 is taking 50% width each
The item5 and item6 is taking 50% width. I cannot seem to change that. I would like that item 5 is taking around 66% and item 6 is taking 33%, but still have the margin around the elements.
Can somebody see what I am doing wrong?
<style>
.d-flex {
display: -ms-flexbox!important;
display: flex!important
}
.d-inline-flex {
display: -ms-inline-flexbox!important;
display: inline-flex!important
}
.flex-wrap {
-ms-flex-wrap: wrap!important;
flex-wrap: wrap!important
}
.bg-img {
background-position: center center;
background-size: cover;
background-repeat: no-repeat; }
/* CTA Buttons */
.btn-top-left {
position: absolute;
left: 10%;
top: 10%
}
.btn-top-right {
}
.btn-center {
position: absolute;
left: 50%;
top: 50%
}
.btn-bottom-left {
}
.btn-bottom-right {
}
/* :: Set overlay over image and placement of text */
.single-welcome-post {
position: relative;
z-index: 1; }
.single-welcome-post::after {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
content: '';
z-index: 5; }
.single-welcome-post .welcome-post-content {
position: absolute;
z-index: 100;
left: 50px;
bottom: 50px;
right: 50px; }
#media only screen and (min-width: 768px) and (max-width: 991px) {
.single-welcome-post .welcome-post-content {
left: 20px;
bottom: 20px;
right: 20px; } }
#media only screen and (max-width: 767px) {
.single-welcome-post .welcome-post-content {
left: 15px;
bottom: 15px;
right: 15px; } }
.single-welcome-post.style-2 {
height: 645px; }
.hero-area {
position: relative;
z-index: 0;
background-color: #ffffff;
padding: 5px; }
.hero-area .hero-single-section {
position: relative;
z-index: 0;
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
width: 50%; }
#media only screen and (max-width: 767px) {
.hero-area .hero-single-section {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
width: 100%; } }
.hero-area .item1 {
height: 700px;
margin: 5px; }
#media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero-area .item1 {
height: 600px; } }
#media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-area .item1 {
height: 500px; } }
#media only screen and (max-width: 767px) {
.hero-area .item1 {
height: 350px; } }
.hero-area .item2 {
height: 340px;
margin: 5px; }
#media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero-area .item2 {
height: 290px; } }
#media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-area .item2 {
height: 240px; } }
#media only screen and (max-width: 767px) {
.hero-area .item2 {
height: 200px; } }
.hero-area .item3 {
height: 350px;
-webkit-box-flex: 0;
-ms-flex: 0 0 calc(50% - 10px);
flex: 0 0 calc(50% - 10px);
max-width: calc(50% - 10px);
width: calc(50% - 10px);
margin: 5px; }
#media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero-area .item3 {
height: 300px; } }
#media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-area .item3 {
height: 250px; } }
#media only screen and (max-width: 767px) {
.hero-area .item3 {
height: 200px; } }
.hero-area .item4 {
height: 350px;
-webkit-box-flex: 0;
-ms-flex: 0 0 calc(50% - 10px);
flex: 0 0 calc(50% - 10px);
max-width: calc(50% - 10px);
width: calc(50% - 10px);
margin: 5px; }
#media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero-area .item4 {
height: 300px; } }
#media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-area .item4 {
height: 250px; } }
#media only screen and (max-width: 767px) {
.hero-area .item4 {
height: 200px; } }
.hero-area .item5 {
height: 350px;
-webkit-box-flex: 0;
-ms-flex: 0 0 calc(50% - 10px);
flex: 0 0 calc(50% - 10px);
max-width: calc(130% - 10px);
width: calc(130% - 10px);
margin: 5px; }
#media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero-area .item5 {
height: 300px; } }
#media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-area .item5 {
height: 250px;
max-width: calc(100% - 10px); } }
#media only screen and (max-width: 767px) {
.hero-area .item5 {
height: 200px;
max-width: calc(100% - 10px); } }
.hero-area .item6 {
height: 350px;
-webkit-box-flex: 0;
-ms-flex: 0 0 calc(50% - 10px);
flex: 0 0 calc(50% - 10px);
max-width: calc(100% - 10px);
width: calc(100% - 10px);
margin: 5px; }
#media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero-area .item6 {
height: 300px; } }
#media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-area .item6 {
height: 250px;
max-width: calc(100% - 10px); } }
#media only screen and (max-width: 767px) {
.hero-area .item6 {
height: 200px;
max-width: calc(100% - 10px); } }
.hero-area .item7 {
height: 350px;
-webkit-box-flex: 0;
-ms-flex: 0 0 calc(50% - 10px);
flex: 0 0 calc(50% - 10px);
max-width: calc(100% - 10px);
width: calc(100% - 10px);
margin: 5px; }
#media only screen and (min-width: 992px) and (max-width: 1199px) {
.hero-area .item7 {
height: 300px; } }
#media only screen and (min-width: 768px) and (max-width: 991px) {
.hero-area .item7 {
height: 250px;
max-width: calc(100% - 10px); } }
#media only screen and (max-width: 767px) {
.hero-area .item7 {
height: 200px;
max-width: calc(100% - 10px); } }
.single-blog-post {
position: relative;
z-index: 1; }
.single-blog-post .blog-thumb {
position: relative;
z-index: 1; }
.single-blog-post .blog-thumb img {
width: 100%; }
.single-blog-post .blog-content .post-tag {
color: #a6a6a6;
text-transform: uppercase;
font-size: 12px;
display: block;
font-weight: 700;
margin-bottom: 5px; }
.single-blog-post .blog-content .post-tag:hover, .single-blog-post .blog-content .post-tag:focus {
color: #ff1662; }
/* Set font-size */
#media only screen and (max-width: 767px) {
.single-blog-post .blog-content .post-tag {
font-size: 10px; } }
.single-blog-post .blog-content .post-title {
font-weight: 600;
font-size: 30px;
display: block;
color: #282828;
margin-bottom: 10px; }
/* Align text */
#media only screen and (max-width: 767px) {
.single-blog-post .blog-content .post-title {
font-size: 16px; } }
.single-blog-post .blog-content .post-title:hover, .single-blog-post .blog-content .post-title:focus {
color: #ff1662; }
.single-blog-post .blog-content .post-meta {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
/* Set space between text elements*/
.single-blog-post .blog-content .post-meta a {
color: #ffffff;
margin-right: 15px;
font-size: 11px;
line-height: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
-ms-grid-row-align: flex-end;
align-items: flex-end; }
/* Set color and placement on text*/
#media only screen and (max-width: 767px) {
.single-blog-post .blog-content .post-meta a {
font-size: 8px;
margin-right: 5px; } }
.single-blog-post .blog-content .post-meta a img {
margin-right: 10px; }
.single-blog-post .blog-content .post-meta a:last-child {
margin-right: 0; }
.single-blog-post .blog-content .post-meta a:hover, .single-blog-post .blog-content .post-meta a:focus {
color: #ff1662; }
.single-blog-post.white .blog-content .post-title,
.single-blog-post.white .blog-content .post-tag,
.single-blog-post.white .blog-content .post-meta a {
color: #ffffff; }
.single-blog-post.white .blog-content .post-title:hover, .single-blog-post.white .blog-content .post-title:focus,
.single-blog-post.white .blog-content .post-tag:hover,
.single-blog-post.white .blog-content .post-tag:focus,
.single-blog-post.white .blog-content .post-meta a:hover,
.single-blog-post.white .blog-content .post-meta a:focus {
color: #008ebe; }
.single-blog-post.style2 .blog-content .post-title {
font-size: 24px; }
/* Sidebar Nyhedsbrev */
.sidebar-area {
position: relative;
z-index: 1; }
#media only screen and (min-width: 768px) and (max-width: 991px) {
.sidebar-area {
margin-top: 100px; } }
#media only screen and (max-width: 767px) {
.sidebar-area {
margin-top: 100px; } }
.single-widget-area {
position: relative;
z-index: 1; }
.single-widget-area.newsletter-widget {
background-color: #f0f4f8;
padding: 50px 20px;
text-align: center; }
.single-widget-area.newsletter-widget h4 {
margin-bottom: 25px; }
.single-widget-area.newsletter-widget form input {
text-align: center;
width: 100%;
background-color: #d4dfe3;
height: 54px;
font-size: 12px;
font-style: italic;
color: #4c4c4c;
border: none;
margin-bottom: 15px; }
.single-widget-area.newsletter-widget p {
font-size: 12px;
font-style: italic; }
.single-widget-area.news-widget h4 {
margin-bottom: 60px; }
</style>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- ##### Hero Area Start ##### -->
<div class="hero-area d-flex flex-wrap">
<div class="hero-single-section">
<!-- Single Welcome Post -->
<div class="single-welcome-post bg-img item1" style="background-image: url(http://vouzalis.dk/stack/1.jpg);">
<!-- Content -->
<i class="fa fa-play"></i>
<!-- Content -->
<div class="welcome-post-content">
<!-- Single Blog Post -->
<div class="single-blog-post white">
<div class="blog-content">
Featured
Watch a tiny cat taking a bath
<div class="post-meta">
Here is a text about the picture
</div>
<button href="#" class="btn btn-success btn-center">Read More</button>
</div>
</div>
</div>
</div>
</div>
<div class="hero-single-section">
<!-- Single Welcome Post -->
<div class="single-welcome-post bg-img item2" style="background-image: url(http://vouzalis.dk/stack/2.jpg);">
<!-- Content -->
<div class="welcome-post-content">
<!-- Single Blog Post -->
<div class="single-blog-post white">
<div class="blog-content">
Featured
Spain: Take a virtual tour
<div class="post-meta">
Her er en tekst
</div>
</div>
</div>
</div>
</div>
<div class="hero-second-section d-flex flex-wrap">
<!-- Single Welcome Post -->
<div class="single-welcome-post bg-img item3" style="background-image: url(http://vouzalis.dk/stack/3.jpg);">
<!-- Content -->
<div class="welcome-post-content">
<!-- Single Blog Post -->
<div class="single-blog-post style2 white">
<div class="blog-content">
Featured
5 Tips to create your garden
</div>
</div>
</div>
</div>
<!-- Single Welcome Post -->
<div class="single-welcome-post bg-img item4" style="background-image: url(http://vouzalis.dk/stack/4.jpg);">
<!-- Content -->
<div class="welcome-post-content">
<!-- Single Blog Post -->
<div class="welcome-post-content">
<!-- Single Blog Post -->
<div class="single-blog-post style2 white">
<div class="blog-content">
Featured
10 Movies you need to see
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hero-single-section">
<!-- Single Welcome Post -->
<div class="single-welcome-post bg-img item5" style="background-image: url(http://vouzalis.dk/stack/1.jpg);">
<!-- Content -->
<i class="fa fa-play"></i>
<!-- Content -->
<div class="welcome-post-content">
<!-- Single Blog Post -->
<div class="single-blog-post white">
<div class="blog-content">
Featured
Watch a tiny cat taking a bath
<div class="post-meta">
Here is a text about the picture
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hero-single-section">
<!-- Single Welcome Post -->
<div class="single-welcome-post bg-img item6" style="background-image: url(http://vouzalis.dk/stack/2.jpg);">
<!-- Content -->
<i class="fa fa-play"></i>
<!-- Content -->
<div class="welcome-post-content">
<!-- Single Blog Post -->
<div class="single-blog-post white">
<div class="blog-content">
Featured
Watch a tiny cat taking a bath
<div class="post-meta">
Here is a text about the picture
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ##### Hero Area end ##### -->
Percentages in width are not something I'd use. I'd wrap the last 2 elements into another div, make it flex and then add flex:1; to the first element and flex:2; to the second for this particular screen width.
This will also make the widths responsive. Bottom line is, avoid percentages, use flex: property with flexbox items.
.wrapper {
width: 100%;
min-height: 150px;
display: flex;
justify-content: center;
align-items: center;
}
.one {
min-height: 150px;
flex: 2;
background: red;
}
.two {
min-height: 150px;
flex: 1;
background: green;
}
<div class="wrapper">
<div class="one"></div>
<div class="two"></div>
</div>
You can solve this in bootstrap like this
.vh-100 {
height:100vh
}
.vh-50 {
height:50vh
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-6 bg-dark vh-100">
</div>
<div class="col-6 vh-100 bg-danger">
<div class="row">
<div class="col-6 vh-50 bg-primary">
</div>
<div class="col-6 vh-50 bg-warning">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-8 bg-success vh-100">
</div>
<div class="col-4 vh-100 bg-info">
</div>
</div>
<div class="col-md-4 saldos">
<div class="saldo">
<p>Saldo</p>
<h1>R$ 713,00</h1>
</div>
</div>
#media (max-width: 800px) {
.saldo {
width: 150px;
}
}
I defined 800px, but it just works on 530px. Does anyone know why this happens?
TRY:
#media only screen and (max-width: 800px) {
.saldo {
width: 150px;
}
.saldo h1 {
font-size: 25px;
}
}
I came with a design feature I want to add to my website. I have a container that hold informations about user.The container holds dynamically created divs,this means that in every user account the number of divs changes. My main goal is to add responsive style so my container hold exactly the same number of divs in every device width, positioned in the center.
Problem
The problem is in the horizontal align of the divs. Look in the next images:
If we have a width of 768px then the interface looks as expected
If we resize the window to eg. 850px width then the results are the following:
You see that the divs aren't positioined in the center of the screen so that a blank space is created. Moreover it should appear one more div as the width of the page expanding if we have the appropriate space to hold one more div in the line. Now think that there could be many rows not just or two. And every column should position the elements in the same place.
I know that my explanation isn't the greatest so if you have any questions please ask.
How can I fix the css rules to cender my divs in the different window widths?
My css file is the following:
/* CONTAINER */
.seas {
margin-right: auto;
margin-left: auto;
}
/* THE INNER BOXES DIVS */
.sea {
min-width: 250px;
min-height: 300px;
display: inline-block;
margin-top: 20px;
margin-right: 10px;
}
#media screen and (max-width: 980px) {
.sea {
margin-left: 20px;
}
}
#media screen and (max-width: 800px) {
.sea {
margin-left: 50px;
}
}
#media screen and (max-width: 360px) {
.sea {
margin-left: 20px;
}
}
#media screen and (max-width: 320px) {
.sea {
margin-left: 5px;
}
}
The html file
<div class="seas" id="seas">
<div class="sea homeWindow"> </div>
<div class="sea homeWindow"> </div>
<div class="sea homeWindow"> </div>
<div>
Update - (Not) Possible Duplicate -
To answer for the duplicate tag, this question is not duplicate. I understand if you think that it is, cause my question is referring to a more advance web design style than the majority of questions here.I had hard time myself to describe what I wanted. Anyway I found the solution on my own , and thanks to the answer were posted.
So, based on our conversation, I'm adding one fluid design solution, you can look here
http://jsbin.com/rohoqolapa/1/edit?output
All CSS you need is following
/* CONTAINER */
.seas {
margin-right: auto;
margin-left: auto;
}
/* THE INNER BOXES DIVS */
.sea {
min-width: 250px;
min-height: 300px;
display: inline-block;
margin-top: 20px;
margin-right: 10px;
background: red;
box-sizing: border-box;
width: 33.33%;
}
EDIT: - Since changing width is not required and content needs to be center aligned, basically this might be the solution
http://jsbin.com/hapeqerosi/1/edit?output
All you have to do is to change parents css -
.seas {
text-align: center;
}
Your parent div .seas is actually block level element, so you should rather align all it's child centrally.
You should add text-align:center to parent .seas so the inner .sea with display:inline-block; to cover the white space .
.seas {
margin-right: auto;
margin-left: auto;
text-align:center;
}
/* THE INNER BOXES DIVS */
.sea {
min-width: 250px;
min-height: 300px;
display: inline-block;
margin-top: 20px;
margin-right: 10px;
background-color:Red;
vertical-align:top
}
#media screen and (max-width: 980px) {
.sea {
margin-left: 20px;
}
}
#media screen and (max-width: 800px) {
.sea {
margin-left: 50px;
}
}
#media screen and (max-width: 360px) {
.sea {
margin-left: 20px;
}
}
#media screen and (max-width: 320px) {
.sea {
margin-left: 5px;
}
}
<div class="seas" id="seas">
<div class="sea homeWindow"> </div>
<div class="sea homeWindow"> </div>
<div class="sea homeWindow"> </div>
<div>
Check this JSFiddle
I think it's what you want
HTML:
<div class="box">
<div class="wrapper">
<div>
<img src="http://placehold.it/200x200" />
</div>
<div>
<img src="http://placehold.it/200x200" />
</div>
<div>
<img src="http://placehold.it/200x200" />
</div>
<div>
<img src="http://placehold.it/200x200" />
</div>
</div>
</div>
CSS:
.box {
width: 100%;
}
.wrapper {
display: table;
margin: 0 auto;
}
.wrapper>div {
display: inline-block;
border: none;
}
#media (max-width: 400px) {
.wrapper {
width: 200px;
}
}
#media (min-width: 401px) {
.wrapper {
width: 400px;
}
}
#media (min-width: 601px) {
.wrapper {
width: 600px;
}
}
#media (min-width: 801px) {
.wrapper {
width: 800px;
}
}
The solution is here:
#media only screen and (max-device-width: 980px) {
.seas {
max-width: 90%;
}
.sea {
margin-right: 20px;
}
}
#media only screen and (max-device-width: 970px) {
.seas {
max-width: 100%;
}
.sea {
margin-right: 20px;
}
}
#media only screen and (max-device-width: 800px) {
.seas {
max-width: 80%;
}
.sea {
margin-right: 20px;
}
}
#media only screen and (max-device-width: 770px) {
.seas {
max-width: 80%;
}
}
#media only screen and (max-device-width: 360px) {
.seas {
max-width: 85%;
}
}
#media only screen and (max-device-width: 320px) {
.seas {
max-width: 100%;
}
}
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>