Collection page overhang

Store Design
,

Topic summary

A mobile display issue on a Shopify collection page where the “people also searched for” section is overhanging beyond the viewport.

Initial Problem:

  • The overhang occurs specifically on mobile devices on the treatment couches collection page
  • Affects the visual layout and user experience

Proposed Solutions:
Two community members offered CSS fixes to be added to the theme.liquid file:

  1. First approach (Moeed): Add custom CSS above the </body> tag to address the overhang
  2. Follow-up fix (Moeed): Additional CSS targeting .links a elements with media query for screens under 767px width, adjusting margins and font size to 10.5px
  3. Alternative solution (PageFly-Richard): Suggested placing CSS code above the </head> tag instead

The original poster reported that the first fix resolved the top section but caused the “people also searched for” section to be cut off, prompting the additional CSS adjustment. The discussion remains technical, focusing on CSS modifications to resolve responsive design issues.

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

the “people also searched for” section is overhanging on mobile on this url. Can someone advise please.

https://www.physioworldshop.co.uk/collections/treatment-couches

IMG_3471.jpeg
IMG_3471.jpeg461×999 70.9 KB

2

Hey @ChrisW3

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1731428014763.png
Moeed_0-1731428014763.png379×665 36 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

IMG_3472.jpeg
IMG_3472.jpeg1179×1225 85.3 KB

this fixed the top but the people also searched for section is now cut off

4

Keep the previous code and add this new code above in the end of theme.liquid file.

@media screen and (max-width: 767px) {
.links a {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    font-size: 10.5px !important;
}
.links {
    margin: 0 !important;
}
}

RESULT:

Moeed_0-1731432406903.png
Moeed_0-1731432406903.png373×663 24.4 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

5

Hi @ChrisW3

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Richard | PageFly