Feature image is showing Bigger in phone

  • Jaskaran Singh

    (@coldsamosa)


    2 years ago

    Hello there,

    I am using Generate press theme Pro version. This is my first blog post and I got stuck at feature image. I chose different sizes (I don’t even remember) and created images in canva. But the image isn’t showing properly on website neither phone or desktop. On desktop, the image was not showing properly; Sometimes bigger, sometimes multiple repeated images. on the other hand, image was showing almost alway bigger on mobile.

    Now I have two questions-

    What is the recommend size of feature image?

    What can I do to show my image properly on mobile?

    But is there anything wrong that I am missing as I am creating a feature image by myself for the first time? Please let me know.

    Thank you for advance

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

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

  • In WordPress dashboard Please go to Appearance->Customize->Additional CSS option then paste that code

    @media(min-width:501px){
    .gb-inside-container{
    padding: 120px 0px 0px;
    }
    }

    @media(max-width:500px){
    .gb-inside-container{
    padding: 50px 0px 0px;
    }
    }

    .gb-container{
    background-size: cover;
    }

    if not work then put like that please

    @media(min-width:501px){
    .gb-inside-container{
    padding: 120px 0px 0px !important;
    }
    }

    @media(max-width:500px){
    .gb-inside-container{
    padding: 50px 0px 0px !important;
    }
    }

    .gb-container{
    background-size: cover !important;
    }

    Thread Starter Jaskaran Singh

    (@coldsamosa)

    Thanks for your reply. Although, may you tell me what is the recommend size for creating a feature image? And, can I use canva to create this image,?

    you want to put a featured image in a banner also like https://coldsamosa.com/upcoming-web-series/ so for you 2500*300 pixels i think good

    Gaurav Negi

    (@gaurav213)

    Hello this is Gaurav Negi

    The recommended size for a featured image can vary depending on the specific platform or website where it will be displayed. However, a common guideline is to use an image with a minimum width of 1200 pixels and a height that is proportional to the width (usually around 600–900 pixels). This size is often used as a standard by popular blogging platforms such as WordPress and Medium. To show your image properly on mobile devices, it’s important to consider the aspect ratio of the image and how it will appear on smaller screens. One option is to use responsive design techniques, which automatically adjust the size and layout of the image based on the screen size of the device. This can be accomplished using CSS media queries or responsive image techniques such as the “srcset” attribute or “picture” element in HTML.

    Lets try it, I hope it will help you.

    Thanks

    Thread Starter Jaskaran Singh

    (@coldsamosa)

    I used Nimbus screenshot extension to know my homepage width and height and it works. It was around 1500 px *400px. Although, the image isn’t showing any good on phone.

    I used media queries method as Muhammad Jawad Abbasi told here.

    @jawad1234 Muhammad Jawad Abbasi, Sir, thanks for your help but it didn’t work. I tried to do some customisation but still not worked. It makes image kinda longer and the author and title element got messed up badly.

    And, @gaurav213 I didn’t do media queries before otherwise it seems one of the ideal way.

    I think I have to hire a developer for this ??

    Still thanks a lot you both.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Feature image is showing Bigger in phone’ is closed to new replies.