Mobile Home Page Images

Backlight 4, 5 & 6 Support
#1

Hi Folks,

I use PHP to build my Home page and the Grid Construct and Square images. This work well when using a browser. Unfortunately the mobile view distorts the square images and displays them in Landscape.

Any solutions gratefully received. https://jonevans.photography

Regards

Jon Evans

#2

Hi Jon,

It looks to be something in the custom css. in the .square__content class is position:absolute;
If I disable that or change it to “static”, the image reverts to square and is not distorted. However, the layout gets messed up with a 75px of padding under the image.

That padding is found in your custom css here:

image

If I disable the padding-bottom, things look better. So I’m thinking that some more specific css is needed in a media query to target the positioning and padding-bottom.

At least it’s a place to start.

#3

Outstanding! Thank you Rod.

Been a while, hope that you are well.

#4

It’s a somewhat sophisticated CSS trick, but if you want a square element to behavior responsively, this is how to do it:

<style>
  .square {
    display: block;
    position: relative;

  }

  .square {
    content: "";
    display: block;
    padding-top: 100%;
  }

  img {
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
</style>

<div class="square">
  <img />
</div>
#5

Thank you Matt,

I’ll give it a go and see how I get on…