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

Changing size of one banner heading for mobile only

Question

So I am building a website using the Impact template in the Brine family. I kept much of the original formatting, as it worked well for my client, including the large block header 1 format. However, one of my banner page titles has a word ("recreational") that is too long for the mobile view and getting cut off or wrapped mid-word (I included a screenshot). How do I change the font-size only on this page, and only for the mobile view? I don't want the font-size to change on the full-screen size; and I want the other mobile-view page title font-sizes to remain the same.

Site: Recreational Therapy page

 

864699088_ScreenShot2020-01-11at11_31_41AM.png.0e888c1956c2adf26c759b99c9cb5066.png

Share this post


Link to post

Recommended Posts

  • 0

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

 

Share this post


Link to post
  • 0

how do you find the block IDs? I can only see YUI ID 😞

 

edit: nevermind, figured it out. Also came across a great chrome extension that just shows you.

Chrome Store:  "Squarespace Collection/Block Identifier"

Edited by JonJonJon

Share this post


Link to post
  • 0

I have the same issue and am a rookie when it comes to coding. Do I use the exact same code and switch out just the block ID for the specific section of my site?

 

www.boldinkstrategy.com

Share this post


Link to post
  • 0

@lindseyturner, exactly. You can use the Chrome extension Squarespace Collection/Block Identifier that JonJonJon mentioned above to easily discover and copy the block-id. Then you can change the font size from 20 to whatever works for you.

Edited by christyprice

Share this post


Link to post
  • 0

Thanks for your answers here @christyprice

Is there a way to change all, for example, H3 Headings to display at smaller size on mobile only? I have the same problem as abovem on nearly all H3 headings. Would be a ton of code to target every block individually...

Thanks,
Dave

 

Screen Shot 2020-04-16 at 11.10.08.png

Share this post


Link to post
  • 0
Posted (edited)

Hi @djm, yes you can target all h3 on mobile. 

@media only screen and (max-width: 991px) {
	h3 {
		font-size: 12px !important;
	}
}

You can change around the screen size max-width and the font size until you get the result you want. 

Edited by christyprice

Share this post


Link to post
  • 0
On 4/17/2020 at 5:02 PM, christyprice said:

Hi @djm, yes you can target all h3 on mobile. 


@media only screen and (max-width: 991px) {
	h3 {
		font-size: 12px !important;
	}
}

You can change around the screen size max-width and the font size until you get the result you want. 

So if I wanted to increase the font size for Heading 1 in only the desktop it would be similar to this though I'd change h3 to h1 and id change @media to what? @desktop?

Would it be possible to dramatically change the font size in Heading 1 to something massive?  As you'll see in my site www.adrianfisk.com I've only achieved huge font through overlaying onto the image in photoshop and then uploading onto my SS site. However this then means the mobile cannot fit the word in and it looks poor.

Share this post


Link to post
  • 0
23 minutes ago, AFisk said:

So if I wanted to increase the font size for Heading 1 in only the desktop it would be similar to this though I'd change h3 to h1 and id change @media to what? @desktop?

Would it be possible to dramatically change the font size in Heading 1 to something massive?  As you'll see in my site www.adrianfisk.com I've only achieved huge font through overlaying onto the image in photoshop and then uploading onto my SS site. However this then means the mobile cannot fit the word in and it looks poor.

@media screen and (min-width:992px) {
	h1 {
		font-size: 20px;
}
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
Posted (edited)
54 minutes ago, tuanphan said:

@media screen and (min-width:992px) {
	h1 {
		font-size: 20px;
}
}

 

Thanks Tuanphan - However it hasnt changed the size of the Heading 1. If you see this example page here. I want the font 'FILM'  To appear super large. That font is currently in Heading 1. Is there CSS to change this to something like I built in photoshop like the larger example

Screenshot 2020-05-05 at 14.26.31.png

Screenshot 2020-05-05 at 14.28.13.png

Edited by AFisk

Share this post


Link to post
  • 0
4 minutes ago, AFisk said:

Thanks Tuanphan - However it hasnt changed the size of the Heading 1. If you see this example page here. I want the font 'FILM'  To appear super large. That font is currently in Heading 1. Is there CSS to change this?

FILM, under image? It is h4


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
7 minutes ago, tuanphan said:

FILM, under image? It is h4

Ok so Ive entered this code. However the font size is not changing for FILM

@media screen and (min-width:992px) {
    h4 {
        font-size: 100px;
}
}

Share this post


Link to post
  • 0

add this

@media screen and (min-width:992px) {
    h1 {
        font-size: 200px !important;
    }
}

image.thumb.png.8a95fe7d6a42d0b626679c2a83687d0f.png


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
2 minutes ago, tuanphan said:

add this


@media screen and (min-width:992px) {
    h1 {
        font-size: 200px !important;
    }
}

image.thumb.png.8a95fe7d6a42d0b626679c2a83687d0f.png

Genius!! You nailed it.

and if I wanted to marginally increase it on the mobile screen I'd enter this

@media only screen and (max-width: 991px) {
	h3 {
		font-size: 12px !important;
	}
}

 

Share this post


Link to post
  • 0
4 minutes ago, AFisk said:

Genius!! You nailed it.

and if I wanted to marginally increase it on the mobile screen I'd enter this


@media only screen and (max-width: 991px) {
	h3 {
		font-size: 12px !important;
	}
}

 

Except I'd put h1 and 25px

Share this post


Link to post
  • 0
Posted (edited)

So the code works if I define the header but not if I use the block ID. Any suggestions?

 

I am using a collection and grabbing the block ID inside of it. Does that effect it?

 

@christyprice

Edited by jondemeo

Share this post


Link to post
  • 0
Posted (edited)

@jondemeo make sure you are targeting the correct form of text: h1, h2, etc. Selecting the block-ID should work. If you want to share a link, perhaps we can help with more specific advice.

Edited by christyprice

Share this post


Link to post
  • 0
Posted (edited)

@jondemeo, try adding this to Design > Custom CSS

@media only screen and (max-width: 991px) {
	h1 {
		font-size: 14px !important;
	}
}

then just change that font-size number to the size that works for you

This targets all the h1 on mobile, so should be good.

If you only want it for the homepage, then try this:

@media only screen and (max-width: 991px) {
	#collection-5f242e14448b5e0c62fa6f55 h1 {
		font-size: 14px !important;
	}
}

 

Edited by christyprice

Share this post


Link to post
  • 0
Posted (edited)

@christyprice Thank you for this and it works. My issue is the first part that says "Launching in Topeka, KS in late 2020." I want to remain the same size yet it is h1. I want to target certain blocks to minimize their size on that same page. I am using the below code but replacing it with my block code and it is not working.

 

@media screen and (max-width: 640px) {
#block-b804c57f124fbfbe2d7f {
	font-size: 20px !important;
	}
}
Edited by jondemeo

Share this post


Link to post
  • 0
On 1/12/2020 at 12:50 AM, 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   I need help with my mobile banner. its cropping on mobile. please help.

here's the url:
https://www.patientorator.com/

Thanks in advance!

Share this post


Link to post
  • 0

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.  

Share this post


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