Image Layout Issue on Grid Element

Andy,

Thanks for your response! I’m not sure how much more clear I can be; I have attached a screenshot in my original post. The Grid Layout consist of the four sections: “Rittenhouse Square, Washington Square, etc.”.

To answer your response:

1) That “Selling A Home” and “Buying A Home” is a background image rather than an Image Element. Background images work as intended.

2) Please see the screenshot in my original post, as well as the first paragraph of this response.

3) No, that’s the custom separator. I am referring to the “Fullwidth Separator.” It extends past the column section it is in. The tinypic loads just fine on my end. I’ve also noticed that I can enter “100%” width under the custom separator; however, it follows the padding set by the Grid Layout. Any way I can have the custom separator ignore the padding when 100% is entered?

Thanks!

Thanks, Andy!

For the image height, that is a solution but then the images do not resize correctly – they’re smushed or stretched. Any other ideas?

Andy, the auto width does not work – there is a space on the left and right side of the image. I’ve also applied a width of 1000 and changed the height but on some screen sizes, the images look stretched / smushed – not good looking at all.

Also, I’ve attached an image, link and description above.

Any other solutions?

Thanks.

Interesting. I added the code above and the image height now works; however, it calls for a border on the left side, which looks odd. Anyway to remove that left border without it affecting the image heights?

This is my current CSS, but please note, the stock theme CSS still has the same issue:

.av-border-cells .flex_cell:first-child {
border: none;
border-left: 10px solid white;
}

.flex_cell.no_margin.av_one_fourth.avia-builder-el-17.el_after_av_cell_one_fourth.avia-builder-el-last.av-zero-padding {
border: none;
padding-left: 10px!important;
}

.av-border-top-bottom{border-top-style: solid; border-top-width: 10px; border-bottom-style: solid; border-bottom-width: 10px; border-color: #ffffff;}
.av-border-cells .flex_cell{border-left-style: solid; border-left-width:10px; border-color: #ffffff;}

@media only screen and (max-width: 767px) {
.av-border-top-bottom{border-top-style: solid; border-top-width: 10px; border-bottom-style: solid; border-bottom-width: 10px; border-color: #ffffff;}
.av-border-cells .flex_cell{border-left-style: solid; border-left-width:0px; border-color: #ffffff;
}
}

I’m simply trying to make the border thicker. I just can’t figure out the image height issue, with and without the CSS above. I’ve left the code you asked me to add so that you can see the borders only on the left side.

Thanks!

Hi Andy! Thanks! However, that does not work; I’ve left the code in so you can see. As mentioned above, this code works:

.av-border-cells .flex_cell:first-child {
border: none;
border-left: 10px solid white;
}

However, once you play with that “border-left” property, it gets weird!

Anything else?

Thanks!

I have checked on both safari and chrome.

Safari:
Images are not 100% height.

Chrome:
Images are not 100% height, but when scrolled over, zoom to 100% height.