Adjusting the CSS for a sidebar in a responsive website so it is not so wide. Leaving more room for the main page content.

Hello CSS Experts.

I have a web page that has a left sidebar that is "too wide".   It takes up too much horizontal real estate on the page.

Here's the page  Website link

I need the left side bar to be "narrower""  (looking at the source HTML and  css it appears to be 25%)  And the content to the right of it to be able to take up the rest of the  newly available real estate/  ( looking at the source html and css it appears to be "three-quarters".)

Since this site uses some kind of a grid, I need to do this correctly, which is why I am asking the question here.  

For example, I'd like the left sidebar to be about 15 percent  and right "content"side to be 85 percent -- making it all 100 percent.
page-margin grid collection-sidebar
All of the above appears to be controlled by a class called "page-margin grid collection-sidebar:   But I am not 100 percent certain.  

Needless to say I only  want the content in the page-margin grid collection-sidebar affected by this change  I don't want to change any overall grid settings that might be used elsewhere on the site.

Thanks for any help!

Rowby
LVL 9
Rowby GorenAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Paul MacDonaldDirector, Information SystemsCommented:
Link doesn't work when I test it.
Rowby GorenAuthor Commented:
Sorry. Paul

Use this link instead  Better link
Paul MacDonaldDirector, Information SystemsCommented:
The 15% / 85% thing seems to work okay.

A way to handle this would be to copy the .large---one-quarter and .large---three-quarters classes.  Rename the copies as something else (large---one-seventh, large---six-sevenths, etc) and modify those classes for 15% and 85%.  Then, replace the one-quarter and three-quarters classes with the new ones.  This will leave the old classes available for other pages where they're appropriate, but let you change the page you're working on.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Rowby GorenAuthor Commented:
Hi Paul,

That makes sense and I see what you are talking about,

I will be working on this on Friday and get back here with the .results

Best

Rowby
Julian HansenCommented:
You already have classes
.large--one-sixth

Open in new window

and
.large--five-sixths

Open in new window

Defined in your stylesheet (but no sevenths) I would use what you have already got

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rowby GorenAuthor Commented:
Hi Julian.   I’ll see if I can try that.  

Sounds good.

Rowby
Rowby GorenAuthor Commented:
I must say this modified awards interface is not very good
 
"I have my answer" should be "Award points".   "I have my answer" looked to me like I have my own answer.   I hope someone can fix this.

Also I wanted to award some point to Paul but couldn't find a way to do that.  I prefer the old method of awarding points.

Thanks!  I  used Julian's answer, but Pau's answer was also helpful.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.