Site logo

Archived topic

Sidebar size looks different in post and pages

25 replies · Started by Sebastian on January 18, 2021

Viewing posts 1–15 of 26

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!!!

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?

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

Are you looking for a fixed-width sidebar?

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.

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

No problem :)

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

Hi there,

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

Thank you David, here you have the link.

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?

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!

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;
}

This archived topic is closed to new replies.