Scale code blocks for mobile

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:



But on a mobile it looks like this:



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.

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. 

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?

Please post. a link to your site

Website password: Testing

Following. I have the same issue.

Also following - v7.1 scalability from desktop to mobile is non-existent and it needs changing to how v7 operated.

Also following, I'm having the same issue where I use code blocks to display virtual tours in an iframe. Looks great on desktop, looks like poo on mobile. I've tried resizing with spacers and other elements, but it always cuts the page this way. Anyone finding a fix? 

site:   https://www.atlas360virtualtours.com

On 1/29/2021 at 6:17 AM, Atlas360 said:

Also following, I'm having the same issue where I use code blocks to display virtual tours in an iframe. Looks great on desktop, looks like poo on mobile. I've tried resizing with spacers and other elements, but it always cuts the page this way. Anyone finding a fix? 

site:   https://www.atlas360virtualtours.com

 

 

Add to Design > Custom CSS

/* mobile iframe */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1611768057164_13459 iframe {
    width: 100% !important;
    height: auto;
}
}