Media Queries

Question

I'm working on a site for a client (http://ljestateplanning.com/how-we-are-different/) and I am trying to get the sidebar optin to look right on mobile devices. Right now, it looks off.

I took your media querie course which was very helpful but I am not clear on how to get the optin to work correctly.

I would prefer to use a different background image for the optin so that a small image shows at the top and then the optin inputs can show below it. When I try to add in the url of the new background image, it doesn't work.

The class that is called out is "sidebar optin wrapper". When I add "background: transparent;" the original background disappears. But when I add in the new image url code below that, it doesn't display.

Here is the code that I tried to add: background :url (http://ljestateplanning.com/wp-content/uploads/2016/03/lj_estate_planning_mobile_optin.png);

Can anyone give me some pointers? I would greatly appreciate it! :)

Joe

Answer 1 · 2016-03-31T00:47:11Z

March 31, 2016 12:47am

I'll start off by saying that using an image as a background to an element that contains content to be read by the user isn't really something you should be doing. First of all it makes it that much harder to get the content to be crawlable as well as accessible considering you would need to add the content in text form as something like aria-label or alt attributes (check up on what to use if thats the way you want to go). Secondly, it is impossible to style the content in the image. If that were just plain text over the actual image elements as a background, then the text could be easily resized via a media query, instead of having to load and display a different image file.

now, as to your current issue, the background image used for the sidebar when the viewport is above 1024px is inserted via the style attribute on the div.sidebar-optin-wrapper element. The style attribute wins the battle of specificity for css selection when put up against a selection such as this in your stylesheet:

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

    .sidebar-optin-wrapper {

        background: ur(http://ljestateplanning.com/wp-content/uploads/2016/03/lj_estate_planning_mobile_optin.png);
    }
}

Basically, an inline style is always going to override a simple class selector. To override inline styles from the stylesheet alone you have to add [style] on the end of the selector and then add !important flags to the values of the properties you wish to change. so in your case, you would want to try this:

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

    .sidebar-optin-wrapper[style] {

        background: ur(http://ljestateplanning.com/wp-content/uploads/2016/03/lj_estate_planning_mobile_optin.png) !important;
    }
}

This should work and solve your issue.

I would finally caution you on using links to images uploaded through the WordPress media manager without using WordPress functions to generate that URL. All it takes is for WordPress, for some reason, to restructure those URLs and suddenly any path that you have hardcoded will be broken. If you can, any images you wish to include via the stylesheet should be included as an asset in the theme, or child theme if in use. Since the theme always lives in wp-content/themes, you can hardcode paths without worry of anything outside of your control altering those paths.

Welcome to the Treehouse Community

Looking to learn something new?

Joseph Sherrod

Joseph Sherrod

Media Queries

1 Answer

Brian Hayes

Brian Hayes