-1

all -

I do not have the greatest CSS skills in the world, but I can normally figure things out. Right now I'm trying to implement a fairly simple media query in the child theme of my Wordpress site. I don't know if I typed something wrong or made another mistake, but the media query rules don't even show up when I inspect my page. Can anyone help?

This is the page: http://www.thousandgirlsinitiative.org/

And these are the rules that I've tried to implement:

@media screen and (max-device-width: 479px) {

.sow-slider-base ul.sow-slider-images li.sow-slider-image.sow-slider-image-cover {      

background-image:url ("http://www.thousandgirlsinitiative.org/wp-content/uploads/2016/04/Wendy-mobile.jpg") !important; }

#why-sponsor-homepage { padding: 20px; }

}

Basically I want to use a different hero image in the top row and decrease the padding on the "Why Sponsor?" row when the screen is narrower than 480px.

I had written the query with "max-width" instead of "max-device-width" at first and it didn't work either, so that is not the problem.

Any help would be very appreciated!

closed as off-topic by Michael, birgire, Mayeenul Islam, kaiser Apr 5 '16 at 9:49

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

1

I think I may have the solution below :)

Try adding this to your CSS file:

@media screen and (max-width: 479px) {
    .sow-slider-base ul.sow-slider-images li.sow-slider-image.sow-slider-image-cover {
        background-image: url('http://www.thousandgirlsinitiative.org/wp-content/uploads/2016/04/Wendy-mobile.jpg') !important;
    }
    #why-sponsor-homepage {
        padding: 20px;
    }
}

All I have done here is removed the space between url and the link of the image and it seems to work like a charm when I added the CSS via Google Developer Tool.

  • Thank you! I actually think my problem may have been double quotes around the url instead of single quotes. Oops. – Courtney Smalley Apr 7 '16 at 15:53
  • Nope it would not of been that, as you are allowed double quotes around the link - the problem was with the space between the irl and the link - if this solved your problem don't forget to accept it as the answer :) – Stephen Apr 7 '16 at 16:01
0

The problem is due you having the styles associated to the element style property:

<li class="sow-slider-image sow-slider-image-cover cycle-slide cycle-slide-active" style="height: 700px; position: absolute; top: 0px; left: 0px; z-index: 99; opacity: 1; display: block; visibility: visible; background-image: url(&quot;http://www.thousandgirlsinitiative.org/wp-content/uploads/2016/03/homepage-banner-1.jpg&quot;); background-color: rgb(51, 51, 51);">

Try move that style to a CSS class. Then you will be capable of switch the background image used.

Not the answer you're looking for? Browse other questions tagged or ask your own question.