Design Packs Docs
design-packs.comView on Shopify App Store
  • Get started here
  • Guides
    • Adding your first section
    • Adding your first template
    • General settings
    • Helpful hints & resources
    • Troubleshooting
    • Performance
  • Fundamentals
    • Section Settings
      • Setting Solid Background Colors instead of Gradients
      • Understanding Layout Settings: Size & Maximum Width
      • Understanding Inner Padding & Outer Margin Settings
      • Custom Classes Setting
      • Show Individual Variants Setting
      • Enable Metafield Detection Setting
        • Metafield ready sections
        • How to Use Metaobjects on Product template with Image with text - simple section
      • Metafield Badge Setting
      • Using Blog Tags Setting to Show Product-Specific Blog Posts
      • Add custom events when product is added to cart
      • Size Controls for Image & Video Blocks
      • Featured collection - blocks
        • How to use the Liquid Block in "Featured collection - blocks" Section to Add Custom Review Apps
        • How to use the Metafield Image Badge block
        • How to use the Metafield text block
      • Newsletter/Signup Form Block - Tags
      • How to add a Hidden Field in Contact Form
    • Sections
      • Banners & Sliders
      • Flourish
      • Icon & Logos
      • Image with text
      • Menus & Navigation
      • Blocks & Columns
      • Text Content
      • Products & Collections
      • Article sections
      • Galleries
      • Misc
      • Modal Popup
    • Templates
      • Regular Page
      • Lookbooks
      • Blogs
      • Blog Posts
      • Collection
      • Landing pages
    • Custom CSS
      • Basic CSS examples
      • Mobile CSS examples
      • Advanced Examples
    • Shopify expertise
      • Theme editor
      • Metafields
      • MetaObjects
    • How to Guides
      • How to jump/ link to another section on the SAME page
      • How to forward a contact form in Shopify to a different email with Gmail filters
      • How to create new page templates (and keep the original as a starting point)
      • Creating a New Product Template
      • How to set default article template for all blog posts
  • Use Cases
    • For Designers
    • For Developers
    • Agency Licenses
    • Affiliate Program
  • PRODUCT BLOCKS
    • Product Blocks
      • Image with text block
      • Connected products block
      • Variant descriptions block
      • Value icons block
      • Video block
      • Collapsible content block
      • Feature range block
  • Integrations
    • Theme Updater App
Powered by GitBook
On this page
  • How to control text size on mobile/ smaller devices
  • How to hide section on mobile
  • How to show a section ONLY on mobile
  1. Fundamentals
  2. Custom CSS

Mobile CSS examples

How to control text size on mobile/ smaller devices

All of the font sizes in Design Packs are controlled by CSS variables, so you can update the size of text depending on the screen size. Copy and paste the following code into the Mobile CSS and change the values to see the font size adjust. These pixel sizes will grow or shrink based on how large you have set the size with the "Text size" slider.

--dp-heading-size will affect all of the larger h1, h2 headings (default size is 35px) --dp-small-heading-size will affect the smaller headings such as h3, h4, h5, h6 (default size is 24px) --dp-body-size will affect paragraphs, buttons, product titles, etc (default size is 18px)

{
--dp-heading-size: 20px;
--dp-small-heading-size: 18px;
--dp-body-size: 13px;
}

If you would prefer to hardcode the font size (it will NOT change when the "Text size" setting changes, then use the following code and update the pixel values to your preferred numbers.

.dsgn-pck__heading {
  font-size: 20px;  
}

.dsgn-pck__small-heading {
  font-size: 18px;
}

.dsgn-pck__text p {
  font-size: 18px;
}

.dsgn-pck__text a {
  font-size: 18px;
}

.dsgn-pck__button {
  font-size: 18px;
}

How to hide section on mobile

To hide a section on mobile, add the following code only into the Mobile CSS field:

{
  display: none;
}

How to show a section ONLY on mobile

To hide a section on desktop and show on mobile, add the following code into the CSS field:

{
  display: none;
}

And then add the following code into the Mobile CSS field:

{
  display: block;
}
PreviousBasic CSS examplesNextAdvanced Examples

Last updated 1 year ago