Amending font size of specific block in section on homepage

Store Design
1

Please could someone help me amend the font size of a block? What do I need to add in to the below in order to toggle the font size?

See current schema:

{% schema %}
{
“name”: “Multi Banner”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”
}
],
“blocks”: [
{
“name”: “blocks”,
“type”: “detail_box”,
“settings”:
[
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”
},
{
“type”: “textarea”,
“id”: “text”,
“label”: “Text”
}
}
]
}
],
“presets”: [

{
“category”: “Home Blocks”,
“name”: “Multi Banner”
}

]
}
{% endschema %}

1 Like
2

@jbrock93

Well, I do not think that you need to change the schema for font size only. Please provide your website URL and password if any. I will check and provide the solution here.

Thanks!

1 Like
3

https://misfits.health/

1 Like
4

@jbrock93 Could you please share screenshot for which particular section you want to change font size?

5

@jbrock93

Please share a screenshot that which section’s font size you would like to change?

6

jbrock93_0-1614860243948.png
jbrock93_0-1614860243948.png1914×602 315 KB

1 Like
7

@jbrock93 Add below style to end of your style/css file

div#shopify-section-1597920276354 p {
    font-size: 18px !important;
}
8

@jbrock93

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media (min-width: 768px){
div#shopify-section-1597920276354 p, #shopify-section-cdk-multi-banners p {
font-size: 20px !important;
}
}

Hope this helps.

Thanks!

1 Like
9

Amazing, thanks @dmwwebartisan . The sections so much better on desktop - however on mobile it still requires quite a long scroll. Any recommendations on how to make the mobile section more condensed?

1 Like
10

@jbrock93

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media only screen and (max-width: 749px){
div#shopify-section-1597920276354 p {font-size: 11px !important;}
.cdk-multi-banner .multi-banner-row .equal_box {width: 33% !important;}
}

Hope this helps.

Thanks!

1 Like
11

@jbrock93

If helpful then please Like and Accept Solution.