Jump to content

Changing size of one banner heading for mobile only

Go to solution Solved by christyprice,

Recommended Posts

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.  

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 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
  • 8 months later...

Beatriz Caraballo has a good walkthrough here: https://beatrizcaraballo.com/blog/resizing-banners-on-mobile-in-squarespace

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 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
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? 

image.thumb.png.a302f5c7b66c4397e77f6c1463c48717.png

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
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??

image.thumb.png.8a11a009cfe5f9b2eb777d23351278cb.png

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
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
  • 4 weeks later...
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
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
  • 4 weeks later...

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

 

image.thumb.png.cfa4f51cb93a980c06e5e5e0c6516735.png

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

image.png

Edited by Radhika22
Link to comment
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.

 

image.thumb.png.cfa4f51cb93a980c06e5e5e0c6516735.png

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

image.png

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
  • 2 weeks later...
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
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
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
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
  • 2 weeks later...
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
  • 8 months later...
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

 

CaptureMob2.PNG

Link to comment

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

 

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 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

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.