Increase size complimentary products

Store Design
, , , ,

Topic summary

A user seeks to enlarge the complimentary products section on mobile, as the current display is too small for customers to view products clearly. An attached screenshot shows the Focal theme on their Shopify store.

Proposed Solutions:

  • Team_OSC provided CSS code to increase font size in base.css, targeting .item-meta__title with font-size: 1.5rem
  • The original poster clarified they need the product images enlarged, not just the header text
  • PageFly-Henry offered a more targeted solution: add CSS to theme.css that sets .product-item__image-wrapper to width: 150px and margin-right: 10px within a media query for screens up to 767px wide

Status: The discussion remains open, awaiting confirmation whether the image-focused CSS solution resolves the mobile display issue.

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

Hi,
I would like to increase the size of my complimentary products section on mobile, for some reason it is very small and people can’t really see the products so good. Hope someone can help with this :slightly_smiling_face:

Password: 123456
26eacc-2.myshopify.com
Focal theme

Daniel19901_0-1718619856892.png
Daniel19901_0-1718619856892.png273×200 12.1 KB

2

Hi @Daniel19901

Paste this code in base.css

.product-item-meta__title {
    font-size: 1.5rem;
}

Regards

Team_OSC

3

@Team_OSC thx, but I was referring to the images, not just the header

4

Hi @Daniel19901

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){

.product-item__image-wrapper {

width: 150px !important;

margin-right: 10px !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly