CODEWITHSUNDEEP
csswordpressmedia-queriesmediaresponsive
RMurphy
RMurphy

Reputation: 21

Media Queries won't work for my Wordpress theme's site logo

I am using a WordPress theme called Spacious. I have set a site logo but I can't seem to make the logo responsive. The logo only responds to certain media queries, but none for mobile screen sizes.

I changed the site logo's location from the center below the header to over the header to the left. I think that this may be the issue but I'm not sure. Am I doing something wrong? How can I go about making my logo responsive? The link to my site is: davenport.ryannemurphy.com. The CSS code I am using for the logo is below:

@media only screen and (max-width: 600px) {
.custom-logo {margin-top: 25px;
position: absolute;}

@media only screen and (max-width: 768px) {.header-image {height: 100px;}


.custom-logo {width: 50%;
margin-top: -20px;
}
}


@media only screen and (max-width: 900px) {


.custom-logo {width: 50%;
position: relative;}
}

@media only screen and (max-width: 1100px){

.custom-logo {width: 50%;
margin-top: -20px;
position: relative;
}


}


@media only screen and (max-width: 1500px){.custom-logo{margin-left: 100px;}}

@media only screen and (max-width: 1650px){.custom-logo {margin: 30px; }}

@media only screen (min-width: 1651px) and (max-width: 1850px){.custom-logo {width: 90%;}}


@media only screen and (max-width: 1950px){
.custom-logo {margin-left: -100px;
margin-top: -98px;
position: absolute;}
}

Upvotes: 2

Views: 206

Answers (3)

Sam
Sam

Reputation: 5627

I was having the same problem in Sinatra theme. I ended up using just width and height but I had to put !important after each.

Here is the css I used:

@media screen and (max-width: 960px) {
    img[itemprop="logo"] {
        width: 281px !important;
        height: 145px !important;
    }
}

Upvotes: 1

Bridget Arrington
Bridget Arrington

Reputation: 444

You have an < img width="450" height="92" .../> hardcoded into your html. I think you need to remove the height and width attributes on the img tag.

Upvotes: 0

Tomer Shay
Tomer Shay

Reputation: 801

I believe you're missing a closing bracket ("}") in line 3 in the CSS you attached.

Use an online CSS formatter (for example, https://www.cleancss.com/css-beautify/) to format your CSS code and you'll see that most of your media queries are actually below the first one in hierarchy because of that missing curly bracket.

Not sure this is causing the issue, but it's definitely something that can confuse the browsers and cause bugs.

Upvotes: 2

Related Questions