Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #31228
    Wendy
    Guest

    Hi

    I removed the call to action button superimposed on the main background banner image in Hydra, but this has resulted in rather less of the image showing than I would prefer. Please can you tell me the id/class I should use to increase the spacing and whether it’s margin/padding or min-height I should use?

    #31232
    Jesse Owens
    Keymaster

    Hi Wendy-

    With the call-to-action missing, the main place that the image spacing comes from is the margin-top on the div.entry-content element. So you can target that with a CSS rule like this:

    div.entry-content {
    	margin-top: 300px;
    }
    

    You might also want to consider using a screen size media query on this, because that rule will also affect the mobile view. So if you’d like to go a little smaller for small devices, try something like this (adjust the pixel values according to what looks best for your image):

    div.entry-content {
    	margin-top: 250px;
    }
    @media only screen and (min-width: 992px) {
    div.entry-content {
    	margin-top: 350px;
    }
    }
    
    #31260
    Wendy
    Guest

    Awesome! Thanks. Will this affect all pages or just the home page?

    #31266
    Jesse Owens
    Keymaster

    Hi Wendy-

    As written above, this will affect all of the pages. You can add the class “home” to the rule if you’d like it to only affect the homepage, like so:

    .home div.entry-content { ... }
    
    #31268
    Wendy
    Guest

    Great! Thank you. This is really coming together now. One more niggly question … how do I remove the 20px (or so) padding/margin at the start of the container div?

    #31289
    Jesse Owens
    Keymaster

    Hi Wendy-

    I think what you’re seeing is the 25px padding on the top of the entry-content div, so you can target that with a rule like this:

    div.entry-content { padding-top: 0px; }
    
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Increasing home page banner image spacing in Hydra’ is closed to new replies.