Andy

[Andy]

You have a plugin “WP-Copyright-Protection” that may be stopping Google from caching your images and/or stylesheet, and also a caching plugin that may doing the same.

It is not an issue with the theme, and I would recommend asking for help from the creators of the plugins.

[Andy]

When I view your website, it looks fine to me. The page title looks okay, and the image title I see no issue with them.

I also looked at the Google cache, and it also looks fine to me. I cannot see any issues so I’m not sure how to help.

Can you attach as screenshot showing the issue please?

[Andy]

Yes, it is because some posts have more content than others, and as the box of each post in the same row is the same height, the spacing is like this so that the content starts at the top of the box, and the last piece of content ends at the bottom of the box.

You can change this to make all the empty space be displayed at the end of the last piece of content.
Add this code to ‘Customize’ > ‘Additional CSS’:

#grid-loop article,
#main.infinite-grid .infinite-wrap article {
    justify-content: normal;
}

Or if you prefer the empty space at the beginning, use this code instead:

#grid-loop article,
#main.infinite-grid .infinite-wrap article {
    justify-content: end;
}

[Andy]

Copy this code to ‘Customize’ > ‘Additional CSS’:

body:not(.home) .entry-header.with-image,
body:not(.home) .archive-header.with-image {
    display: none;
}

That will hide the image header area everywhere but the homepage.

[Andy]

The “Caption Sub Title” setting will allow HTML markup, so you could add your image/link there.

[Andy]

The header image displays the page’s “Featured Image” if that page has a featured image.

In the page editor, add/upload an image as the “Featured Image” for that page.

In the customizer – ‘Customize’ > ‘Appearance’ > ‘Header Image’ – make sure the “Pages should display…” setting is set to the “Featured Image” option, and not the “Default Header Image” option.

[Andy]

It looks like you have made some changes to the header layout in your child theme, but not changed it so the logo can go bigger than the standard area it is allocated.

Try adding this CSS also:

@media only screen and (min-width: 1025px) {
    #masthead > .container {
        grid-template-columns: 100%;
    }
}

[Andy]

Copy this code to ‘Customize’ > ‘Additional CSS’

#masthead .top-account,
#masthead .top-cart {
    display: none;
}

[Andy]

When you upload a logo, the ‘Crop Image’ option is not mandatory. You can click ‘Skip Cropping’ and the image will not be cropped.

[Andy]

Thanks.

I tried the CSS I suggested and it does work.

I can also see you’re targeting .site-content (this is same element as #content) in your child theme with all round padding of 2em, so you may want to use this instead:

.site-content {
    padding-top: 2em !important;
}

[Andy]

I think a theme option to turn off the sticky header would be a good idea for the next theme update. We’ll get that added.

[Andy]

That CSS should work. Would you be able to let me know your page URL and I’ll take look.

The extra padding is javascript calculated as the height of your header to make the sticky header scrolling more seamless on the transparent header page template.

[Andy]

Thank you for the update. Glad to hear you got it sorted, I completely missed the no scrolling variable.

[Andy]

Hi, did you find out what was causing this?

[Andy]

For two per row, use this CSS code:

@media only screen and (max-width: 480px) {
    .woocommerce ul.products.columns-2,
    .woocommerce-page ul.products.columns-2,
    .woocommerce ul.products.columns-3,
    .woocommerce-page ul.products.columns-3,
    .woocommerce ul.products.columns-4,
    .woocommerce-page ul.products.columns-4,
    .woocommerce ul.products.columns-5,
    .woocommerce-page ul.products.columns-5,
    .woocommerce ul.products.columns-6,
    .woocommerce-page ul.products.columns-6,
    .woocommerce ul.products.columns-7,
    .woocommerce-page ul.products.columns-7,
    .woocommerce ul.products.columns-8,
    .woocommerce-page ul.products.columns-8,
    .wc-block-grid.has-2-columns .wc-block-grid__products,
    .wc-block-grid.has-3-columns .wc-block-grid__products,
    .wc-block-grid.has-4-columns .wc-block-grid__products,
    .wc-block-grid.has-5-columns .wc-block-grid__products,
    .wc-block-grid.has-6-columns .wc-block-grid__products,
    .wc-block-grid.has-7-columns .wc-block-grid__products,
    .wc-block-grid.has-8-columns .wc-block-grid__products {
        grid-template-columns: repeat(2,48.5%);
    }
}

For three per row use this:

@media only screen and (max-width: 768px) {
    .woocommerce ul.products.columns-2,
    .woocommerce-page ul.products.columns-2,
    .woocommerce ul.products.columns-3,
    .woocommerce-page ul.products.columns-3,
    .woocommerce ul.products.columns-4,
    .woocommerce-page ul.products.columns-4,
    .woocommerce ul.products.columns-5,
    .woocommerce-page ul.products.columns-5,
    .woocommerce ul.products.columns-6,
    .woocommerce-page ul.products.columns-6,
    .woocommerce ul.products.columns-7,
    .woocommerce-page ul.products.columns-7,
    .woocommerce ul.products.columns-8,
    .woocommerce-page ul.products.columns-8,
    .wc-block-grid.has-2-columns .wc-block-grid__products,
    .wc-block-grid.has-3-columns .wc-block-grid__products,
    .wc-block-grid.has-4-columns .wc-block-grid__products,
    .wc-block-grid.has-5-columns .wc-block-grid__products,
    .wc-block-grid.has-6-columns .wc-block-grid__products,
    .wc-block-grid.has-7-columns .wc-block-grid__products,
    .wc-block-grid.has-8-columns .wc-block-grid__products {
        grid-template-columns: repeat(3,31.33%);
    }
}

Copy the code to ‘Customize’ > ‘Additional CSS’ and hit publish button to save.

[Author]

Posts