Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Code Wizard Required! Reply To: Code Wizard Required!

#243005
martyd23
Participant

Hi Paulie,

I would like the images to get larger or smaller based on browser/device size without looking distorted (i.e., be responsive). The images should appear the same height as the image for “test post 6” and “test post 2”. The should fill the container div (.posts-blog-feed-module .header ? ) for the image like images 6 and 2.

I had the same problem with the images being a different height with the related post images on the bottom of each page. But i managed to fix this with css. This fix doesn’t seem to work on the homepage for some reason, and i’m wondering if i’m trying to style the wrong things?

The fix that worked for the image height problem with the related posts (fixed only on local test site) was:

.related-post .featured-image {
background: rgba(0, 0, 0, 0);
width: 100%;
margin: 0 0 10px 0;
line-height: 0;
position: relative;
overflow: hidden;
padding-bottom: 70%; /* here the desired aspect ratio */
}

.related-post .featured-image img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius: 8px;
height:100%;
width:100%;
}

I have tried to add this code to .posts-blog-feed-module .header and .posts-blog-feed-module .header img but it doesn’t work.

Here is an example of the same height issue with the related posts at bottom of the page, which i have now fixed on my local test site so all images are the same height and proportional:

http://www.celebrityhealthcritic.com/test-post-5/