christyprice Posted August 19, 2020 Share Posted August 19, 2020 Hi @Asiya, you can adjust the image focal point to change what part of the banner you see on mobile - that would be my first recommendation. If that doesn't work, you might consider having a different banner image for mobile. I have a post on that here and there are some threads in the forum as well. Asiya 1 christyprice.com 🇺🇸 Austin, TX US ✅ Get my Starter Template for Web Designers 🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz) 🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023 Link to comment
Asiya Posted August 19, 2020 Share Posted August 19, 2020 19 minutes ago, christyprice said: Hi @Asiya, you can adjust the image focal point to change what part of the banner you see on mobile - that would be my first recommendation. If that doesn't work, you might consider having a different banner image for mobile. I have a post on that here and there are some threads in the forum as well. Thank you so much for your help:) christyprice 1 Link to comment
Radhika22 Posted May 4, 2021 Share Posted May 4, 2021 @christyprice @tuanphan Hi! How can I change the height of the header on mobile only? I'm looking to do this for www.jivamorelife.com. It looks good on the web, but it's taking up more of the screen than I want on mobile. Can we reduce padding / the size? Link to comment
christyprice Posted May 5, 2021 Share Posted May 5, 2021 Beatriz Caraballo has a good walkthrough here: https://beatrizcaraballo.com/blog/resizing-banners-on-mobile-in-squarespace christyprice.com 🇺🇸 Austin, TX US ✅ Get my Starter Template for Web Designers 🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz) 🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023 Link to comment
tuanphan Posted May 7, 2021 Share Posted May 7, 2021 On 5/5/2021 at 2:07 AM, Radhika22 said: @christyprice @tuanphan Hi! How can I change the height of the header on mobile only? I'm looking to do this for www.jivamorelife.com. It looks good on the web, but it's taking up more of the screen than I want on mobile. Can we reduce padding / the size? You mean home top banner? How do you want to solve text/button? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Radhika22 Posted May 10, 2021 Share Posted May 10, 2021 On 5/7/2021 at 3:40 AM, tuanphan said: You mean home top banner? How do you want to solve text/button? @tuanphan Yes. I would like to make everything in the header smaller at the top. So that would include the navigation button, Logo, and shop icon. Link to comment
tuanphan Posted May 12, 2021 Share Posted May 12, 2021 On 5/11/2021 at 4:14 AM, Radhika22 said: @tuanphan Yes. I would like to make everything in the header smaller at the top. So that would include the navigation button, Logo, and shop icon. not enough space for both text/button. Do you want to move text/button under image?? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
kittymittens Posted May 12, 2021 Share Posted May 12, 2021 @tuanphan any chance you can help? https://www.hogansroaddental.com.au/ Having trouble resizing the banner using all the coding that you've put on here. Any help would be greatly appreciated! Link to comment
tuanphan Posted May 14, 2021 Share Posted May 14, 2021 On 5/12/2021 at 7:45 PM, kittymittens said: @tuanphan any chance you can help? https://www.hogansroaddental.com.au/ Having trouble resizing the banner using all the coding that you've put on here. Any help would be greatly appreciated! Hi. Which banner? I don't see on homepage Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Radhika22 Posted June 9, 2021 Share Posted June 9, 2021 On 5/12/2021 at 3:24 AM, tuanphan said: not enough space for both text/button. Do you want to move text/button under image?? @tuanphan I meant the header (not the banner), so I'm looking to resize the header for mobile only. Link to comment
tuanphan Posted June 10, 2021 Share Posted June 10, 2021 8 hours ago, Radhika22 said: @tuanphan I meant the header (not the banner), so I'm looking to resize the header for mobile only. You mean make header height smaller or??? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Radhika22 Posted June 11, 2021 Share Posted June 11, 2021 21 hours ago, tuanphan said: You mean make header height smaller or??? Yes. How can I make the header height of the mobile view smaller? Link to comment
tuanphan Posted June 11, 2021 Share Posted June 11, 2021 7 hours ago, Radhika22 said: Yes. How can I make the header height of the mobile view smaller? Add to Design > Custom CSS > then save & reload the site /* Mobile header */ .Mobile-bar.Mobile-bar--top { padding-top: 0px; padding-bottom: 0px; } a.Mobile-bar-branding { padding-top: 0px; padding-bottom: 0px; } .Mobile-bar-branding-logo { width: 70px; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Radhika22 Posted June 16, 2021 Share Posted June 16, 2021 On 6/11/2021 at 1:31 AM, tuanphan said: Add to Design > Custom CSS > then save & reload the site /* Mobile header */ .Mobile-bar.Mobile-bar--top { padding-top: 0px; padding-bottom: 0px; } a.Mobile-bar-branding { padding-top: 0px; padding-bottom: 0px; } .Mobile-bar-branding-logo { width: 70px; } @tuanphan That worked! thank you. Link to comment
Radhika22 Posted July 8, 2021 Share Posted July 8, 2021 (edited) @tuanphan When I add an Announcement Bar, it doesn't show up on the desktop view, only on the mobile version. Also there is a big space after the Announcement Bar in the mobile version and when you scroll, this bar goes over the header instead of being sticky. How can I fix these 3 issues? (Images below) I've also listed all of the custom css code on my website below. /* Fixed Header */ .Header { position: fixed; z-index: 9999; width: 100%; top: 0px; } .Content-outer { margin-top: 50px; } // fixed header navigation for desktop, tablet and mobile // header, .Mobile { width: 100%; position: fixed; position: -webkit-sticky; position: sticky; top: 0; z-index: 1000; } /* Mobile header */ .Mobile-bar.Mobile-bar--top { padding-top: 0px; padding-bottom: 0px; } a.Mobile-bar-branding { padding-top: 0px; padding-bottom: 0px; } .Mobile-bar-branding-logo { width: 70px; } /* Mobile-Banner side by side */ @media screen and (max-width:767px) { div#page-60c94c80079fbe716535f7e8 .span-3 { width: 50% !important; float: left !important; } } /* Mobile-Homepage-2 columns */ @media screen and (max-width:640px) { section#products-1 .span-3, section#products-2 .span-3 { width: 50% !important; float: left !important; } section#products-1 .span-3:nth-child(2n+1), section#products-2 .span-3:nth-child(2n+1) { clear: left !important; } } /* 2 Column Product Grid */ @media only screen and (max-width:640px) { .products .list-grid { display: flex; flex-wrap: wrap; justify-content: space-between; } .products .grid-item { width: 48%; } } /* 2 products columns - Watercolor splatters */ @media screen and (max-width:640px) { div#page-5f489bc95b4e2969d5bf026c .span-3 { width: 50% !important; float: left !important; } div#page-5f489bc95b4e2969d5bf026c .span-3:nth-child(2n+1) { clear: left !important; } } /* product 2 columns mobile */ @media screen and (max-width:640px) { /* Mini paintings */ div#page-60246570a7841d194bd52219 .span-3 { width: 50% !important; float: left !important; } div#page-60246570a7841d194bd52219 .span-3:nth-child(2n+1) { clear: left; } /* polaroids */ div#page-607a494ab14a497e09cc5385 .span-12 .span-3 { width: 50% !important; float: left !important; } div#page-607a494ab14a497e09cc5385 .span-12 .span-3:nth-child(2n+1) { clear: left; } } /* Collections page header */ @media screen and (max-width:640px) { div#block-0af3a012f3c9b4da3f05+.row .span-3 { width: 50% !important; float: left !important; } div#block-0af3a012f3c9b4da3f05+.row .span-3:nth-child(2n+1) { clear: left !important; } } Edited July 8, 2021 by Radhika22 Link to comment
tuanphan Posted July 10, 2021 Share Posted July 10, 2021 On 7/9/2021 at 6:57 AM, Radhika22 said: @tuanphan When I add an Announcement Bar, it doesn't show up on the desktop view, only on the mobile version. Also there is a big space after the Announcement Bar in the mobile version and when you scroll, this bar goes over the header instead of being sticky. How can I fix these 3 issues? (Images below) I've also listed all of the custom css code on my website below. /* Fixed Header */ .Header { position: fixed; z-index: 9999; width: 100%; top: 0px; } .Content-outer { margin-top: 50px; } // fixed header navigation for desktop, tablet and mobile // header, .Mobile { width: 100%; position: fixed; position: -webkit-sticky; position: sticky; top: 0; z-index: 1000; } /* Mobile header */ .Mobile-bar.Mobile-bar--top { padding-top: 0px; padding-bottom: 0px; } a.Mobile-bar-branding { padding-top: 0px; padding-bottom: 0px; } .Mobile-bar-branding-logo { width: 70px; } /* Mobile-Banner side by side */ @media screen and (max-width:767px) { div#page-60c94c80079fbe716535f7e8 .span-3 { width: 50% !important; float: left !important; } } /* Mobile-Homepage-2 columns */ @media screen and (max-width:640px) { section#products-1 .span-3, section#products-2 .span-3 { width: 50% !important; float: left !important; } section#products-1 .span-3:nth-child(2n+1), section#products-2 .span-3:nth-child(2n+1) { clear: left !important; } } /* 2 Column Product Grid */ @media only screen and (max-width:640px) { .products .list-grid { display: flex; flex-wrap: wrap; justify-content: space-between; } .products .grid-item { width: 48%; } } /* 2 products columns - Watercolor splatters */ @media screen and (max-width:640px) { div#page-5f489bc95b4e2969d5bf026c .span-3 { width: 50% !important; float: left !important; } div#page-5f489bc95b4e2969d5bf026c .span-3:nth-child(2n+1) { clear: left !important; } } /* product 2 columns mobile */ @media screen and (max-width:640px) { /* Mini paintings */ div#page-60246570a7841d194bd52219 .span-3 { width: 50% !important; float: left !important; } div#page-60246570a7841d194bd52219 .span-3:nth-child(2n+1) { clear: left; } /* polaroids */ div#page-607a494ab14a497e09cc5385 .span-12 .span-3 { width: 50% !important; float: left !important; } div#page-607a494ab14a497e09cc5385 .span-12 .span-3:nth-child(2n+1) { clear: left; } } /* Collections page header */ @media screen and (max-width:640px) { div#block-0af3a012f3c9b4da3f05+.row .span-3 { width: 50% !important; float: left !important; } div#block-0af3a012f3c9b4da3f05+.row .span-3:nth-child(2n+1) { clear: left !important; } } Add to Desisgn > Custom CSS @media screen and (max-width:767px) { .Content-outer { margin-top: 0px; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Radhika22 Posted July 19, 2021 Share Posted July 19, 2021 On 7/9/2021 at 9:10 PM, tuanphan said: Add to Desisgn > Custom CSS @media screen and (max-width:767px) { .Content-outer { margin-top: 0px; } } @tuanphan Thanks! That fixed it on mobile, but it did not fix it on the desktop where you still can't see it. How can I see this banner on desktop? Also, how can I make this banner sticky so it always shows? Link to comment
tuanphan Posted July 20, 2021 Share Posted July 20, 2021 4 hours ago, Radhika22 said: @tuanphan Thanks! That fixed it on mobile, but it did not fix it on the desktop where you still can't see it. How can I see this banner on desktop? Also, how can I make this banner sticky so it always shows? I don't see banner. Did you remove it? https://www.hogansroaddental.com.au/ Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Radhika22 Posted July 20, 2021 Share Posted July 20, 2021 13 hours ago, tuanphan said: I don't see banner. Did you remove it? https://www.hogansroaddental.com.au/ The Announcement Bar banner only shows up on mobile, not on desktop versions. Plus, on the mobile version, it is not sticky. https://www.jivamorelife.com/ Link to comment
tuanphan Posted July 22, 2021 Share Posted July 22, 2021 On 7/21/2021 at 12:35 AM, Radhika22 said: The Announcement Bar banner only shows up on mobile, not on desktop versions. Plus, on the mobile version, it is not sticky. https://www.jivamorelife.com/ You mean sticky both header + annoucenement bar on mobile? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Radhika22 Posted July 22, 2021 Share Posted July 22, 2021 12 hours ago, tuanphan said: You mean sticky both header + announcement bar on mobile? Yes. Also, why is it not showing on desktop? Link to comment
tuanphan Posted July 23, 2021 Share Posted July 23, 2021 16 hours ago, Radhika22 said: Yes. Also, why is it not showing on desktop? It is appear, but your header overlap it. On desktop, you want announcement bar appear above or below header? Add to Design > Custom CSS /* sticky announcement bar mobile tablet */ @media screen and (max-width:900px) { .sqs-announcement-bar-dropzone { position: fixed; top: 55px; z-index: 999; left: 0; width: 100%; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Radhika22 Posted August 4, 2021 Share Posted August 4, 2021 On 7/22/2021 at 11:40 PM, tuanphan said: /* sticky announcement bar mobile tablet */ @media screen and (max-width:900px) { .sqs-announcement-bar-dropzone { position: fixed; top: 55px; z-index: 999; left: 0; width: 100%; } } Now the announcement bar is sticky on mobile (thank you!), but it is cut off in tablet view, and does not show up on the desktop version. I want the announcement bar below the header. Link to comment
Iwan Posted May 2, 2022 Share Posted May 2, 2022 On 1/11/2020 at 9:50 PM, christyprice said: You'd want to target that specific block for mobile only in Design > Custom CSS. Try this and play around with the font size. @media screen and (max-width: 640px) { #block-b804c57f124fbfbe2d7f { font-size: 20px !important; } } Hi @christyprice Hope you're well? I'm trying this code to resize my main homepage header...but it's not working? Could you please help? https://www.jeanine-thompson.squarespace.com/ password: tuansqsp Link to comment
christyprice Posted May 2, 2022 Share Posted May 2, 2022 @Iwan you are using the .animated-text class so your code would be something like @media screen and (max-width: 640px) { .animated-text { font-size: 20px !important; } } Iwan 1 christyprice.com 🇺🇸 Austin, TX US ✅ Get my Starter Template for Web Designers 🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz) 🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023 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