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.
Related
I have made a responsive navbar with html, css and basic js, that changes according to the width of the screen.
Although the code works perfectly and the navbar is responsive while resizing the window (that i preview my code to), when I test it with Google Chrome Inspect to see how it looks on other devices (phones, tablet, etc) it doesn't work, even though the width is smaller than the max-width i have set:
#media only screen and (max-width: 600px) {
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul {
flex-direction: column;
width: 100%;
}
.navbar-links li {
text-align: center;
}
.navbar-links li a {
padding: 0.75rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
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 have an ul element (one of three on the page) that I don't want to be shown on mobile devices. I'm trying to apply display: none; to it but it doesn't work.
The code isn't mine, I just used a template from the internet, so go easy on me, plz
Html part
<section id="banner" class="major">
<div class="inner">
<header class="major">
<h1>This the title</h1>
</header>
<div class="content">
<p> and some text here </p>
<ul class="actions">
<li>A button</li>
</ul>
</div>
</div>
</section>
What I have in CSS
ul.actions {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
cursor: default;
list-style: none;
margin-left: -1em;
padding-left: 0;
}
ul.actions li {
padding: 0 0 0 1em;
vertical-align: middle;
}
ul.actions.special {
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
width: 100%;
margin-left: 0;
}
ul.actions.special li:first-child {
padding-left: 0;
}
ul.actions.stacked {
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-left: 0;
}
ul.actions.stacked li {
padding: 1.3em 0 0 0;
}
ul.actions.stacked li:first-child {
padding-top: 0;
}
ul.actions.fit {
width: calc(100% + 1em);
}
ul.actions.fit li {
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
-ms-flex-shrink: 1;
flex-shrink: 1;
width: 100%;
}
ul.actions.fit li > * {
width: 100%;
}
ul.actions.fit.stacked {
width: 100%;
}
ul.actions are used for different buttons throughout the page: one that I showed you in the html part and two other buttons to fill out a form.
So, I'm adding this bit of code but it just won't work
#media screen and (max-width: 480px) {
#banner .actions {
display: none;
}
}
You have used this code in wrong CSS file.
Please use right approch:
Your mentioned URL have this CSS
https://html5up.net/uploads/demos/forty/assets/css/main.css
The media query #media screen and (max-width: 480px) is mentioned in this css. Please go there
Please use this bit of code in this media query
#banner .actions {
display: none;
}
The code seems to work fine, I am not sure if you opened the page on the mentioned browsers before doing some code editing. In that case, clearing the caches could help.
That code works fine.
If this is not work fine on you site It seems like any other declaration overriding this declarations.
When an important rule is used on a style declaration, this declaration overrides any other declarations.
Please use CSS rule with !important and check after Clear your cache.
#media screen and (max-width: 480px) {
#banner .actions {
display: none !important;
}
}
.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 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.