[Resolved] image elements do not have explicit width and height

[liz]

Hi,

I may be using different image sizes, but I set the default image size to medium. Nevertheless, Google still insists that my image elements do not have explicit width and height which is affecting the website speed.

I’m not tech-savvy, so if you don’t mind, please explain to me in simple terms how I can go about this… Thank you. Link to the site is in the private info field.

[Elvin]

Hi liza,

I see you’re using WPSP’s image height and width field. That causes the issue.

I suggest keeping these fields empty. We’re planning on removing this field completely on the next official release. The current WPSP alpha version actually removed this already.

If you need to set the image size for WPSP lists, consider doing it through CSS instead. 😀

[liz]

Hi,

My GP premium is updated, how come I don’t have the current WPSP alpha version? By the way, I don’t know how to set the image size using CSS..sorry I’m not tech-savvy =(

Liz

[Elvin]

how come I don’t have the current WPSP alpha version?

It’s a separate product. 🙂 and alpha versions are not recommended for live sites. (but its up to you if you want to use)

By the way, I don’t know how to set the image size using CSS..sorry I’m not tech-savvy

I can help you out with the write-up. Let me know once you’ve emptied the image height and width fields on WPSP and provide what size you want them to be. 😀

[liz]

Hi Elvin,

I have already emptied the height and width fields. The following are my preferred image sizes.

first image below magazine grid 450×450
standard 600 x300
align 450×450 – this image is not aligning properly compared to the rest
of the images. Please help me fix it.
parenting category 450×450
under play category – 400×20

Thanks

[Elvin]

You can try playing around with these values.

.wp-show-posts-image{
    overflow: hidden;
}

 .wp-show-posts-image img {
    width: 100%;
    height: 100%;
}

/* WPSP below grid */
section#wpsp-18219 .wp-show-posts-image {
    width: 450px;
    height: 450px;
}

/*  */

section#wpsp-1275 .wp-show-posts-image {
    width: 600px;
    height: 300px;
}

section#wpsp-1279 .wp-show-posts-image {
    width: 600px;
    height: 300px;
}

section#wpsp-18246 .wp-show-posts-image {
    width: 600px;
    height: 300px;
}

/* WPSP Play */
section#wpsp-19246 .wp-show-posts-image {
    width: 100%;
    height: 300px;
}

/* WPSP Archive */
section#wpsp-19925 .wp-show-posts-image {
    width: 100%;
    height: 200px;
}

As for wpsp-1279’s alignment, make sure you add column gutter to it on its WPSP edit page.

[liz]

Hi,

Thank you, but the images are not properly positioned on mobile. Also, the texts are pressed right up to the right-hand side of the image in the align section…I already added a column gutter but it did not make any difference…The images on mobile occupy the whole width of the screen..I would want to see some white space on both sides of the images to make the site easy on the eyes.Thanks.

[Elvin]

Also, the texts are pressed right up to the right-hand side of the image in the align section

Not exactly sure I understand what you mean by this. Can you provide a screenshot of whish WPSP list you’re pertaining to?

And if possible provide a mockup image of how you want it to be laid out on mobile. 🙂

I would want to see some white space on both sides of the images to make the site easy on the eyes.Thanks.

For this, you’ll have to increase the padding on Appearance > Customize > Layout > Container on mobile to 30px so you can see a white space on the sides. 😀

[liz]

Hi,

This happened after I input the codes you provided last time to solve the problem with images that have no explicit width and height. That has been resolved, however, it resulted to alignment issue on mobile as the images are not centered.

Also,there is no space between the image and the excerpts in the align section [only on desktop}. The link to the website is in the private info field so u can see how the images look like on mobile. Sorry I dnt know how to share images here…

Google is sending me error message concerning the images on mobile

[Elvin]

If you want to center the images on mobile you can try adding this CSS:

@media (max-width:768px){
.wp-show-posts-image.wpsp-image-center {
    margin: 0 auto;
}
}

Also,there is no space between the image and the excerpts in the align section [only on desktop}. The link to the website is in the private info field so u can see how the images look like on mobile. Sorry I dnt know how to share images here…

There are 2 lists on the page w/o label. I’m not exactly sure which one of them are you pertaining to as “align” section.

Can you specify which list is the “align section”?

As for sharing of image, read more about it here – https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

[liz]

Hi, Elvin

The image I’m referring to is the one with the title ” boredom in marriage” that’s the one…

I have already put the codes you provided but some of the images are still not centered on mobile…

[Elvin]

The image I’m referring to is the one with the title ” boredom in marriage” that’s the one…

You can either copy the exact setting of the list below it. (the one with spoiled child syndrome)

Or,

Add this for the spacing:

section#wpsp-1279 .wp-show-posts-image {
    margin-right: 1.5em;
}

[liz]

Vin

Everything is okay now, except for a few misaligned images on mobile… some of the images are still not centered.

[Elvin]

Not sure which one is misaligned.

Here’s what I see on my end – https://share.getcloudapp.com/DOuBJWzk

Are you saying you want the horizontal displayed list to stack vertically instead for mobile?

[liz]

Hi, Vin

Please scroll further down …you will see that some images are not centered

[Author]

Posts