How can I resize the collection description for different devices?

Store Design

Topic summary

A user wants to resize their collection description text box to display 2-3 lines instead of one, with specific dimensions for different devices:

Target dimensions:

  • Mobile: 362×76 px
  • Desktop: 659×63 px

A PageFly representative provided a CSS solution involving:

  • Navigating to Online Store → Theme → Edit code
  • Adding custom CSS to the theme.css file in the Assets folder
  • Using media queries to set different width and height values for mobile (max-width: 767px) and desktop (min-width: 768px) breakpoints

The code snippet targets the .collection-description class with !important flags to override existing styles. The solution appears complete but the posted code contains some formatting issues in the original message.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

how do i change the collection description to be smaller, i want it to be 36276 px for mobile and 65963 for desktop, so that its 2-3 lines instead of just one

sondreskskfsghj_0-1677092665729.png
sondreskskfsghj_0-1677092665729.png1699×396 329 KB

store link: https://8c2dd1-3.myshopify.com/collections/best-sellers

2

Hi @sondreskskfsghj

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:

Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file

@media (max-width:767px){
.collection-description {
    width: 362px !important;
    height: 76px !important;
    margin:auto;
}
}
@media (min-width:768px){
.collection-description {
    width: 659px !important;
    height: 63px !important;
    margin:auto;
}
}

Hope my answer will help you.

Kate from PageFly Team