0
#container {
    width: 75%;
    float: right;
}

If I change the width to %100 it affects the entire site, i just want the homepage to be at 100% width and all other pages with sidebar 75%

1

This is more a CSS than a WordPress question, but

There are several ways to do this, but I think this is the easiest. WordPress themes should use the home class on the body tag and the site content area has a class of site-content, so to set the primary content area to full width, use:

.home .site-content {
  width: 100%;
}

You'll have to hide the sidebars too. If you want to hide all of them:

.sidebar {
  display: none;
}

If you're using WordPress 4.7+, you can easily add CSS via the Customizer->Additional CSS.

0

Give the div an id

HTML

<div id="whatever"> stuff in your div </div>

and then change it to 100% in your CSS file:

CSS

#whatever { width:100%; }

Only that div with that ID will be affected.

0

This problem can be solved with wordpress function like is_home() function is use to check whether current page is home page or not. You can use this function to apply css only on home page.

There are two ways for it

I am assuming you want to increase width of calss .container.

  1. In your head section of your header.php use function like this

     <head>
          <?php if(is_home()){ ?>
        <style>
               .container{width:100%!important;}
        </style>
      <?php } ?>
    </head>
    

Above function in head section will do the trick and I have put !important with css property so it will overtake other property of this class. This style tag css will be apply only on home page because of is_home() function.

  1. The other way of doing this is inside body tag. For example this is the div whose width you want to change

    <div class="container"> 
    //content....
    </div>
    

You can put condition on this div like this

<?php if(is_home()){ ?>
 <div class="container" style="width:100%!important;"> 
 <?php } else { ?>
 <div class="container"> 
 <?php } ?>
//content....
</div>

In above way I have directly put condition on div itself(only on beginning part of div not on closing part). So div with style attribure will be call on home page only and other div will be called on rest of the pages.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.