How can I reduce an image by half, center it and show it uncropped?

[Babysleep]

Hi,

I’m trying to scale down an image by half, center it and show it uncropped. In the mobile version, the title is shown at the bottom, although the settings are set to be shown at the top. I appreciate any help, thanks in advance.

link to the page: https://www.babysleep.in/pages/group_consultation

What does it look like now:

How it should look:

[PageFly-Victor]

Hi @Babysleep

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

Hope this answer helps.

Best regards,

Victor | PageFly

[Babysleep]

Thank you! But I have one more problem - when you look from the desktop version, picture is too big

[PageFly-Victor]

You can reduce the image size or use this code specifically for desktop.

@media screen and (min-width: 1024px){
.featured-content--image {
    max-width: 700px;
    width: 100%;
}
}