Force desktop layout on mobile, York Family

Site URL: https://olivianeagle.com

hello!

i am looking to either adjust the mobile breakpoints or just force the desktop layout as the default on mobile as well for my wesbite. URL: olivianeagle.com. it was built using the lange template from the york family. 

this is mainly a concern for the home page — the tiles/videos per project i have set on desktop get cropped too tightly on mobile. i would like them to appear on mobile at the same or a similar aspect ratio as they appear on desktop. 

has anyone successfully done this? thanks in advance for any advice! 

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.