Solved

Amending font size of specific block in section on homepage

jbrock93
Tourist
8 0 4

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 %}
Accepted Solutions (2)
dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

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

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

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

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 10 (10)

dmwwebartisan
Shopify Partner
12280 2546 3693

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

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
jbrock93
Tourist
8 0 4
SagarSukhanandi
Shopify Partner
279 58 71

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
dmwwebartisan
Shopify Partner
12280 2546 3693

@jbrock93 

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

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
jbrock93
Tourist
8 0 4

jbrock93_0-1614860243948.png

 

SagarSukhanandi
Shopify Partner
279 58 71

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

div#shopify-section-1597920276354 p {
    font-size: 18px !important;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

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

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
jbrock93
Tourist
8 0 4

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?

dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

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

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
dmwwebartisan
Shopify Partner
12280 2546 3693

@jbrock93 

 If helpful then please  Like  and  Accept Solution. 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app