Stretched Image

  • Resolved powerrangersnow

    (@powerrangersnow)


    7 years, 10 months ago

    Hi,

    How come images in posts on my website are stretching to meet the size of the page? See below. (Link if needed)

    The only code I have added is this one below, to try to fix the squished images on mobile in the Homepage Main Post Grids (also seen below). Any help would be appreciated, on fixing both issues.

    .entry-content img {
width: 100%;
height: 100%;
}

.entry-content iframe {
width: 100%;
height: 100%;
}

.featured_image img {
width: 100%;
height: 100%;
}

.single .featured_image {
text-align: center;
}
.featured_image img{
height: auto !important;
max-width:100%;
}

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author Qaiser

    (@kais99)

    Hi
    You are using a slider which is not part of the theme.
    Also you are adding CSS without even knowing what it would do.
    last, your images are very small, try to upload larger images in slider.

    To fix, add below in your css file.

    
body div.slideshow-window * img{
width:auto; 
height:auto;
}

    All other images are responsive.

    Thanks,
    Qaiser

    Thread Starter powerrangersnow

    (@powerrangersnow)

    Hi,

    I don’t think the issue is the slider because, as you can see below, even when I post the image with no slider, it still stretches to fit the size of the page.

    And also, still no resolution to fix the squished images on mobile in the Homepage Main Post Grids (seen below):

    Theme Author Qaiser

    (@kais99)

    As I mentioned, you are using very small images like below one is just 204 X 671

    https://i1.wp.com/www.powerrangersnow.com/wp-content/uploads/2017/01/3rd.png?fit=204%2C671&ssl=1

    So if you don’t have large images you shouldn’t make them 100% width. Please add code below at the very end of your css file.

    
body .entry-content img {
width: auto;
height:auto;
max-width:100%;
max-height:100%;
}

body .featured_image img {
width: auto;
height:auto;
max-width:100%;
max-height:100%;
}

    Let me know if you still have any issues.

    Thanks,
    Qaiser

    Thread Starter powerrangersnow

    (@powerrangersnow)

    Hi,

    The images being squished on mobile in the Homepage Main Post Grids issue still persists. Is there a code or fix I can make to prevent this from happening, 100% of the time?

    Thread Starter powerrangersnow

    (@powerrangersnow)

    Hi,

    I have successfully been able to resolve all the issues. The only one still standing in the way is the squished images on mobile (seen below). Please, do you have any way to fix this? I would be incredibly thankful.

    Thread Starter powerrangersnow

    (@powerrangersnow)

    Hi everyone,

    Someone else had to help me fix this issue. If anyone else is having it, here is the solution.

    In the Appearance > Customizer > Additional CSS, add this code:

    img {
    max-width: 100%;
    height: auto;
    }

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Stretched Image’ is closed to new replies.