Responsive vertical and horizontal align content within Squarespace block across all devices.

Site URL: https://www.ofnoevil.com/home-v2

Hello,

The image on my site page here: https://www.ofnoevil.com/home-v2 does not align in the center when being viewed across devices. It's default stage is to be top aligned across all devices.

I am looking for help with creating code that will automatically position the image within the div so that on any device it is responsively moving towards the center.

Thank you,

Danerick

It looks centered. Did you solve it?

Hi,
 

No it is only centered on some devices via Padding. So it is not always centered (only faking it at the moment).

Hi @tuanphan, are you able to help?

On 9/8/2021 at 8:15 PM, workdp said:

Hi,
 

No it is only centered on some devices via Padding. So it is not always centered (only faking it at the moment).

Which screen size do you have problem? I think we can set code for all specific screen sizes.

17 hours ago, tuanphan said:

Which screen size do you have problem? I think we can set code for all specific screen sizes.

It would be more mobile (<700 px)

On 9/13/2021 at 8:25 AM, workdp said:

It would be more mobile (<700 px)

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1631026373092_2561 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999;
    width: 90%;
}
}