I've read a few forums but I must be missing something. I'm basically just trying to have certain things in my CSS work for certain pages. Basically I wanted to change the homepage to be full width for the pictures.
My CSS in my child theme was this.
.site-content,
.fl-builder.home .page-section,
.front-page-widgets,
.breadcrumbs {
width: 1640px;
max-width: 100%;
margin: 0 auto;
}
.site-footer-area {
width: 1640px;
max-width: 80%;
margin: 0 auto;
}
Problem is now on all my pages since the max-width is 100% everything is touching the edge of the screen. I only wanted this for the home page. I inspected the home page and from this
<body id="top" class="admin-bar home is-singular logged-in page page-id-481 page-template page-template-_fullwidth page-template-page-template page-template-page-template_fullwidth-php customize-support">
I'm assuming my page-id is 481 for the home page.
Whats the best method to fix this so the rest of my pages are normal?
3 个答案:
答案 0 :(得分：1)
you can use .home or page-id-481 as parent
.home your_selector{
max-width: 100%;
}
or
.page-id-481 your_selector{
max-width: 100%;
}
答案 1 :(得分：0)
You need to prepend each of your home-related css selectors with .home, e.g.:
.home .site-content,
.home .page-section,
.home .front-page-widgets,
.home .breadcrumbs {
width: 1640px;
max-width: 100%;
margin: 0 auto;
}
So if you have a css rule added to several selectors listed one after the other, you have to add .home as many times.
答案 2 :(得分：0)
When you have your different template files in your wordpress theme, make one named front-page.php and set the width of this page to 100% while leaving your other theme files alone.
such as
<div class="home-width">
My home page
</div>
CSS:
.home-width {
width: 100%;
}
Wordpress automatically looks for certain named pages for different things and in the Customize menu you can still decide what you want your front page to be. It also gives you complete freedom to choose the layout of your homepage while keeping the rest organized as a blog or whatever else layout you want for the site.