So I have an element that I want to change at 750px and 500px:
.footer-logo img {
content:url(...);
}
and then:
#media only screen and (max-width: 700px) {
.footer-logo img{
margin-top: -58px !important;
padding:64px;
}
}
#media only screen and (max-width: 500px) {
.footer-logo img {
width: 80vw !important;
max-width:none !important;
margin-top:-10px !important;
}
The 500px changes happen but the changes when testing at 700px do not happen. I know I shouldn't be using !important so much but the styling just won't happen without it... Any help is appreciated
You can Try This. please check div Color changes According to media query
HTML
<div class="footer-logo">
<img src="http://dummyimage.com/100x50/000/fff&text=Throbble!">
</div>
CSS
#media only screen and (max-width: 700px) {
.footer-logo > img{
margin-top: -58px !important;
padding:64px;
}
.footer-logo {
background-color:yellow;
}
}
#media only screen and (max-width: 500px) {
.footer-logo > img {
width: 80px !important;
max-width:none !important;
margin-top:-10px !important;
}
.footer-logo {
background-color:red;
}
}
Related
I have two divs with IDs #div1 and #div2.
I want to:
show #div1 if width >= 900px OR height >= 500px
show #div2 otherwise, i.e. width < 900px OR height < 500px
How can I achieve this with media queries?
I have tried the following, but it is not working:
#media (max-width: 900px), (max-height: 500px) {
#div1 {
display: block !important;
}
#div2 {
display: none !important;
}
}
#media (min-width: 901px), (min-height: 501px) {
#div1 {
display: none !important;
}
#div2 {
display: block !important;
}
}
What am I doing wrong?
It is because it is the other way arround:
width >= 900px translate to min-width: 900px
height >= 500px translate to min-height: 500px
width < 900px translate to max-width: 899px
height < 500px translate to max-height: 499px
As mention in the comment in your case you don't need 2 media queries
#div1 {
display: none !important;
}
#div2 {
display: block !important;
}
#media (min-width: 900px), (min-height: 500px) {
#div1 {
display: block !important;
}
#div2 {
display: none !important;
}
}
#div1 {
display: block !important;
}
#div2 {
display: none !important;
}
#media (max-width: 900px), (max-height: 500px) {
#div1 {
display: none !important;
}
#div2 {
display: block !important;
}
}
You only need one inside a media query
#div1 {
display: none !important;
}
#div2 {
display: block !important;
}
#media (min-width: 900px or min-height: 500px) {
#div1 {
display: block !important;
}
#div2 {
display: none !important;
}
}
You also don't do an OR that way. see my changes above.
I added the following custom CSS to my wordpress theme to change the location of the menu on the mobile version of the site:
#media (max-width: 767px) {
.mob-nav {
top: 25% !important;
}
I then added this code to adjust the margins on the logo for the full desktop version of the website:
#media (min-width: 992px) {
.right-menu .logo img {
margin-top: -15px !important;
}
#media (min-width: 768px) {
.right-menu .logo img {
margin-bottom: -5px !important;
}
When I added the second bit of code it overwrites the CSS I added for the menu. I know they're conflicting somehow but I'm not sure how to fix it.
Thanks
Try this:
#media (max-width: 767px) .mob-nav { top: 50% !important; }
#media (min-width: 992px)
{
.right-menu .logo img
{
margin-top: -15px !important;
}
}
#media (min-width: 768px)
{ .right-menu .logo img
{
margin-top:0px !important;
margin-bottom: -5px !important;
}
}
I got it working, I change the top portion of your code to:
#media (max-width: 767px)
{
.mob-nav
{
top: 25% !important;
}
}
I guess it was missing a { before .mob-nav
Thanks for the help!
So I am trying to make my website responsive, but when I target screens larger than 1600px the css is not working. Do I have any typo in my css code? Thank you.
#media (max-width:900px) and (min-width:600px) {
ul.news li {
width: 100%;
margin-top: 3px;
}
}
#media (max-width:1250px) and (min-width:900px) {
ul.news li {
width: 100%;
margin-top: 3px;
}
}
/* THIS ONE IS NOT WORKING */
#media only screen and (min-width: 1600px) and (max-width: 2600px) {
ul.news li {
width: 100%!important;
color: red!important;
}
}
You can refer to this Media Query and write your css in this media query dimensions
/*=====Media Query Css Start======*/
#media all and (max-width:1920px){
}
#media all and (max-width:1600px){
}
#media all and (max-width:1366px){
}
#media all and (max-width:1280px){
}
#media all and (max-width:1024px){
}
#media all and (max-width:960px){
}
#media screen and (max-width:767px){
}
#media screen and (max-width:480px){
}
/*=====Media Query Css End======*/
I'm creating a responsive page using CSS Media Queries. I can see in Chrome's developer tools that the media queries are working, however, they are not overriding my default styles. For example, take these styles:
#hero .text {
margin: 150px;
}
#media all (max-width: 1024px) and (min-width: 1px) {
#hero .text {
margin: 80px;
}
}
In my browser, if I resize to 1024px wide, I can see that the all the above styles are being requested BUT the default style (with margin 150px) is what is finally used.
ANy idea what I'm doing wrong?
change this
#media all (max-width: 1024px) and (min-width: 1px) {
#hero .text {
margin: 80px;
}
}
to
#media screen and (max-width: 1024px) {
#hero .text {
margin: 80px;
}
}
and
#media screen and (min-width: 1024px) {
#hero .text {
margin: 80px;
}
}
and this one below,
.text { /*removed #test */
margin: 150px;
}
My query was about my wordpress site womensfertility n hormones. c o m
if I view the site on a smaller screen with resolution like 1024 x 768
the site would look like this:
but if I view it on my normal computer screen with big resolution it looks good,
then if I scale it to iphone and ipad it would scale normal as it is responsive. I'm using optimizepress. I've just added a code to make the site boxed layout and to have a background image instead of full width. my code that I've added was:
.banner .logo img{width:200px}
.banner.centered-banner > .fixed-width .banner-logo {
width: 100%;
}
.container {
margin: auto;
overflow: hidden;
padding: 0;
position: relative;
width: 75%;
}
I guess the width: 75%; and the .banner .logo img { width: 200px; } makes the site looks that way, but I have no idea how to make the site look like boxed without doing that code. Any idea?
use CSS Media Queries
#media (max-width: 600px) {
/*code for screen with max with 600px*/
}
#media (max-width: 480px) {
/*code for screen with max with 480px*/
}
or:
body { color: white; background: gray; font-size: .5in }
#media screen and (min-width: 1024px){
body { background: red; }
}
#media screen and (min-width: 641px) and (max-width: 1023px){
body { background: yellow; }
}
#media screen and (max-width: 640px){
body { background: green; }
}
for example :
#media (max-width: 480px) {
.banner .logo img{width:140px}
.banner.centered-banner > .fixed-width .banner-logo {
width: 80%;
}
.container {
width: 35%;
}
}