www.webdeveloper.com
Results 1 to 3 of 3

Thread: Having issues with heights and backgrounds in box model

  1. #1
    Join Date
    Jun 2013
    Posts
    38

    Having issues with heights and backgrounds in box model

    My site www.bebraveinfertilityjourney.com is behaving oddly.

    I originally tried to get my sidebar to extend all the way down to the bottom of the page, which i why I started setting all my divs to "height= 100%". It didn't work, so I fixed it instead, which freezes the sidebar so it scrolls with you. I'm okay with this solution, but now there is a strange white background that only goes halfway down the page. If you can see, it stops right around the beginning of the next post.

    I want the background of the article to be white, but it should only be about 10 pixels out on either side of the text itself. The top portion is much wider. Any ideas on what is causing this?

    For your information, I am using a child theme to edit the twenty fourteen theme in wordpress. Thanks for your help!

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    873
    I'll try to make this as simple as possible, but it looks like there are a number of changes that need to be made in order to get your desired result.

    Starting with the changes that hold the biggest visual effect, you'll need to modify two classes: .site and .hentry
    First, with the .site class, you'll just need to remove the background-color that is being set.
    Next with the .hentry class you'll need to make a few changes:
    Code:
    .hentry {
    	width: 810px;
    	max-width: 100%;
    	height: 100%;
    	margin: 0 auto;
    }
    This will get you close, but there are still a few tweaks to make so that everything looks a little better.
    Remove the margin-top property from .masthead-fixed .site-main and .article
    Remove the padding-top property from .list-view .site-content .hentry:first-of-type, .list-view .site-content .hentry.has-post-thumbnail

    That might be it, but I guess it'll depend on what you think once the changes are made. There are some adjustments with padding that could probably be made since a little space was lost.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Jun 2013
    Posts
    38
    When I redefined the .site background-color, it fixed it. It looks exactly like I want it.

    But I always like to clean up my code. Can you explain what you're suggesting above? and what it would do for me?

    Thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles