Images resized for mobile - Degraw template

I am trying to get full bleed images to resize on mobile so that that show in full, currently seem to be locked to a height meaning images focal points that are not central to the image are being cut-off. Any help would be appreciated.

On 9/15/2021 at 3:31 PM, OldMate said:

I am trying to get full bleed images to resize on mobile so that that show in full, currently seem to be locked to a height meaning images focal points that are not central to the image are being cut-off. Any help would be appreciated.

Hi,

Can you share site url?

12 hours ago, tuanphan said:

Hi,

Can you share site url?

yournourishedmind.com.au

pwd: yournourishedmind

Thankyou!

On 9/15/2021 at 3:31 PM, OldMate said:

I am trying to get full bleed images to resize on mobile so that that show in full, currently seem to be locked to a height meaning images focal points that are not central to the image are being cut-off. Any help would be appreciated.

Hi,

You mean the girl image or which image?

2 hours ago, tuanphan said:

Hi,

You mean the girl image or which image?

All full bleed images where what I was trying to solve the issue for, so the girl image on the homepage and the full bleed image block on the services page.

Note: I have manually cropped the home page image to make it work for client approval, I would still prefer the image block be responsive to mobile using width rather than height of the block.

23 hours ago, OldMate said:

All full bleed images where what I was trying to solve the issue for, so the girl image on the homepage and the full bleed image block on the services page.

Note: I have manually cropped the home page image to make it work for client approval, I would still prefer the image block be responsive to mobile using width rather than height of the block.

Try adding this to Design > Custom CSS (this for image on homepage)

/* resize homepage image mobile */
@media screen and (max-width:767px) {
[data-section-id="61394b516866c938e302e24a"] {
	.section-background, .section-background-content {
    opacity: 1 !important;
}
img {
    visibility: visible !important;
    opacity: 1 !important;
    object-fit: contain !important;
    height: auto !important;
}
.section-background-canvas.background-fx-canvas {
    opacity: 0 !important;
}
& {
    min-height: unset !important;
    height: 45vh;
}
}
}