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

Question

Hello. I am using code blocks so that I can customise, format and size my text in different areas throughout my website, without it affecting the general style of the website on a whole. I am not a fan of the general text box because I can not customise the text exactly how I want it. For example I do not want my H1, H2 or H3 titles to be really big, but I do want some text on my website to be bigger or styled differently in certain areas to stand out and grab attention, which is why I am using the code blocks.

However, I am finding that the code blocks are not scaling correctly for mobile. On desktop they look fine and give the visual impact I am looking for, but on mobile because they are not scaling properly, some of the text gets cut off or is just way too big.

For example, in one code block I am using the following code:

<center>
  <font size="5em" color="#ffffff"><span style="line-height:1.5em"><li style="list-style: none;">Let's get people talking.</li></span></font>
    <font size="7em" color="#ffffff"><span style="line-height:1.5em"><li style="list-style: none;">Let's create something EXTRAORDINARY together!</li></span></font>
<font size="4em" color="#ffffff">
<span style="line-height:2.5em">
  <li style="list-style: none;">I'm ready when you are.</li></span></font>
</center>

Which on a desktop looks like this:

645369451_Screenshot2019-11-13at12_54_05.thumb.png.04fdc7ae94f500a9b0b85fa8b1c66032.png

But on a mobile it looks like this:

588367225_Screenshot2019-11-07at15_47_59.thumb.png.1802d6fe4fca4ba78ecd846c686e8185.png

I am using em instead of px because I read that this is meant to help with the scaling, and in most cases this is fine across my entire site, but for some reason it is not here.

How can I use code blocks to create custom text for visual impact on my site, but still have it scale down so it looks just as good on mobile?

Thanks.

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 0

Personally, I wouldn't use inline styles in a code block for precisely the reason that you have highlighted - it's difficult to make them responsive. 

However, you may be able to get things looking better with your inline styles if you use vw units rather than em. vw is relative to the viewport width. 

A better approach is to learn how to target a specific block for styling. 

This Chrome extension shows you block names that you can use in custom css.  https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

Enabling the extension in your Chrome address bar will overlay the collection ID and block ids on a page. 

To style a text block containing the example you gave earlier you would create a normal text block and insert 4 centered lines of text. 

#the-block-id {
	p { 
		font-size: 2vw; // the first para
	} 
	p + p {
		font-size: 2.5vw; // para followed by a para, so 2nd para
	}
	p + p + p {
		font-size: 3vw; // para followed by a para followed by a para, so 3nd para
	}
	p + p + p + p {
		font-size: 3.5vw; // para followed by a para followed by a para followed by a para, so 4th para
	}
}

Note that the vw values I have used may not be ideal but you can tweak them. Also, the way I have targeted the paras isn't the most elegant, but it should work and give you an idea. 

I would use the above to get the sizing correct for wide screens and then create breakpoints to tweak the size at smaller screen widths. 

#the-block-id {
	p { 
		font-size: 2vw; // the first para
		@media only screen and (max-width: 640px) {
			font-size: 3vw; //increase text size for screens up to 640px
		}
	} 

	p + p {
		font-size: 2.5vw; // para followed by a para, so 2nd para
	}

	p + p + p {
		font-size: 3vw; // para followed by a para followed by a para, so 3nd para
	}

	p + p + p + p {
		font-size: 3.5vw; // para followed by a para followed by a para followed by a para, so 4th para
	}
}

The above shows an additional  breakpoint for the first para on screens under 640px in width. 

Edited by colin.irwin

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

Hi @colin.irwin, thanks for the response.

I tried to do this but nothing is happening, perhaps I am missing something. I created a text block and found the block id using the extension, and have put the above code in the custom CSS section, but it is not affecting the individual paras, only the first line vw is affecting the whole block. How do I get it to change each para? Do I need to do something else?

Edited by Storyteller

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