olivianeagle Posted February 1, 2021 Share Posted February 1, 2021 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
tuanphan Posted February 4, 2021 Share Posted February 4, 2021 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
olivianeagle Posted February 15, 2021 Author Share Posted February 15, 2021 (edited) @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! Edited February 15, 2021 by olivianeagle Link to comment
olivianeagle Posted February 17, 2021 Author Share Posted February 17, 2021 (edited) @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! Edited February 17, 2021 by olivianeagle Link to comment
tuanphan Posted February 19, 2021 Share Posted February 19, 2021 Sorry for the delay. Do you still need help on this? 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
olivianeagle Posted February 22, 2021 Author Share Posted February 22, 2021 @tuanphan yes please! with both issues, if possible. thanks so much! Link to comment
tuanphan Posted February 28, 2021 Share Posted February 28, 2021 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
olivianeagle Posted March 3, 2021 Author Share Posted March 3, 2021 @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! Link to comment
tuanphan Posted March 6, 2021 Share Posted March 6, 2021 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; } } 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
olivianeagle Posted March 7, 2021 Author Share Posted March 7, 2021 this worked! thanks so much. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment