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>
Related
HTML
<div class="container">
<div class="photos" id="box">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
</div>
</div>
CSS
.container {
max-width: 1280px;
margin: 0 auto;
}
.photos {
display: flex;
background-color: #000;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: stretch;
padding: 0;
max-width: 1280px;
}
.photos img {
display: block;
float: left;
flex: 0 0 auto;
background-color: #fff;
width: calc(25%-120px);
/*
box-sizing: border-box;
border-right: 40px solid #FFFFFF;
*/
}
#media screen and (min-width: 1024px) {
.photos img {
width: calc(100%/4);
height: calc(100%/4);
}
}
#media screen and (min-width: 769px) and (max-width: 1024px) {
.photos img {
width: calc(100%/4);
height: calc(100%/4);
}
}
#media screen and (min-width: 481px) and (max-width: 768px) {
.photos img {
width: calc(100%/2);
height: calc(100%/2);
}
}
#media screen and (min-width: 321px) and (max-width: 480px) {
.photos img {
width: calc(100%/2);
height: calc(100%/2);
}
}
#media screen and (max-width: 320px) {
.photos img {
width: 100%;
height: 100%;
}
}
How can I place a row of 4 square images that reduce into 2 rows of 2 square images using flexbox, with 40px between everything including the sides
Unable to get a 40px gap between images, messes with calc grid, not sure on how to easily create a grid with 40px gap between everything (including by the edges of the page)
I am learning HTML & CSS from a video step-by-step. In the beginning, we should make a header.
But I don't why the code is not working the same.
The problem is the header must be full width but in my case, it's not. It only became full width when I remove "max-width: 100%" from the .col class
here is my code:
/* app.css */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.body {
font-family: "Nunito Regulsr";
}
.content {
background-color: yellow;
width: 100%;
height: 100px;
}
/* grid.css */
.container {
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 0 15px;
}
#media only screen and (min-width: 576px) {
.container {
max-width: 576px;
}
}
#media only screen and (min-width: 768px) {
.container {
max-width: 768px;
}
}
#media only screen and (min-width: 992px) {
.container {
max-width: 992px;
}
}
#media only screen and (min-width: 1200px) {
.container {
max-width: 1400px;
}
}
.row {
display: flex;
flex-wrap: wrap;
}
.col {
max-width: 100% flex-grow: 1;
}
<div class="container">
<div class="row">
<div class="col">
<div class="content">text</div>
</div>
</div>
</div>
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%;
}
}
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>
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%;
}
}