Prestige Theme Re: How can I make social media icons much larger and under a footer section

Topic summary

A Shopify store owner wants to enlarge social media icons in their footer and reposition them to match a reference image.

Initial Problem:

  • User tried multiple CSS approaches to increase icon size and adjust positioning, but none worked
  • Shared screenshot showing desired layout with larger, repositioned social icons

Solution Process:

  • Support provided CSS code targeting .social-media--list and svg elements
  • First attempt used max-width: 600px media query with absolute positioning
  • After initial code didn’t work, revised to min-width: 600px media query
  • Code sets icon dimensions to 30px and positions them 225px from bottom, 300px from right

Resolution:

  • Solution successfully implemented after adding code to base.css/theme.css file
  • User noted delay in changes appearing on live page versus preview
  • Issue resolved after weeks of troubleshooting
Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.

I’d like to achieve this look and also make the icons larger.

So far I’ve tried the following codes with no luck/change

:

.Footer__Inner span.Icon-Wrapper--clickable {
    font-size: 24px;
}
.Footer__Social {
font-size: 30px; 
}

.Icon {
     width: 22px !important;
    height: 22px !important;
}
.Footer__Social.HorizontalList svg.Icon {
    height: 2rem;
    width: 2rem;
}

shop link is modifiedsix.com

1 Like
  • Here is the solution for you @ModifiedSix
  • Please follow these steps:

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
@media only screen and (max-width: 600px) {
.social-media--list {
    position: absolute !important; 
    flex-wrap: nowrap !important;
    bottom: 225px !important;
    right: 300px !important;
}
.social-media--list svg {
    width: 30px !important;
    height: 30px !important;
}
}
  • Here is the result you will achieve:

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

Hey BSSTeklabs, I’ve pasted it exactly as so, but nothing has changed when previewing.

1 Like
@media only screen and (min-width: 600px) {
.social-media--list {
    position: absolute !important; 
    flex-wrap: nowrap !important;
    bottom: 225px !important;
    right: 300px !important;
}
.social-media--list svg {
    width: 30px !important;
    height: 30px !important;
}
}

can you try this code again

1 Like

Hey isn’t that the same exact code? none the less added it and no change on the homepage

1 Like

Please check your website again.

1 Like

I appreciate you heavily thank you bss, I’ve been stumped with this for weeks. Not sure why it took a while to show up on the live page my apologies. Have an amazing day

1 Like

Glad to help you. Have a good day.

1 Like