[Support request] Mobile View Issues

[Justin]

I’m having 2 issues with mobile view of the homepage (which is also the blog page). Using the Volume template from site library. On mobile there is a significant gap at the top. It also seems to zoom in on the image quite a bit, cropping out the text in the image. I have a screenshot I took on my phone if it helps.

Thank you for any help.

[David]

Hi there,

in Appearance Elements there is Header element that is assigned to the blog and the front page, which isn’t in use as theres no image assigned to it.

You can remove this element or Quick Edit and Save as Draft in case you want to add a header there in the future.

[Justin]

Looks like it took a few inches out of the gap but it’s still there as well as the odd zoom in on the featured image of the most recent blog post that crops out the text in the image.

Just for reference, I did the Quick Edit and save as draft method.

[David]

So there is padding in the Site Header – you can reduce the bottom padding for mobile in Customizer > Layout > Padding – make sure your in the mobile responsive view.

Likewise you also have the Padding in Customizer > Layout > Container, same as the Site header but reduce the top padding.

To fix the image then go to Customizer > Additional CSS and look for:

.blog .post-image img, .archive .post-image img, .search .post-image img {
    width: 100%;
    height: 500px;
    -o-object-fit: cover;
    object-fit: cover;
}

You can reduce the height: 500px; to 300px or delete that property.

[Justin]

I’ll try it this evening. Just wanted to say the support with this theme is amazing. Thank you for taking the time to help.

[David]

You’re welcome 🙂

[Author]

Posts