onespaceatatime Posted June 16, 2022 Share Posted June 16, 2022 Site URL: https://www.onespaceatatime.ca Hello, I am trying to find some css to improve the look of my footer on mobile view. Currently, there are two text blocks and two image blocks and they are all stacking vertically but I want to adjust them so that they are smaller and go across. There is probably too much to be in one row, but even condensing it to two rows would be better. Thanks for any help! Link to comment
tuanphan Posted June 16, 2022 Share Posted June 16, 2022 What is access password? 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 Posted June 17, 2022 Share Posted June 17, 2022 9 hours ago, onespaceatatime said: osaatpo2129 Add to Design > Custom CSS @media screen and (max-width:767px) { div#page-section-6290ff0a2ea0e76d6e7c4dde .span-2 { width: 50% !important; float: left !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
onespaceatatime Posted June 17, 2022 Author Share Posted June 17, 2022 8 hours ago, tuanphan said: Add to Design > Custom CSS @media screen and (max-width:767px) { div#page-section-6290ff0a2ea0e76d6e7c4dde .span-2 { width: 50% !important; float: left !important; } } TuanPhan, this worked great for the images as you can see in the file. Thank you. Is there a way to bring the hours section up beside the contact info section in the footer as well? Link to comment
tuanphan Posted June 17, 2022 Share Posted June 17, 2022 20 minutes ago, onespaceatatime said: TuanPhan, this worked great for the images as you can see in the file. Thank you. Is there a way to bring the hours section up beside the contact info section in the footer as well? Use this new code @media screen and (max-width:767px) { div#page-section-6290ff0a2ea0e76d6e7c4dde { .span-2 { width: 50% !important; float: left !important; } .span-3 { width: 50% !important; float: left !important; } .span-2:nth-child(3) { clear: left; } h4 { white-space: nowrap !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
onespaceatatime Posted June 17, 2022 Author Share Posted June 17, 2022 1 hour ago, tuanphan said: Use this new code @media screen and (max-width:767px) { div#page-section-6290ff0a2ea0e76d6e7c4dde { .span-2 { width: 50% !important; float: left !important; } .span-3 { width: 50% !important; float: left !important; } .span-2:nth-child(3) { clear: left; } h4 { white-space: nowrap !important; }} } It is soooo close. On my phone there is a tiny gap between the end of the website and the hours section, but as you can see in the screenshot, in mobile view there is not sufficient gap between the two. I imagine that means that on some phones this is what it will look like. Is there a way to correct this? Thanks! Link to comment
tuanphan Posted June 17, 2022 Share Posted June 17, 2022 11 hours ago, onespaceatatime said: It is soooo close. On my phone there is a tiny gap between the end of the website and the hours section, but as you can see in the screenshot, in mobile view there is not sufficient gap between the two. I imagine that means that on some phones this is what it will look like. Is there a way to correct this? Thanks! Try this new code @media screen and (max-width:767px) { div#page-section-6290ff0a2ea0e76d6e7c4dde { .span-2 { width: 50% !important; float: left !important; } .span-3 { width: 50% !important; float: left !important; } .span-2:nth-child(3) { clear: left; } h4 { white-space: nowrap !important; }} footer.sections section { min-height: unset !important; } footer.sections .content-wrapper { padding-bottom: 0px !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
onespaceatatime Posted June 18, 2022 Author Share Posted June 18, 2022 11 hours ago, tuanphan said: Try this new code @media screen and (max-width:767px) { div#page-section-6290ff0a2ea0e76d6e7c4dde { .span-2 { width: 50% !important; float: left !important; } .span-3 { width: 50% !important; float: left !important; } .span-2:nth-child(3) { clear: left; } h4 { white-space: nowrap !important; }} footer.sections section { min-height: unset !important; } footer.sections .content-wrapper { padding-bottom: 0px !important; } } That did not change anything. 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