Mobile vs desktop resizing

[Hello29]

 

 

 

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

[DaisyVo]

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

[Hello29]

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.