#Need help with footer format

1 messages · Page 1 of 1 (latest)

boreal pollen
#

I'm having a bunch of issues with the formatting of my footer. It's split up into two pieces, top and bottom. The main issue are with the top part. There's three flex elements that I want to stay the same width and move around based on the window width, but when the window gets resized it just squishes them. Also, one of the flex boxes is a set of images, and when the window is resized the images are squished until they vanish.

naive thistle
#

Got some code and designs?

#

Are you using any particular css library?

boreal pollen
#

tailwind i believe

naive thistle
#

Don’t you know? ☺️

boreal pollen
#

sorry there's some extra in there i uploaded it with discord's thing

#

and no i don't know

#

wait it is tailwind

#

yes

naive thistle
#

What is it supposed to look like?

boreal pollen
#

Hopefully, there's a top section with some contact and location inforametion to the left, and then the line of icons to the left. if the window resizes, then the images with stay the same width and height and just move underneath the text. then underneath that is just a small block of text that seems to work normally. ALSO. when the window resizes small enough, for some reason the youtube icon just moves up like 10 pixels and then moves back into line when the window gets big again.

naive thistle
#

Sorry but if I’m going to help with styling I need to see a design to know what it looks like 😊

boreal pollen
#

i'll start up a dev site and send the link

#

i've got a pretty good layout when the window is normal

#

wait no

#

okay should look something like this:

text text icon icon icon icon icon icon
text text

text

#

i would hope that the top section text and icons could be centered but every time i try to center an element it doesn't work, idk

#

the bottom text is already right aligned which is what i want, not shown there tho

#

then when the window gets resized i'd like something like:

text text
text text
icon icon icon icon icon icon

text

west igloo
#

Use flex-wrap on the flex container and give the two left column a fixed size with w-#. The last column should have flex-1 to take up the remaining space and a min-w-fit which fits the content.

west igloo
#

Alternatively, if you want it to wrap at a certain breakpoint, you can give the last column something like flex-1 min-w-full lg:min-w-0

#

And finally, there's also the option of using grid.

Container: grid grid-cols-4
Columns 1 and 2: col-span-2 sm:col-span-1
Column 3: col-span-4 lg:col-span-2

boreal pollen
#

thank you :D

boreal pollen
west igloo