PLATFORM

  • Tails

    Create websites with TailwindCSS

  • Blocks

    Design blocks for your website

  • Wave

    Start building the next great SAAS

  • Pines

    Alpine & Tailwind UI Library

  • Auth

    Plug'n Play Authentication for Laravel

  • Designer comingsoon

    Create website designs with AI

  • DevBlog comingsoon

    Blog platform for developers

  • Static

    Build a simple static website

  • SaaS Adventure

    21-day program to build a SAAS

COMMUNITY
MORE
Question By

hi030626

Unsolved
Back to All Questions

How to decrease font size

mimung ・

Dec 14th, 2023 08:54 AM

I want to decrease all test like this. html { /* apply a natural box layout model to all elements */ box-sizing: border-box; background-color: $background-color; font-size: 14px;

@include breakpoint($medium) { font-size: 16px; }

@include breakpoint($large) { font-size: 18px; }

@include breakpoint($x-large) { font-size: 20px; }

Report
DigitalOcean Laravel News Genesis
bobbyiliev ・

Dec 14th, 2023 09:14 AM

Hi there,

If I get the question right, you simply need to adjust the font-size values. Your current CSS code applies different font sizes based on the screen size, using breakpoints. If you want to reduce the font size across all these breakpoints, you should decrease each font-size value accordingly.

Here's an example of how you can modify your CSS to decrease the font size:

html {
    /* apply a natural box layout model to all elements */
    box-sizing: border-box;
    background-color: $background-color;
    font-size: 12px; /* Decreased from 14px */

    @include breakpoint($medium) {
        font-size: 14px; /* Decreased from 16px */
    }

    @include breakpoint($large) {
        font-size: 16px; /* Decreased from 18px */
    }

    @include breakpoint($x-large) {
        font-size: 18px; /* Decreased from 20px */
    }
}

If this is not what you are after, feel free to share more information!

Report