Force desktop layout on mobile, York Family

Try adding to Design > Custom CSS

/* Resize mobile images */
@media screen and (max-width:640px) {
div.index-section figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
div.index-section {
    min-height: unset !important;
    height: 250px;
}
}

@tuanphan thank you so much for your reply!! really appreciate the help. 

i input this code, and it did get me closer to the effect i was hoping to achieve! attaching a screenshot here. 

you'll see there are large bands of black between the images, whereas on Desktop they are flush with no space between them. would it be possible to achieve that same effect (no space) in the mobile layout? 

thanks again for all your help! 

@tuanphan one more question — it seems that for one of my projects, the mobile image is now being squished into an incorrect ratio. ideally this tile is supposed to be video, but i had uploaded a backup mobile image — which is displaying — but is distorted. could this be related to this new code?

thanks again for all your help! 

Sorry for the delay. Do you still need help on this?

@tuanphan

yes please! 

with both issues, if possible. 

thanks so much! 

On 2/22/2021 at 9:08 PM, olivianeagle said:

@tuanphan

yes please! 

with both issues, if possible. 

thanks so much! 

Hi. Try new code

/* Resize mobile images */
@media screen and (max-width:640px) {
body.homepage div.index-section figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
body.homepage div.index-section {
    min-height: unset !important;
    height: 170px;
}
}

@tuanphan thank you so much again for your help! 

that fixed almost all of the the gaps — thank you !!

unfortunately, this top image is still distorted — any thoughts on why that might be? attaching a screenshot below. 

i am also happy to discuss via email if that's easier. let me know if you prefer that! 

On 3/3/2021 at 9:53 AM, olivianeagle said:

@tuanphan thank you so much again for your help! 

 

that fixed almost all of the the gaps — thank you !!

 

unfortunately, this top image is still distorted — any thoughts on why that might be? attaching a screenshot below. 

 

i am also happy to discuss via email if that's easier. let me know if you prefer that! 

 

 

 

Try new code

/* Resize mobile images */
@media screen and (max-width:640px) {
body.homepage div.index-section figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
body.homepage div.index-section {
    min-height: unset !important;
    height: 170px;
}
div.index-section .sqs-video-background {
    height: auto !important;
}
}

this worked! thanks so much.