Fixing the Container Size

intellectiveidiot
(@intellectiveidiot)

5 years, 11 months ago

Hi,

I have resized the featured images to ‘medium’ and that is leaving excessive space in the container.

May I be so bold enough, to ask for a solution so that the container size can be reduced?

I have tried the container width option in the layout setting, but it is shrinking the sidebar as well. I only want to shrink the width of the blogpost containers only (not the sidebars)

I have tried the following code from the support forum, but no avail.

`.single .grid-container {
max-width: 1000px;
}

Please Help

The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)

Leo
(@leohsiang)

5 years, 11 months ago

Hi there,

Not sure if I fully understand the logic.

So you want to keep container width at 1060px, then reducing the content container width without reducing the sidebar?

Not sure how that would work?

Let me know if I”m missing something.

Thread Starter intellectiveidiot
(@intellectiveidiot)

5 years, 11 months ago

Hi Leo,

Please have a look at my website. It looks perfectly aligned in the mobile layout, but when accessed from laptop, there is clearly too much space left (I have shared the image highlighting the empty space that I would like to shrink)

Image of blank space

I have tried the container width option in the layout setting, but it is shrinking the sidebar as well. I only want to shrink the width of the blogpost containers only (not the sidebars)

Please help me out with this.
Theme Author Tom
(@edge22)

5 years, 11 months ago
Hi there,

You could try something like this:
```
@media (min-width: 769px) {
    .blog .site-content {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .blog .sidebar {
        width: 300px;
    }

    .blog .content-area {
        width: calc(100% - 300px);
    }
}
```
Thread Starter intellectiveidiot
(@intellectiveidiot)

5 years, 11 months ago

Thank you Tom!

The code worked like a charm. I would also like to shrink the container from the bottom, so that the empty space between the image and the end of the container is removed.

I am attaching an image highlighting the empty space from the bottom, that I would like to remove from my container.

Empty space image

Thank you!
Theme Author Tom
(@edge22)

5 years, 10 months ago
Give this CSS a shot:
```
.entry-summary, .entry-summary + .entry-meta {
    display: none;
}
```
Thread Starter intellectiveidiot
(@intellectiveidiot)

5 years, 10 months ago

Perfect man!

Unfortunately, there’s an issue with my featured images as well. They seem to be coming out of the container.

I got this code from the support forum, but it’s not working for me.

`.post-image-above-header .inside-article .featured-image img {
width: 100%;
height: 300px;
-o-object-fit: cover;
object-fit: cover;
}

Please help me with this.

Leo
(@leohsiang)

5 years, 10 months ago

Have you fixed this?

I’m not seeing the images coming out of the container:
https://www.screencast.com/t/j7ecGl2bw

Thread Starter intellectiveidiot
(@intellectiveidiot)

5 years, 10 months ago

Hi Leo,

The issue is not fixed. The problem of images out of container is only reflected in the pages and not on posts.

I know it is strange. I have highlighted the pages in which the image is coming out of the container. Please help me with this.

Image Link

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Fixing the Container Size’ is closed to new replies.

Tags