Mobile vs desktop resizing

Store Design
, ,

Topic summary

A user is experiencing responsive design issues with heart icons and social media elements on their Shopify store. The main problem: when heart icons are sized correctly for mobile view, they appear too large on desktop, and vice versa.

Specific requests:

  • How to set different icon sizes for mobile vs desktop views
  • How to remove “<1/3>” text below hearts on mobile while keeping navigation arrows functional
  • Need white outline social media icons for Instagram, TikTok, YouTube, and Twitter

Current status:
A helper provided CSS media query code to:

  • Adjust heart icon sizes on desktop (targeting screens 1024px+)
  • Hide the “<1/3>” element on mobile (max-width 768px)

The user reports the heart icon code didn’t work as expected and notes difficulty locating where the social media icons are hosted in the theme files when inspecting elements. The discussion remains ongoing as the sizing issue persists and the social media icon request is unresolved.

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

9874b9c1-0efc-459f-92ef-08a2b0ff757f.jpeg
9874b9c1-0efc-459f-92ef-08a2b0ff757f.jpeg1152×2048 311 KB

5cca8643-4446-401f-b3b1-b30a15022a40.jpeg
5cca8643-4446-401f-b3b1-b30a15022a40.jpeg1600×686 115 KB

7454c4ad-6a49-4587-93f5-973a8022bf6b.jpeg
7454c4ad-6a49-4587-93f5-973a8022bf6b.jpeg739×1600 116 KB

Hello,

I’ve attached photos of both mobile and web view. The issue is that when we adjust the heart icon sizes to look correct on mobile (e.g., heart under black on mobile view), they appear too large on desktop and we want it to look like the heart size under blonde on desktop view. How do I have different sizes for mobile and desktop?

Is there a smart, responsive solution for this?

Additionally:

  1. Could I have the codes for white outline social media icons for Instagram, TikTok, YouTube, and Twitter (like in the attached photo).

  2. How can I remove the <1/3> under the hearts on mobile so they scroll seamlessly, but the arrows remain hidden?

Thank you!

Link to Website:

https://n2eadfpzvagk7jla-80814506316.shopifypreview.com

2

Hi @Hello29

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (min-width: 1024px){
section#shopify-section-template--22642140348748__multicolumn_MWXVXq .multicolumn-card.content-container > .multicolumn-card__image-wrapper > .media > img {
    width: 60px !important;
    height: auto !important;
}
}

Here is the result: https://prnt.sc/Ck8hR7tq90UT

This is the code to remove 1/3 on mobile

@media screen and (max-width: 768px){
.slider-buttons.large-up-hide {
    display: none !important;
}
}

Here is the result: https://prnt.sc/b3JWL2FbkyGz

Could you let me know where the Instagram and TikTok icon images are hosted? Please provide the link to those images so I can review them.
I hope this helps

Best,

Daisy

3

Hi Daisy, thank you so much for your help!

The hearts didn’t change with the code you provided. I’m trying to figure out how to make them one size on mobile and a different size on desktop.

As for the social icons, when I inspect the element, I don’t see a clear link or path to where they’re hosted it seems to be built into the template.