Jump to content

Force desktop layout on mobile, York Family

Recommended Posts

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! 

 

 

Link to comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

@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! 

IMG_3167.jpeg

Edited by olivianeagle
Link to comment

@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! 

 

 

IMG_3188 2.PNG

Edited by olivianeagle
Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@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! 

 

IMG_3314.thumb.jpeg.171bcb858f4fe810b2a3315fb82c10df.jpeg

 

 

Link to comment
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! 

 

IMG_3314.thumb.jpeg.171bcb858f4fe810b2a3315fb82c10df.jpeg

 

 

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.