# Adding the CSS

### ✍️ Objective - To add design to the category divs

Open the layout.css file, you would be seeing some existing code in it, for now you can ignore it.

Let's add the following css to the end of layout.css file

```css
/* layout.css */

/* ... other existing styles ... */

.container {
  display: flex;
  overflow-x: auto;
  width: 100%;
  padding: 1rem;
}

.category-card {
  flex: 0 0 auto;
  width: 200px;
  margin-right: 1rem;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  overflow: hidden;
}

.category-link {
  text-decoration: none;
  color: inherit;
}

.category-image-wrapper {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: relative;
}

.category-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-name {
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: bold;
}

/* Media queries for responsiveness */

@media (min-width: 480px) {
  .category-card {
    width: calc(50% - 1rem);
  }
}

@media (min-width: 768px) {
  .category-card {
    width: calc(33.333% - 1rem);
  }
}

@media (min-width: 992px) {
  .category-card {
    width: calc(25% - 1rem);
  }
}

@media (min-width: 1200px) {
  .category-card {
    width: 200px;
  }
}
```

This CSS code snippet provides styling for the category card HTML structure. The main container is a flex container with horizontal scrolling enabled. Each category card has a fixed width, a margin to its right, and some basic styling such as a background color, box-shadow, and border-radius.

{% hint style="info" %}
Don't remove classnames which start with "dkn-" because they are used by internal functions.
{% endhint %}

The category link has its text decoration removed and inherits the color from the parent. The category image wrapper has a square aspect ratio and uses the padding-bottom trick to achieve this. The image is positioned absolutely within the wrapper and covers the entire space, maintaining its aspect ratio.

Lastly, the category name has some padding, font size, and font weight adjustments to make it stand out more.

<figure><img src="/files/esHQUzulkJXnYUbJg5Fs" alt=""><figcaption></figcaption></figure>

Wohoo! It looks beautiful now, with our CEO Leo lighting up the page with his cuteness.\
\
After you've added this, its time to add some functionality to our cards, what if a user clicks on the category card? We could take it to category page, display a message or just shower confetti! <br>

\
We'll figure it out in the next chapter


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mydukaan.io/basic-code-editing/adding-the-css.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.