1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Empty space on sidebar?

Discussion in 'HTML & Website Design' started by WonderingCoder, Jan 4, 2014.

  1. #1
    Hello,

    I have a website: http://www.101baseballnews.com and I have incorporate a new design into it.

    However, as you can see, on the right side of the website it is blank until you scroll down. How do I get rid of this empty space and make it so the sidebar is in coordination with the main section of the site?

    Thank you! I need this help urgent as I have clients coming to view the website in the morning. Please help!
     
    WonderingCoder, Jan 4, 2014 IP
  2. WonderingCoder

    WonderingCoder Greenhorn

    Messages:
    86
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    8
    #2
    Bump please help
     
    WonderingCoder, Jan 4, 2014 IP
  3. WonderingCoder

    WonderingCoder Greenhorn

    Messages:
    86
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    8
    #3
    anybody?
     
    WonderingCoder, Jan 4, 2014 IP
  4. competent123

    competent123 Notable Member

    Messages:
    1,743
    Likes Received:
    69
    Best Answers:
    6
    Trophy Points:
    255
    #4
    Have patience dear.

    reduce width of sidebar from 300px to 294px

    also the sidebar issue is just on one of resolution ( 1280 pixel) rest of the resolutions are fine.
     
    competent123, Jan 4, 2014 IP
  5. WonderingCoder

    WonderingCoder Greenhorn

    Messages:
    86
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    8
    #5
    Thank you so much for the reply. however, I changed it to 294px and it's still not working for me. Is it working for you? Could you please attach a screenshot maybe? How can I get it so it works on all sizes
     
    WonderingCoder, Jan 4, 2014 IP
  6. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #6
    There's a problem with the media queries. Change (line3589) to this:
    
    @media only screen and (max-width: 1099px) and (min-width: 998px) {
    #sidebar-wrapper {
    float: right;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    width: 260px;
    
    }
    }
    
    Code (markup):
    Remove the duplicate on line 2511. Once you have updated that let me know and I will have another look ( I can't update media queries in Google Developer Tools).
     
    HuggyStudios, Jan 4, 2014 IP
  7. WonderingCoder

    WonderingCoder Greenhorn

    Messages:
    86
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    8
    #7
    Thank you, it's working now, however, there's a large gap between the main and sidebar.

    See below.

    I tried changing the padding to 10px, then 5px.. didn't help. Thoughts? (i highlighted the gap with pen)
     

    Attached Files:

    WonderingCoder, Jan 4, 2014 IP
  8. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #8
    The issue is because of the content wrapper being too large and these set widths for the side bar. The layout should be setting the main content to say %65-70 and then the side bar the remainder. That way you don't need so many break points. You need to look up on media queries: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

    I don't have the time to get this 100% fixed for you but this code should help you enough to get it fixed.

    Add this code to your CSS and it will make it slightly better for you. Also remove all of the code duplication your setting the sidebar about 3 times with the same rules.
    
    @media (min-width:1200px) {
        #sidebar-wrapper{
            padding-left: 0;
            padding-right: 0;
            padding-top: 15px;
            width: 310px;
        }
    }
    @media(max-width: 1200px) {
        #sidebar-wrapper{
            padding-left: 0;
            padding-right: 0;
            padding-top: 15px;
            width:278px;       
        }
    }
    
    Code (markup):
     
    HuggyStudios, Jan 4, 2014 IP
  9. WonderingCoder

    WonderingCoder Greenhorn

    Messages:
    86
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    8
    #9
    where do i add that code
     
    WonderingCoder, Jan 4, 2014 IP
  10. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #10
    At the bottom of your stylesheet.
     
    HuggyStudios, Jan 5, 2014 IP
  11. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #11
    The best way to do it when you have a main content column and a sidebar is to give a width to the sidebar, float it, and give the main content a hidden overflow. Giving them both a width in % is not such a good idea. That being said, you lack containers where you need them, and have way to many where you don't need a single.

    Peeking under the hood, I see a portion of ramen noodles: a DIV-SPAN soup with no logical order. Presentation and content are tangled together to the point where you can't differentiate them from one another, but hey -- isn't that what HTML5 is all about?

    And seriously, telling this to the user with JS off:
    "You Should enable JavaScript For Access This Site"

    You have completely missed the point of the HTML and internet. Now I'm asking myself why do you even bother with media queries?
     
    wiicker95, Jan 5, 2014 IP
  12. John Michael

    John Michael Member

    Messages:
    154
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #12
    there are alot of error in your website when you see it in small screen.
    You need to fix you sidebar width in percentage.
    First one is you include two time top menu in your website. You need to include once your top menu.
    Second is your image become strach when you see it in small screen.
    third on is that you silder is not working correctely.
     
    John Michael, Jan 7, 2014 IP