# Jaspreet Kaur

> CSS Specialist for Accessible, Responsive Sites


## Posts

- [Fluid Scaling: Controlling Bounds with Min and Max](https://jaspreetkaur.com/fluid-scaling-controlling-bounds-with-min-and-max/): While the fxx() function ensures perfect proportionality, pure fluid scaling can be dangerous. If a paragraph has font-size: fxx(16) (based on a 1920px design), and a user views it on a 320px mobile phone, the font size will proportionally scale down to roughly 2.6px. This is completely illegible. Therefore, we must set “guardrails”—mathematical boundaries that dictate how small or how […]
- [Fluid Scaling: Implementation in SCSS](https://jaspreetkaur.com/fluid-scaling-implementation-in-scss/): In Part 1, we learned that the core of our fluid scaling relies on wrapping a target pixel value in a calc() function multiplied by our global ratio variable: calc(VALUE * var(--wp--custom--fxx)). While powerful, writing out that full calc() string every time we want to define a padding, margin, font-size, or width is tedious and prone to typos. To solve […]
- [Fluid Scaling: The Core Concept](https://jaspreetkaur.com/fluid-scaling-the-core-concept/): In modern web design, creating layouts that look perfect on every screen size—from massive 4K monitors to small mobile phones—is a significant challenge. Traditional approaches rely heavily on fixed pixel values (e.g., width: 300px) combined with numerous media queries (@media (max-width: 768px) { ... }) to snap elements into different layouts at specific breakpoints. This “snapping” […]
- [Creating Outlined Text Effects with CSS Text Stroke](https://jaspreetkaur.com/creating-outlined-text-effects-with-css-text-stroke/): Typography plays a crucial role in modern web design. With the right styling, even a simple text element can serve as a strong visual anchor for your layout. One effective yet often overlooked technique is the use of CSS text stroke, which allows developers to add outlines around text — creating clean, bold, and visually […]

## Pages

- [Cookie policy](https://jaspreetkaur.com/cookie-policy/): The cookies jaspreetkaur.com uses, what each one does and how to accept, reject or change your choice.
- [Legal information](https://jaspreetkaur.com/legal-information/): Who runs jaspreetkaur.com, how to contact Jaspreet Kaur, copyright and the MIT licence for code samples (Impressum).
- [Accessibility statement](https://jaspreetkaur.com/accessibility/): How jaspreetkaur.com meets WCAG 2.2 Level AA, the known accessibility limitations and how to report a problem.
- [Blog](https://jaspreetkaur.com/blog/): Practical writing on CSS, SCSS, accessibility, responsive layouts and design systems by Jaspreet Kaur.
- [Home](https://jaspreetkaur.com/): CSS specialist and frontend developer helping agencies and product teams build accessible, responsive, user-centric websites and design systems.
- [Privacy policy](https://jaspreetkaur.com/privacy-policy/): How jaspreetkaur.com handles your data: Google Analytics cookies, emails you send, server logs, embedded content and your privacy rights.

## Optional

- [Agent (MCP protocol)](websites-agents.hostinger.com/jaspreetkaur.com/mcp)

[comment]: # (Generated by Hostinger Tools Plugin)