Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Force desktop layout on mobile, York Family


olivianeagle

Question

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 post
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

9 answers to this question

Recommended Posts

  • 0

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

 

Link to post
  • 0

@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 post
  • 0

@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 post
  • 0
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;
}
}

 

Link to post
  • 0

@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 post
  • 0
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;
}
}

 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...