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

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

Home Forums Support image elements do not have explicit width and height

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #1927414
    liza

    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.

    #1927428
    Elvin
    Staff
    Customer Support

    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. 😀

    A wise man once said:
    "Have you cleared your cache?"

    #1928231
    liza

    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

    #1928236
    Elvin
    Staff
    Customer Support

    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. 😀

    A wise man once said:
    "Have you cleared your cache?"

    #1929475
    liza

    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

    #1929659
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1929802
    liza

    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.

    #1930826
    Elvin
    Staff
    Customer Support

    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. 😀

    A wise man once said:
    "Have you cleared your cache?"

    #1930834
    liza

    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

    #1930867
    Elvin
    Staff
    Customer Support

    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

    A wise man once said:
    "Have you cleared your cache?"

    #1930869
    liza

    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…

    #1930872
    Elvin
    Staff
    Customer Support

    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;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1930884
    liza

    Vin

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

    #1930897
    Elvin
    Staff
    Customer Support

    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?

    A wise man once said:
    "Have you cleared your cache?"

    #1930901
    liza

    Hi, Vin

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

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.