[Resolved] Sidebar size looks different in post and pages

[Sebastian]

Hi! I created a sidebar using the feature “elements” of GP; it displays on some pages. Today I edited the layout to make the sidebar display also on all the posts. But, the sidebar look narrower on the post, and I want it to look the same as the pages.

I tried to edit the “content width” of the blog post width layout element, but I didn’t work. Also, I edited the sidebar padding and margin but also couldn’t fix it. My knowledge is limited so those were the only two solutions I could have thought.

Thanks!!!

[Leo]

Hi there,

All the pages I clicked from the menu item have the full width content container layout set:
https://docs.generatepress.com/article/content-container/#full-width

It is likely from a layout element:
https://docs.generatepress.com/article/layout-element-overview/#content-1

Is that intended?

[Sebastian]

Hi Leo, thank you for you answer.

I tried to change the configurations of the sidebar layout element, for example, I changed content area from default to full width, also I change the content width below with many px values but it doesnt fix the problem.

Do you have any other ideas?

[Leo]

The sidebar width is a percentage of the content container width.

Are you looking for a fixed-width sidebar?

[Sebastian]

Thank you for your reply!

Is it possible to make a fixed-width sidebar?

Or perhaps, Is it possible to add padding to the post if I change the content area to full width? I ask you this because when I change before to full with, the sidebar looked good but there wasn´t padding or margins around the content, so I had to change the content area to default again.

[Leo]

Fixed width sidebar requires this CSS:
https://docs.generatepress.com/article/sidebar-widths/#fixed-width

[Sebastian]

It worked perfectly! Thank you Leo, sorry for the inconvinience.

[Leo]

No problem 🙂

[Sebastian]

Hi, I’m sorry for bothering again. Please can you help me? I want to hide the sidebar on mobile.
I searched on the forum, and I find this code to do that.

@media (max-width: 768px) {
#right-sidebar {
display: none;
}
}

But, I didn´t work.

Thank you for your help 🙂

[David]

Hi there,

can you share a link to where i can see the issue ?

[Sebastian]

Thank you David, here you have the link.

[David]

Correct the other topic issue here:

https://generatepress.com/forums/topic/customize-author-box/page/2/#post-1643165

As that will stop other CSS below it from working.

[Sebastian]

Thank David, I corrected the other issue but the widgets of the right side bar are still showing on mobile.
Is there a way to hide them on mobile?

[Ying]

Hi Sebastian,

I checked you site, I don’t see the CSS has been added yet.
Do you have cache plugin? If so could you deactivate the cache plugin and clear cache to see if it works.

If still not, could you share all the CSS you added?
Thanks!

[Sebastian]

Hi Ying, I don’t have a CSS plugin.

This is all the CSS I have added until now.

p.justify{
text-align:justify;
}

/* lato-regular – latin */
@font-face {
font-family: ‘Lato’;
font-style: normal;
font-weight: 400;
src: local(”),
url(‘https://bienestaryciencia.com/wp-content/uploads/2021/02/lato-v17-latin-regular.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘https://bienestaryciencia.com/wp-content/uploads/2021/02/lato-v17-latin-regular.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* lato-italic – latin */
@font-face {
font-family: ‘Lato’;
font-style: italic;
font-weight: 400;
src: local(”),
url(‘https://bienestaryciencia.com/wp-content/uploads/2021/02/lato-v17-latin-italic.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘https://bienestaryciencia.com/wp-content/uploads/2021/02/lato-v17-latin-italic.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* lato-900 – latin */
@font-face {
font-family: ‘Lato’;
font-style: normal;
font-weight: 900;
src: local(”),
url(‘https://bienestaryciencia.com/wp-content/uploads/2021/02/lato-v17-latin-900.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘https://bienestaryciencia.com/wp-content/uploads/2021/02/lato-v17-latin-900.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* lato-900italic – latin */
@font-face {
font-family: ‘Lato’;
font-style: italic;
font-weight: 900;
src: local(”),
url(‘https://bienestaryciencia.com/wp-content/uploads/2021/02/lato-v17-latin-900italic.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘https://bienestaryciencia.com/wp-content/uploads/2021/02/lato-v17-latin-900italic.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@media (min-width: 769px) {
#right-sidebar {
width: 350px;
}
.inside-right-sidebar {
padding-right: 20px;
}
body:not(.no-sidebar) #primary {
width: calc(100% – 350px);
}
}
/* Add padding and background to box */
.author-box {
padding: 40px;
text-align: center;
background-color: #f6f6f6;
}
/* Avatar Border Radius */
.author-box .avatar img {
border-radius: 100%;
}
/* Style author title */
.author-box .author-title {
font-weight: 900;
margin-bottom: 0.5em
}
/* Remove space below description */
.author-box .author-description {
margin-bottom: 0;
}

[Author]

Posts