Change position of the social media icon(s) in the footer

Store Design

Topic summary

A user wants to reposition social media icons in their footer to align horizontally with the “Contact” section text and adjust the icon size.

Current Status:

  • The original poster confirmed that repositioning (step 1) has been successfully implemented
  • Icon resizing (step 2) remains an open question

Solutions Provided:
Three community members offered CSS code solutions to reposition the icons:

  • All solutions involve editing the theme’s CSS file (theme.css or base.css)
  • Code targets the .footer-block--newsletter class with responsive media queries
  • One solution includes icon sizing via .svg-wrapper width adjustment (35px)

Technical Details:

  • Website uses Shopify (based on “Online Store → Theme → Edit code” instructions)
  • Solutions use flexbox layout and responsive breakpoints
  • One responder included a screenshot showing the expected result

Next Step:
The user is awaiting guidance specifically on increasing icon size beyond what was initially provided.

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

I would like to place the social media icons on the same line that is also the starting point of the text under Contact.

Also I would like to be able to change the size of the icons.

Website: edensbakehouse.nl

Password: yuidri

EdensBakehouse_2-1735823654219.png
EdensBakehouse_2-1735823654219.png2536×728 107 KB

2

Hi @EdensBakehouse

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
span.svg-wrapper {
    width: 35px !important;  
}
@media(min-width:750px){
.footer-block--newsletter.scroll-trigger.animate--slide-in {
    width: 37.3%;
    margin: auto;
    display: flex !important;
    justify-content: flex-start !important;
    margin-top: 0 !important;
    
}
}
@media(min-width:1024px){
.footer-block--newsletter.scroll-trigger.animate--slide-in {
    padding-left: 5px !important;
}
}
@media(max-width:1023px){
.footer-block--newsletter.scroll-trigger.animate--slide-in {
    padding-left: 0px !important;
}
}

Result:

websensepro_0-1735825564936.png
websensepro_0-1735825564936.png793×475 127 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

3

Hello, @EdensBakehouse

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
@media (min-width: 769px){
.footer-block--newsletter.scroll-trigger.animate--slide-in {
    margin: auto;
    display: flex;
    justify-content: flex-start;
    margin-top: 0 !important;
    padding-left: 35rem !important;
}
}
@media (max-width: 768px) {
.footer-block--newsletter.scroll-trigger.animate--slide-in{
    padding-left: 0px !important;
}
}

Thanks!

4

Hi @EdensBakehouse
Please put this css in theme.liquid before body closing tag

Thanks!

5

Thank you for helping me with step 1.

Is there also a possibility to make the icons bigger? (step 2)