Empty space on sidebar?

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!

 

Bump please help

 

anybody?

 

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.

 

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

 

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).

 

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)

 

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):

 

where do i add that code

 

At the bottom of your stylesheet.

 

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?

 

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.