After adding some code interactivity increased

Store Design
, ,

Topic summary

A user working with the Prestige theme added custom CSS code to adjust padding for a featured collection on mobile devices and reduce spacing between the header and image. However, this caused their site’s interactivity metric to jump significantly from 13ms to 80ms.

Code modifications made:

  • Added mobile-specific padding for featured collection sections
  • Reduced gap between header and image elements

Current situation:

  • The user is seeking advice on how to resolve the performance degradation
  • Another participant requested the store URL and a screenshot to better understand the requirements
  • A screenshot was shared but appears corrupted or improperly formatted in the thread

Status: The discussion remains open with no solution provided yet. The performance impact suggests the CSS implementation may need optimization or an alternative approach.

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

I have added the following codes by experts suggestion to add padding for featured collection (Phone only) and decrease the gap between header and image. But after adding the liquid codes interactivity increased 13ms to 80ms. What I can do??

Theme: Prestige

Website: pretty

Code 1:

@media (max-width: 767px){

section#shopify-section-template–22717424009532__featured_product_WNiRzp,

section#shopify-section-template–22717424337212__main {

padding: 20px;

}

}

Code 2:

@media screen and (max-width: 776px) {

.section-spacing.bordered-section {

margin-block-start: 10px !important;

}

.section-stack {

gap: 0px !important;

}

}

2

Hi, @memahmudhassan

Can you share the store URL and take a screenshot to describe your requirements? So that I can assist you.

3

Screenshot 2024-05-28 144226.png
Screenshot 2024-05-28 144226.png1086×459 162 KB