Changing size of one banner heading for mobile only

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

thank you so much! I didn't realize you could target blocks. Super helpful.

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"

@JonJonJon that's the extension I use and recommend. 

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

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

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

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. 

Thanks so much @christyprice. Works great.

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.

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

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

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

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

add this

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

2 minutes ago, tuanphan said:

add this

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

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

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

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

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

https://lobster-decagon-hpzf.squarespace.com/

Password: missionchurch

I am trying to change the font size for the large text parts on the homepage (for mobile only). I want the first text part "launching" to remain the same though.

@christyprice

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

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

You need to add h1 after the block-id, just like it is after the collection-id in the code above

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!