Mobile styling for just two items?

HTML & CSS
1

Hi there… Please visit the site below. The type top elements with the city scape and ‘callout section’ just below… I would like to write some CSS that only effects those elements.

http://sembratlaw.com

spefically having a hard time getting the .sembratwelcome section to not show the background image. Here is the css for the mobile site:

.sembratwelcome {
background-image:none;
background-size: 1px 1px;
}

2

edit: nevermind still having issue

3

On line 156 of the HTML page, you will probably want to change the height setting applied to .sembratwelcome from {height:300px} to {min-height:300px}. That should help something.

To disable the background-image in .sembratwelcome, it looks like you’ll need to code the appropriate media query to say .sembratwelcome {background:none;}.

Which stylesheet has the media queries on it?

4

Thanks for the reply ronpat.

The stylesheet I am editing is located at http://sembratlaw.com/wp-content/themes/elemin/media-queries.css

Seems like the following chunk of css isn’t working to remove the background :frowning:

.sembratwelcome {
background:none;
min-height:300px
}

5

Hi, noslenwerd.

Two things.
(1) Unless you know of something that has escaped me, line 157 on the HTML page is the one that should be changed from {height:300px} to {min-height:300px}. There should be no need for an entry in the media query.
(2) Cascade and specificity. The CSS on the HTML page follows the CSS in the stylesheets. To make the CSS in a stylesheet override CSS on the HTML page, you have to give the code on the stylesheet more specificity or add !important to the stylesheet property like this (line 205): {background:none !important;}

That should fix you up :slight_smile:

6

Great… thank you very much!! The !important trick did it.
I have been working with CSS for years and years and never knew that trick.

Thanks again