Grid in PRO theme - use image as buttons - not in centre larger screens

[lvandeemter]

Hi,

I am working on an update of a PRO website (test-site).
The site had 2 rows of (transparent) images with link used as buttons (so background colour base / interaction set differenty) to other pages in the site. Now I want to create them with the new Grid tool, because I think it is great for this.

But I cannot seem to get the images stay centred on larger screens. The images stay aligned left. Most screen-sizes they are oke. But larger screens they are out of sinc.

Size of the images are 1000x600

What I did:
Row: Align horiontal Center / vertical: stretch - no gaps - container
Column: flexbox on - childplacement: column (wrap) - align hor.: stretch / vertical: center
Grid: 6 cells (3 on top and 3 below) - setup: x&y content: center - x&y items: stretch both - global container: off
Cell: flexbox: on cild placemtn: column / wrap / align hor.:stretch / vertical:center

these last alignments give the cells fully coloured.

Could you please advice what I can do to have these ‘buttons’ aligned? Perhaps my approach is not good…?
Thanks in advance (again).

Liesbeth

[christian]

Hey Liesbeth,

There are 2 solutions for this depending on what you need so try both solutions to see the effects.

The first one and the main reason why the images are not centered in the images are Retina enabled and the Retina feature halves the width of the image so though your images are 1000px in width, they just display as 500px and because of that, it’s only good for 1500px or smaller screens. If you view your grid in a 1920px screen, the image is aligned left and there’s no option to center it.

###Solution 1

If you want to make the images bigger and so for them to span even in 3000px screen or wide screens, disable the Retina option for each image.

###Solution 2

If you want the images to remain 500px, use this solution. Since this is just a minor change, I’ll provide you with a custom CSS. Add this code in the Section’s Element CSS.

$el .x-image img {
  margin: auto;
}

Hope that helps.

[lvandeemter]

Sorry for the late respons, I was out of the office.

Yes! This works great. Thank you for your help (als always great!)

[christian]

You’re welcome, @lvandeemter.