Why are icons stacked in footer on mobile versions of site?

Design help General
1

My social link icons in the footer look great on desktop, but on mobile they are stacked top to bottom and I’m having a hard time figuring out how to fix it. I tried putting them in columns but it didn’t help. Any ideas? Thanks in advance!

Here is my site Read-Only: https://preview.webflow.com/preview/portfolio-site-c97bee?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-site-c97bee&preview=db47968a7cc3201b4e1d066ff8ceb79c&mode=preview

Here is my site page: https://portfolio-site-c97bee.webflow.io/

2

Wrong flexbox values for mobile (Landscape/portrait):
image

FIX

Step 1 - Footer (Flex container)

direction: horizontal + wrap
image

step 2 - heading

Set the base for h1 to 100%
image

step 3 - copyrights

Remove left-right-margin + add top margin

image

Result :slight_smile:

image

2 Likes
3

@Siton_Systems THANK YOU SO MUCH! Sorry it took so long to get back. The apple store held my computer hostage for a few days to fix the keyboard. Lol. :joy:

1 Like