Sidebar Size Issue

Hi there,

the sidebar widgets have Padding on them, which will reduce the size of their contents.

If you can share a link to a page where i can see the issue i can take a look at what can be done.

Hey David, that would be great!

See my latest post:

https://www.redpillrebellion.com/time-management-for-digital-nomads/

Check the sidebar. For example, the "Buy me a coffee" logo is quite small. I removed some landing page images there because they were way too small. Hopefully, we can resolve this.

Thanks so much for the support!

Regards,

Ron

You have this CSS in the Customizer > Additional CSS:

.inside-right-sidebar .widget_media_image img {
    width: 150px;
    margin-right: auto;
    margin-left: auto;
    display: block;
    object-fit: cover;
}

If you remove that CSS then you will see the images will fill the space available to them.

There may be some widgets that are a HTML widget that won't resize or a image widget where the original image is not wide enough to fill the space. If thats the case then we can provide some CSS to force them ... let me know.

Hey David:

Thanks so much, that seemed to have worked. My only question is, I'd still like certain images a bit bigger. Are the images confined by the theme's predetermined sidebar width? If I want them bigger, how would I increase the sidebar area?

Thanks again!

Regards,

Ron

Thats correct the images, can't be any larger then the sidebar width ( well they can but it just messes up your layout ), and they sit inside the Sidebar Widget padding.

One thing you can do is to remove the padding from the individual widgets with some CSS. Heres one method of doing that:

#right-sidebar .inside-right-sidebar *:nth-child(3) {
    padding: 10px 0;
}

This will target the 3rd element in the right sidebar ie. the "Earn Money from Content Creation" Image.

And if you wanted to target other elements the you can string the selectors like so:

#right-sidebar .inside-right-sidebar *:nth-child(3),
#right-sidebar .inside-right-sidebar *:nth-child(4) {
    padding: 10px 0;
}

This will target the 3rd and 4th elements.

Hi David:

This is really helpful. I'm assuming this would be placed in the same area where I removed the original code? In the Customizer > Additional CSS area? Is that right?

Reagrds,

Ron

Ok I figured it out, last question (I swear): How do I get the height to take the same form as the Greek flag that's just below it? Ideally, I'd like to change the flag to the image size and vice versa. Of course, I can't seem to figure it out. I'm assuming this has to do with the height now, is that right?

Reagrds,

Ron

Hi Ronald,

Do you mean you want these 2 images to be the same height?
https://www.screencast.com/t/R9TMfuKIcjeV

If so, it's better edit the image themselves, they have different aspect ratio, using CSS to alter their height will lose the aspect ratio and look stretched.

Let me know if I didn't understand correctly :)

Hi Ying:

I want to switch the size of both of these images. I'd like to make the flag the size of the landing page image and the landing page image the size of the flag. I checked the initial dimensions of the images and I feel as though there is something that I can do within WP to fix it. If it's as simple as resizing the image and uploading, that's great. I'm just not sure that's the case.

Any advice?

Regards,

Ron

If it’s as simple as resizing the image and uploading, that’s great

Yes. You just need to make sure the aspect ratio of these images are switched, then upload the new images. It should achieve what you are looking for.

Okay great, that worked. Thanks so much!

Regards,

Ron

No problem :)