CSS Question on setting width when selectors are identical?

Resolved nwwoman
(@nwwoman)

10 years, 10 months ago

I’ve been digging into the Edin theme and have a question that I’ve been unsuccessful in googling an answer.

In the Edin theme’s style.css, I’m seeing:

/* Layout */
.has-custom-background #page {
width: 600px;

/* Layout */
.has-custom-background #page {
width: 768px;

/* Layout */
.has-custom-background #page {
width: 1020px;

/* Layout */
.has-custom-background #page {
width: 1230px;

How are the widths associated with a file when the Id and Class are the same in each provided example?

I left out the close brackets but they are, of course, present.

Feeling dumb right now…

Viewing 3 replies - 1 through 3 (of 3 total)

Moderator Kathryn Presner
(@zoonini)

10 years, 10 months ago
Good question! Some of those CSS declarations are within media queries, so they apply to particular screen sizes. This is how responsive themes work, so they can adapt automatically to different devices, from phones all the way through desktop monitors.

For example, the first declaration you mention is within a media query that restricts it to screens that a minimum of 600px wide:
```
@media screen and (min-width: 600px) {

  .has-custom-background #page {
    width: 600px;
   }

}
```
I’ve omitted all the other declarations within that same media query, for clarity.

You can learn more about using media queries that target certain screen sizes here:

http://en.support.wordpress.com/custom-design/custom-css-media-queries/
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
Thread Starter nwwoman
(@nwwoman)

10 years, 10 months ago

I understand media queries of course. But now I see what I did — I went back up to the first comment field that preceeded the code and in my haste didn’t note that comment was a sub of the media query. Headed to functions to see if there was a call doing the job. I work in Drupal predominately so I’m just rushing through this customization of a wordpress’r. A Duh day for me! More coffee..and you’ll never know my name. :-))

Rats now I gotta tell StackExchange folks that were puzzling over this, too. Oh boy. Sometimes one just has to be a dingbat to get the ego in check.

Thanks!!

Moderator Kathryn Presner
(@zoonini)

10 years, 10 months ago

My pleasure!

Not a dingbat at all, by the way, and welcome to WordPress, glad to have you here!. 🙂

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘CSS Question on setting width when selectors are identical?’ is closed to new replies.

Tags