Wiiiiiiiiiide Image on Blog Main Page

SOLVE
New Contributor

The images on blog.shopvisivite.com are distorted to full width but very short height (I think 473 x 170px), whereas clicking blog link reveals the image to be in correct orientation.

 

I want the the images to be full width but automatic height, thereby maintaining the original dimensional shape.

 

Is this a featured image wrapper issue?

 

At Line 1695 of the CSS template, I see:

.hs-featured-image-wrapper .hs-featured-image-link img.hs-featured-image {

  max-width: 100%;

  float: left;

  width: 100%;

  margin: 10px 0;

 

How do I achieve my goal of having a non-distorted image?

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Solution
Community Manager

@EyeDoc,

set the width to auto.

you have a float on it so if you dont what it to float, you will need to change that as well

removing it will invoke float right as you have that as a css rule as well.

try this:

.hs-featured-image-wrapper .hs-featured-image-link img.hs-featured-image {
    max-width: 100%;
    float: none;
    width: auto;
    margin: 10px auto;
    display: block !important;
}
Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!

View solution in original post

2 Replies 2
Solution
Community Manager

@EyeDoc,

set the width to auto.

you have a float on it so if you dont what it to float, you will need to change that as well

removing it will invoke float right as you have that as a css rule as well.

try this:

.hs-featured-image-wrapper .hs-featured-image-link img.hs-featured-image {
    max-width: 100%;
    float: none;
    width: auto;
    margin: 10px auto;
    display: block !important;
}
Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!

View solution in original post

New Contributor

Better, Dennis! Now the images look normal.

 

But the height of about 180px is limiting their size which is too small. Instead, I'm seeking the 100% width of the page to determine the image width, and then have the vertical size automatically adjust so that the image remains in proportion.

 

Can that be done?

Reply
0 Upvotes