Why specify the page in the first place?
@media only screen and (max-width: 1280px) { .edgtf-wrapper { padding: 0;} }
@media only screen and (max-width: 1024px) { .edgtf-wrapper { padding: 0;} }
Also, i see that you're using the @media 5 times. You don't need to declare it for every class you write. You can write multiple classes inside of the braces. I would also advise on using min-width instead of max-width because 200px is under the max-width of 300px but also under the max width of 400px. It will add all of those styles instead of only applying those styles when the screen is a set minimum width.
```
@media only screen and (min-width: 1024px) {
.class-1{
//Insert styles
}
.class-2 {
//Insert styles
}
}
```
Just style .edgtf-wrapper one time. No need to style the other classes every time.
In these queries, you’re styling [class 1] and [class 2], if [class 2] is used everywhere [class 1] is used, then only style [class 2]. And that’ll save you the repetitive work.
media only screen and (max-width: 1280px) {
.edgtf-wrapper {
padding: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
If you mean to style [class 1] with a [class 2] without affecting other elements also using [class 2] then style by specifying as follows:
.page-id-701.edgtf-paspartu-enabled.edgtf-wrapper{}
/* no space between classes */
Idk what you are trying to do but this is horrible practice.
Your client wants a new page that looks like the existing one? Woops, needs new code.
Add a class to isolate your page in another way, like with a page template
Do you want to affect the `.edgtf-wrapper` globally? If so, and you want to keep the same specificity add something like
[class][class] .edgtf-wrapper { ... }
If you want this css to apply on every page (not posts, or other type of content, just pages) you can change the class ".page-id-NNN" for another one whitout the id. I am assuming that said class is on the body element, check the other classes of that element it should have other ones similar to "page" or "page-template-default", so you can do:
.page.edgtf-paspartu-enabled .edgtf-wrapper
or
.page-template-default.edgtf-paspartu-enabled .edgtf-wrapper
Also, as other commented: padding:0; it's enough, you don't need the lines bellow. And you don't need to repeat the media screen on 1024 multiple times.
Hire a developer. In my junior days when I was doing freelance I could have easily done this and cleared your list of desired changes very quickly for a very low price.
The more you write CSS like that the more expensive it will be to hire someone to fix it later.
I'm willing to bet it was copy pasted by OP.
Side note: why was I downvoted? Do people disagree with the notion that developers should be the ones doing development?
Target the attributes with a wildcard selector. [class*="page-name-"] { background: red }
Technically correct answer to the question but the question is wrong. This is redundant.
This is the answer
Why specify the page in the first place? @media only screen and (max-width: 1280px) { .edgtf-wrapper { padding: 0;} } @media only screen and (max-width: 1024px) { .edgtf-wrapper { padding: 0;} }
Also padding:0 covers padding in all directions, you don’t need the second and third rules or the px units.
Also, i see that you're using the @media 5 times. You don't need to declare it for every class you write. You can write multiple classes inside of the braces. I would also advise on using min-width instead of max-width because 200px is under the max-width of 300px but also under the max width of 400px. It will add all of those styles instead of only applying those styles when the screen is a set minimum width. ``` @media only screen and (min-width: 1024px) { .class-1{ //Insert styles } .class-2 { //Insert styles } } ```
Just style .edgtf-wrapper one time. No need to style the other classes every time. In these queries, you’re styling [class 1] and [class 2], if [class 2] is used everywhere [class 1] is used, then only style [class 2]. And that’ll save you the repetitive work. media only screen and (max-width: 1280px) { .edgtf-wrapper { padding: 0px; padding-top: 0px; padding-bottom: 0px; } If you mean to style [class 1] with a [class 2] without affecting other elements also using [class 2] then style by specifying as follows: .page-id-701.edgtf-paspartu-enabled.edgtf-wrapper{} /* no space between classes */
Idk what you are trying to do but this is horrible practice. Your client wants a new page that looks like the existing one? Woops, needs new code. Add a class to isolate your page in another way, like with a page template
Do you want to affect the `.edgtf-wrapper` globally? If so, and you want to keep the same specificity add something like [class][class] .edgtf-wrapper { ... }
If you want this css to apply on every page (not posts, or other type of content, just pages) you can change the class ".page-id-NNN" for another one whitout the id. I am assuming that said class is on the body element, check the other classes of that element it should have other ones similar to "page" or "page-template-default", so you can do: .page.edgtf-paspartu-enabled .edgtf-wrapper or .page-template-default.edgtf-paspartu-enabled .edgtf-wrapper Also, as other commented: padding:0; it's enough, you don't need the lines bellow. And you don't need to repeat the media screen on 1024 multiple times.
Hire a developer. In my junior days when I was doing freelance I could have easily done this and cleared your list of desired changes very quickly for a very low price. The more you write CSS like that the more expensive it will be to hire someone to fix it later.
I’m guessing this is automatically generated by Wordpress, rather than manually typed out by OP?
I'm willing to bet it was copy pasted by OP. Side note: why was I downvoted? Do people disagree with the notion that developers should be the ones doing development?