I am trying to make users comments responsive on my website, so that at full width three show,at tablet size two and mobile one. I have attached the link to the website so you can get more of an idea of what i mean: http://www.bfi-film-festival.com/movie.php?id=269
.cmt {
float: left;
width: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin: 15px 0;
}
.cmt_inr {
width: 100% !important;
float: left;
margin: 2%;
min-height: 100px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-box-flex: 1;
flex: 1;
position: relative;
padding-bottom: 80px;
}
#media only screen and (max-width: 480px)
.cmt_inr {
width: 100%;
}
#media only screen and (max-width: 768px)
.cmt_inr {
width: 50%;
}
The # media screens i am using don't seem to work and i have no idea why.
the "{}" are missing for the #media-tag
#media screen and (max-width: 768px) "{"
"}"
Try this to see a result:
#media screen and (max-width: 768px) {
.cmt_inr {
background-color: red;
width: 50%;
}
}
#media screen and (max-width: 480px) {
.cmt_inr {
background-color: blue;
width: 20%;
}
}
The "!important" would override the witdth so try to avoid it or set the !important for the widths in the #media-tag too.
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 have a sidebar nav which collapses to make way for more content in a flex layout. When the user clicks to collapse the nav the content area div .ca expands to fill the space and the flex layout reflows using media queries.
See it in action here.
I have applied a CSS transition to each moving element but the .ca div jumps when the nav is opened and closed. This seems to be related to the widths of the units in the flex layout – .songgrid-unit.
The unit has a width value in px but the media queries set a min-width value in % to override this, so as to avoid large empty spaces between break points:
html:
<div class="navbar open ease">
<div class="nav-toggle">
<div class="nt-wrap">
<div class="nt-bar ease" id="ntb-top"></div>
<div class="nt-bar ease" id="ntb-bot"></div>
</div>
</div>
</div>
<div class="ca ease">
<div class="songgrid ease">
<div class="songgrid-unit ease">
<!-- post content -->
</div>
<div class="songgrid-unit ease">
<!-- post content -->
</div>
<div class="songgrid-unit ease">
<!-- post content -->
</div>
</div>
</div>
CSS:
.navbar {
position: fixed;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 214px;
height: 100vh;
left: 0;
top: 0;
box-sizing: border-box;
padding: 48px 8px 48px 32px;
background-color: #282828;
border-right: solid 1px #555;
z-index: 20;
}
.navbar.closed {
left: -214px;
}
.ca {
position: relative;
width: 100%;
padding: 48px 32px 48px 280px;
box-sizing: border-box; /*keep padding inside width*/
}
.ca.fullwidth {
width: 100%;
padding: 48px 32px 48px 64px;
}
.songgrid {
flex: 1;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
}
.songgrid-unit {
width: 280px;
box-sizing: border-box;
padding: 0 16px 48px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/*adjust no. of cols as per screen width in both container widths*/
#media only screen and (max-width: 623px) {
.ca.fullwidth .songgrid-unit {
min-width: 100%;
}
}
#media screen and (min-width: 624px) and (max-width: 904px) {
.songgrid-unit {
min-width: 100%;
}
.ca.fullwidth .songgrid-unit {
min-width: 50%;
}
}
#media screen and (min-width: 905px) and (max-width: 1184px) {
.songgrid-unit {
min-width: 50%;
}
.ca.fullwidth .songgrid-unit {
min-width: 33%;
}
}
#media screen and (min-width: 1185px) and (max-width: 1464px) {
.songgrid-unit {
min-width: 33%;
}
.ca.fullwidth .songgrid-unit {
min-width: 25%;
}
}
#media screen and (min-width: 1465px) and (max-width: 1744px) {
.songgrid-unit {
min-width: 25%;
}
.ca.fullwidth .songgrid-unit {
min-width: 20%;
}
}
#media only screen and (min-width: 1745px) and (max-width: 1949px) {
.songgrid-unit {
min-width: 20%;
}
.ca.fullwidth .songgrid-unit {
min-width: 16.66667%;
}
}
#media only screen and (min-width: 1950px) {
.songgrid-unit {
min-width: 16.66667%;
}
.ca.fullwidth .songgrid-unit {
min-width: 14.285%;
}
}
.ease {
transition: all 0.4s ease-in 0s;
-webkit-backface-visibility: hidden;
}
jQuery:
$(".nav-toggle").click(function(){
$(".navbar").toggleClass("open closed");
$(".ca").toggleClass("fullwidth");
});
If I remove the media queries the transitions work fine, but the min-width values are breaking the effect.
Why is this happening and how can I fix it? Thanks.
It's hard to tell because the code on the site you linked is a bit different from what you posted here. But it seems to me like the .ca div isn't actually jumping, it just looks like it is because as the items inside the grid change in size the number of items per row changes. The jump happens when the items either take up more space so that one fewer can fit in a row, or take up less space so one more can fit per row.
I played with the code you posted here a bit just to demonstrate what I think is happening. I hid the nav and added some outlines around the songgrid-container & individual songgrid items, and then I slowed down the transition a bit. So you can press the blue box and see what the transition looks like in slow motion. It looks like the widths are all transitioning fine, it just jumps when the layout inevitably changes.
Unfortunately I don't have a super easy solution to this, it's not really something you can control with a basic CSS transition. But maybe look at a library like this: https://isotope.metafizzy.co/
I don't actually think the media queries have anything to do with it, but I may also just be completely misunderstanding the effect you are seeing!
$(".nav-toggle").click(function(){
// $(".navbar").toggleClass("open closed");
$(".ca").toggleClass("fullwidth");
});
.navbar {
position: fixed;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 214px;
height: 100vh;
left: 0;
top: 0;
box-sizing: border-box;
padding: 48px 8px 48px 32px;
background-color: #282828;
border-right: solid 1px #555;
z-index: 20;
left: -214px;
}
.nav-toggle {
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
right: -50px;
}
.navbar.closed {
left: -214px;
}
.ca {
position: relative;
width: 100%;
padding: 48px 32px 48px 280px;
background: lightblue;
box-sizing: border-box; /*keep padding inside width*/
}
.ca.fullwidth {
width: 100%;
padding: 48px 32px 48px 64px;
}
.songgrid {
flex: 1;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
outline: 2px solid blue;
}
.songgrid-unit {
width: 280px;
box-sizing: border-box;
padding: 0 16px 48px;
display: flex;
flex-direction: column;
justify-content: space-between;
background: rgba(255,255,255,.5);
outline: 2px solid gray;
}
/*adjust no. of cols as per screen width in both container widths*/
#media only screen and (max-width: 623px) {
.ca.fullwidth .songgrid-unit {
min-width: 100%;
}
}
#media screen and (min-width: 624px) and (max-width: 904px) {
.songgrid-unit {
min-width: 100%;
}
.ca.fullwidth .songgrid-unit {
min-width: 50%;
}
}
#media screen and (min-width: 905px) and (max-width: 1184px) {
.songgrid-unit {
min-width: 50%;
}
.ca.fullwidth .songgrid-unit {
min-width: 33%;
}
}
#media screen and (min-width: 1185px) and (max-width: 1464px) {
.songgrid-unit {
min-width: 33%;
}
.ca.fullwidth .songgrid-unit {
min-width: 25%;
}
}
#media screen and (min-width: 1465px) and (max-width: 1744px) {
.songgrid-unit {
min-width: 25%;
}
.ca.fullwidth .songgrid-unit {
min-width: 20%;
}
}
#media only screen and (min-width: 1745px) and (max-width: 1949px) {
.songgrid-unit {
min-width: 20%;
}
.ca.fullwidth .songgrid-unit {
min-width: 16.66667%;
}
}
#media only screen and (min-width: 1950px) {
.songgrid-unit {
min-width: 16.66667%;
}
.ca.fullwidth .songgrid-unit {
min-width: 14.285%;
}
}
.ease {
transition: all 3s ease-in 0s;
-webkit-backface-visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<div class="navbar open ease">
<div class="nav-toggle">
click
</div>
</div>
<div class="ca ease">
<div class="songgrid ease">
<div class="songgrid-unit ease">
content
</div>
<div class="songgrid-unit ease">
content
</div>
<div class="songgrid-unit ease">
content
</div>
</div>
</div>
</body>
</html>
With some help getting onto the right path from the reply from #sparrow here I've found that the transitions can be rendered much smoother by applying further flex properties to the items creating the columns in the grid.
Updating the CSS for the .songgrid-unit class as follows fixes the issue:
.songgrid-unit {
width: 280px;
box-sizing: border-box;
padding: 0 16px 48px;
display: flex;
flex-grow: 1; /*new line*/
flex-shrink: 1; /*new line*/
flex-basis: auto; /*new line*/
flex-direction: column;
justify-content: space-between;
}
With thanks to #sparrow and the authors over at this thread.
.flex-container {
display: flex;
justify-content: center;
/*background-color: DodgerBlue;*/
}
.flex-container > div {
/* background-color: #f1f1f1;*/
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
#first-section{
width: 30%;
}
#second-section{
width: 60%;
margin-top: -200px;
background: white
}
<body>
<div header>
<img width="100%" src="https://backgrounddownload.com/wp-content/uploads/2018/09/header-background-6.jpg" />
</div>
<div class="flex-container">
<div id="first-section"> <h2>Design Trade Program</h2>
<p>
Qualified interior decorators, designers, stylists and architects can enjoy an exclusive 20% discount on full-priced merchandise with no minimum purchase.
</p>
<p>
Want to join? Please fill in the below details and we will follow up with you directly within one to two business days. Additional services are available to design professionals depending on your location.
</p></div>
<div id="second-section"> <h2>Design Trade Program</h2>
<p>
Qualified interior decorators, designers, stylists and architects can enjoy an exclusive 20% discount on full-priced merchandise with no minimum purchase.
</p>
<p>
Want to join? Please fill in the below details and we will follow up with you directly within one to two business days. Additional services are available to design professionals depending on your location.</div>
</div>
</body>
hi ,this code its ok for normal window but when show on tablet or mobile its not good,i want first show header then first-section finally second-second when use mobile,how i can use true show when show this code in mobile(worked responsive)
thanks
.flex-container {
display: flex;
justify-content: center;
/* background-color: DodgerBlue; */
flex-wrap: wrap;
}
.flex-container > div {
/* background-color: #f1f1f1;*/
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
#first-section{
width: 30%;
}
#second-section{
width: 60%;
margin-top: -200px;
background: white
}
#media screen and (min-width: 320px) and (max-width: 1024px) {
#first-section{
flex: 0 0 100%;
}
#second-section{
flex: 0 0 100%;
margin-top: -200px;
background: white
}
}
one way is to use percent not the pixel values and I think the negative values won't work in margin.
for this, you can use media queriesin CSS.
For example, for showing the content on your website on mobile, I would do:
#media (min-width: 320px) and (max-width: 767px) {
.flex-container { flex-flow: column; }
.flex-container > div { width: 100% }
.second-section { margin-top: 10px }
}
To also cover the tablet size, just change (max-width: 767px) to (max-width: 1024px) and the sections will stack on tablet as well.
So, your full CSS would be:
.flex-container {
display: flex;
justify-content: center;
/*background-color: DodgerBlue;*/
}
.flex-container > div {
/* background-color: #f1f1f1;*/
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
#first-section{
width: 30%;
}
#second-section{
width: 60%;
margin-top: -200px;
background: white
}
#media (min-width: 320px) and (max-width: 767px) {
.flex-container { flex-flow: column; }
.flex-container > div { width: 100% }
.second-section { margin-top: 10px }
}
Here is a list of useful media queries for different devices: CSS Media Queries for Desktop, Tablet, Mobile
Please use below code in your style file.Hope so this gives your expected output for mobile or iPad.
#media screen and (max-width: 1279px) {
.flex-container {
flex-direction: column;
}
#first-section, #second-section {
width: 100%;
}
}
I am trying to make a page responsive using the media query min-width. I used the two breakpoints, #media only screen and(min-width: 320px) to display some styles, but the other rule for the other breakpoint is conflicting and overiding the other that is #media only screen and (min-width: 998px).
See the code i used
#media only screen and (min-width: 320px) {
.header {
display: flex;
flex-direction: column;
height: 100px;
background-color: black;
}
.xpand {
padding-top: 30px;
}
.searchBar {
width: 25%;
}
}
#media only screen and (min-width:990px) {
.header {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;s
flex-direction: row;
-webkit-flex-direction: row;
-ms-flex-direction: row;
display: flex;
-webkt-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
}
#xpand {
display: none;
}
#brand {
padding-top: 12px;
padding-left: 25px;
}
.navBar {
padding-top: 35px;
padding-left: 25px;
margin-left: 16.66666666666667%;
}
.user {
padding-top: 35px;
padding-left:25px;
padding-right: 12px;
margin-left: 20%;
cursor: pointer;
}
.searchBar {
-webkt-flex: 1;
-ms-flex: 1;
flex: 1;
padding-top: 25px;
padding-right: 25px;
margin-left: auto;
}
}
I don't know if this is the right way to use the min-width, someone should please show me a way forward.
The order of the code is important in CSS, that means that if there's a duplicate rule, the first rule will be overridden by the second one, so keep this in mind when you apply styles over the same class in different places in your code.
min-width rules will be applied for each resolution higher than the pixels set, and max-width rules will be applied for each resolution below the pixels set.
You can do a combination of both: #media screen and (min-width: 320px) and (max-width: 900px). All the rules in this media query will be applied if the window is wider than 320px but not if it's above 900px.
You can combine your media query with (max-width) to refine it and avoid overlapping.
The problem is that both media-query rules are applied at the same time.
When the window has a width of 1000px both min-width-queries are accepted because 1000px > 320px and 1000px > 990px.
If you don't want this you could take a look at the max-width media query.
However, I got some code for you to play around with min-width:
<html>
<head>
<title>Mediaquery test</title>
<style>
.test_override {
background: red;
}
.medium, .large {
display: none;
}
#media (min-width: 500px) {
.medium {
display: block;
}
.test_override {
background-color: yellow;
}
}
#media (min-width: 900px) {
.large {
display: block;
}
.test_override {
background-color: green;
}
}
</style>
</head>
<body>
<div class="test_override">TEST</div>
<div class="medium">medium</div>
<div class="large">large</div>
</body>
</html>
You can see that on window sizes > 900px both divs (.medium and .large) are displayed.
You can override properties like I did for the background-color of the .test_override div. The order of the rules in the code does matter in this case.
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%;
}
}