Width of primary sidebar vs. widgets

Can you please post a link to your site? Thanks.

Ok.

https://www.artesecontextos.com

Thank you.

Hi CrouchingBruin,

Can’t you help me?

Hi, Rui:

Not yet, I’m still working on it. It looks like you’ve made some changes to the CSS to make the left sidebar wider, and it’s throwing off the rest of the CSS. Unfortunately Twenty Fourteen is kind of strange in the way it sets the widths and margins to make everything fit.

Add this to the very end of your child theme’s style.css file:

#secondary {
   background-color: #000;
   width: 100%;
}

@media screen and (min-width: 1008px)
{
   #secondary {
      width: 260px;
   }
   .site-content {
      margin-left: 322px;
      margin-right: 253px;
   }
   #content-sidebar {
      width: 253px !important;
   }
}

Thank you.

You are right. I did some changes and when I tried to correct them had lost control. ??
Now it is almost perfect, but could you take a look in the bottom of the page? Is something wrong.

Thank you again.

Add this inside the media query that I gave you. The flexbox properties will stretch the sidebar all the way down to the bottom:

.site-main
{
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row
   flex-direction: row;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
}

I put it like that:

#secondary {
background-color: #000;
width: 100%;
}

@media screen and (min-width: 1008px)
{
#secondary {
width: 260px;
}
.site-content {
margin-left: 322px;
margin-right: 253px;
}
#content-sidebar {
width: 253px !important;
.site-main
{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row
flex-direction: row;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
}
}

And doesn’t change nothing.

OK, it’s working fine, the sidebar is now stretching all the way down to the bottom. But maybe I didn’t understand what you meant when you said that something is wrong with the bottom. What exactly is wrong with the bottom?

Sorry but I don’t see it stretching all the way down to the bottom.
From the existing QR code on the page to the end, does not stretch neither on the short screen, or the largest.

My mistake, you do have a syntax error in your CSS. Change this:

#content-sidebar {
width: 253px !important;
.site-main
{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row
flex-direction: row;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
}
}

to this:

#content-sidebar {
width: 253px !important;
}
.site-main
{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
}

That is, you placed the flex CSS inside the CSS for #content-sidebar and it needs to be moved outside of it, but still inside the media query. Also, I left a semicolon off the first word row, so you need to add it.

No, sorry.
I made it and both sidebars moved to the left. The primary moved out of the screen and the contente sidebar moved over the text.
I replaced it as it was before that change.

Now is ok.
I have found an error. It was:

@media screen and (min-width: 1080px) {
.site:before {
width: 270px;

and changed it to this:

@media screen and (min-width: 1080px) {
.site:before {
width: 324px;

Thank you very mucha for your wisdom and for your patience.

Best regards,
Rui

Excuse me CrouchingBruin so I do not want to abuse your goodwill, but could you give me just on more little help?

If I really want to reduce the primary sidebar width, what should I do?

Thank you again,
Rui

When you say the “primary” sidebar, you are referring to the one on the left? Because the left sidebar has an ID of secondary and the right sidebar has an ID of content-sidebar. And how narrow do you want to make it?

Currently, the left sidebar has an overall width of 320px (260px for the content width plus 30px of padding on each side. So you would need to adjust two values in the CSS that I gave you plus one other value for the :before value that you found previously.

Let’s say that you want to make the overall width 280px (i.e., reduce the width by 40px) and you want to leave the padding at 30px. Then you would change these rules:

@media screen and (min-width: 1080px) {
   .site:before {
      width: 324px;
   }
}

#secondary {
   width: 260px;
}
.site-content {
   margin-left: 322px;
   margin-right: 253px;
}

to this:

@media screen and (min-width: 1080px) {
   .site:before {
      width: 284px;
   }
}

#secondary {
   width: 220px;
}
.site-content {
   margin-left: 282px;
   margin-right: 253px;
}

So, to make the left sidebar 40px narrower, you would decrease the width of the .site:before, the margin-left of .site-content, and the width of #secondary by 40px.