.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%;
}
}
Related
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.
I am trying to make my app responsive. The original css looks like this :
.footer-container {
width: 100%;
min-height: 260px;
height: auto;
background: black;
color: white;
display: flex;
justify-content: center;
flex-wrap: wrap;
position: absolute;
}
The output is this :
But when the screen width reaches 1020px i want them to be underneath eachother.
I tried making the display:flex display:block :
#media only screen and (max-width: 1020px) {
.footer-container {
width: 100%;
min-height: 260px;
height: auto;
background: black;
color: white;
display: block;
text-align: center;
justify-content: center;
position: absolute;
}
}
But that turns out like :
I also tried flex-direction: row but that didn't work either, it practically didnt change a single thing.
Using basic HTML below a solution using a media query. Mobile first and when the screen size exceeds 1024 pixels the media query kicks in.
.footer-container {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.contact,
.subscribe,
.follow {
width: 100%;
display: flex;
justify-content: center;
}
#media (min-width: 1024px) {
.footer-container {
flex-wrap: no-wrap;
justify-content: center;
}
.contact,
.subscribe,
.follow {
width: auto;
}
}
<div class="footer-container">
<div class="contact">Contact us</div>
<div class="subscribe">Subscribe</div>
<div class="follow">Follow us</div>
</div>
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.
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 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.