I have 2 media queries as below!
#media screen and (max-width: 800px){
.rightlist{
margin-top: 0px !important;
}
}
#media (max-width: 1000px) and (min-width: 801px){
.rightlist{
margin-top: -10px !important;
}
}
When both media queries together the above query is overriding the below one. Is there someone who know the fix for this? Thank you for your help!
Just use this , this css will be applied for screen up to 1000px but as soon as you will hit 800px your previous media query will be apply
#media (max-width: 1000px){
.rightlist{
margin-top: -10px !important;
}
}
Related
I have got interesting question with media queries.
Example as below:
.card {
padding: 25px;
margin-bottom: 15px;
width: 300px;
border: 1px solid red;
**--- 1st media query**
#media only screen and (min-width: 1024px) and (max-width:
1360px) and (max-height: 768px) {
padding: 10px;
margin-bottom: 15px;
}
#media only screen and (min-width: 1660px) {
/* Here I am not going to mention the rule for padding - but
wanted */
margin-bottom: 15px;
}
}
Expected :
So media query runs for screens between 1024 to 1360 and override the padding and margin-bottom rules
After that for bigger screen more than 1660px the margin-bottom rule is going to applied but the padding bottom is still from the previous media query but not from default card class css rule
How to make sure the "padding:25px" rule is applied to all screens except the first media query.
I'm using latest wordpress and builduppro themes.
Currently, I use logo size 90px for desktop, tablet and mobile.
I want logo size 90px for desktop only.
How can I decrease logo size into 60px(30%) for tablet and 40px(50%) for mobile?
website : http://logo.ayumall.com
I'm not a programmer and can't find any WP plugin to solve this problem.
Will appreciate any feedback.
I just edited on style.css but no luck.
#media screen and (max-width:768px)
{
.logo
{padding-top: 10px !important; text-align: left !important;}
}
Currently my Responsive.css :
/* Mobile Portrait View */
#media screen and (max-width:767px) {
.logo{ width:auto; float:none; text-align:center; padding:0;}}
/* Tablet View */
#media screen and (min-width:768px) and (max-width: 980px){
.logo{ float:none; text-align:left; width:auto;}}
#media screen and (max-width:1169px) and (min-width:981px) {
.logo{ float:left; width:auto}}
#media screen and (max-width: 980px){
.logo img{ height:auto;}}
the opening bracket is missing in your code after ".logo"
#media screen and (max-width:768px)
{
.logo
{
padding-top: 10px !important; text-align: left !important;}
}
Checked your website.
You can achieve this by CSS. Put the following code in your stylesheet.
/* For Tablets */
#media screen and (max-width: 768px){
.logo img{height: 60px;}
}
/* For Mobile */
#media screen and (max-width: 480px){
.logo img{height: 40px;}
}
Make sure to remove your cache after making these changes to css.
Hope it helps.
I am working on media queries for my site.
I created media queries for 1024 x 768 screen size, and it works well. I created a media query for 1360 x 768 screen size also, but it's not working. Here is what I've got so far:
#media (min-width: 992px) and (max-width: 1199px) {
#loginrow {
padding: 135px 0;
}
}
#media (max-width: 1360px) {
#loginrow {
padding: 135px 0;
}
}
Can anyone suggest how this can be correctly?
Just use min-widths, when you hit the higher resolution your queries will override what came before it.
#media (min-width: 992px) and (max-width: 1199px){ #loginrow{ padding: 135px 0; } }
#media (min-width: 1360px){ #loginrow{ padding: 135px 0; } }
I'm trying to make my coded buttons for pdfs/mp3s/mp4s not stack on each other in a asymmetrical way when the browser is faced with a different screen size. For example, when the screen size changes from large desktops approximately 1200px wide to tablet res of 1024px to 768px (landscape/portrait), the buttons stack on each other in a way that looks inefficient/unintended. See for yourself:
http://www.mannachurch.org/portfolio-type/insights-from-the-bottom-bunk/
Try moving the browser to something that would fit a 13 inch or a tablet and you get what I mean. This is just for the buttons, everything else looks fine.
I'm trying to resolve this issue using this media query code on that wordpress site in my header.php file:
/* iPhones ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px){
a .btn .pull-left {
margin: auto 0 !important;
display:inline-block;
}
a .btn .pull-right{
margin: auto 0 !important;
display:inline-block;
}
}
#media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
a .btn .pull-left {
margin: auto 0 !important;
display:inline-block;
}
a .btn .pull-right{
margin: auto 0 !important;
display:inline-block;
}
}
#media all and (min-width: 250px) and (max-width: 400px) {
a .btn .pull-left {
margin: auto 0 !important;
display:inline-block;
}
a .btn .pull-right{
margin: auto 0 !important;
display:inline-block;
}
}
/* iPad in landscape----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
a .btn .pull-left {
margin: auto 0 !important;
display:inline-block;
}
a .btn .pull-right{
margin: auto 0 !important;
display:inline-block;
}
}
/* iPad in portrait----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){
a .btn .pull-left {
margin: auto 0 !important;
display:inline-block;
}
a .btn .pull-right{
margin: auto 0 !important;
display:inline-block;
}
}
/*Larger screens -----------*/
#media only screen and (min-width : 1024px) and (max-width: 1224px) {
a .btn .pull-left {
margin: auto 0 !important;
display:inline-block;
}
a .btn .pull-right{
margin: auto 0 !important;
display:inline-block;
}
}
It will not make those buttons do anything different!!
What am I doing wrong? Wordpress is frustrating enough because it's layered with an endless piles of CSS files. But I'm strugging to see why I can't grab these and make them work with media queries. I'm pretty sure my declarations are correct. Any suggestions?
Omit spaces in your CSS declarations like this a.btn.pull-left.
All wordpress themes come with their own style.css file. Instead of putting css in a php file (header.php), you should edit the .css file. Your button overrides should work there.
Most themes also have their own custom css field in theme options as well if you do not feel comfortable editing style.css in the editor. It's the same thing though.
totally new to media queries and responsive design and I've fallen at the first hurdle.
I have the following:
#media only screen and (max-width: 100px) {
#wrap {
background: #F00;
}
}
#media only screen and (max-width: 500px) {
#wrap {
background: #224466;
}
}
And only the max-width: 500px works in that as I reduce the screen down it changes to the first colour, but as I reduce it further down to below 100px nothing else happens.
Where have I failed?
thanks
SOLUTION:
For anyone else with the same issue, here is the answer as provided by Sean Vieira.
The cascade still applies to active media queries so swapping them around resolves the issue) I also increased it from 100px as suggested by Roy Stanfield as the desktop browser might not go that small.
#media only screen and (max-width: 800px) {
#wrap {
background: #224466;
}
.entry-title {
font-size: 2em;
}
}
#media only screen and (max-width: 400px) {
#wrap {
background: #F00;
}
.entry-title {
font-size: 1em;
}
}
The cascade still applies to active media queries (if I understand it correctly). If you look at what you wrote without the media queries, the problem becomes more evident:
#wrap {
background: #F00;
}
#wrap {
background: #224466;
}
Switching the order should fix the problem:
#media only screen and (max-width: 500px) {
#wrap {
background: #224466;
}
}
#media only screen and (max-width: 100px) {
#wrap {
background: #F00;
}
}
If you are using a normal desktop browser you may not be able to make it smaller than 100px. Try increasing your test widths to larger sizes like 500px and 1000px.
This is because of the ordering in the media queries in CSS.
Either change the order or
Try to put !important over
Use this one http://jsfiddle.net/fidrizers/8Pmuw/
Try using min-width in one of your queries, so it becomes:
#media only screen and (max-width: 100px) {
#wrap {
background: #F00;
}
}
#media only screen and (min-width: 101px) and (max-width: 500px) {
#wrap {
background: #224466;
}
}