How do I fix my front page to work on mobile?
https://www.sf-bibliografia.fi:3000/
I have tried to fix the layout several times but can't figure out why it doesn't work when I try it on mobile (or just make it narrow enough). Should I just ditch the iamge completely when width becomes smaller than the width of the image? Is that the issue?
React App
Web site created using create-react-app
17 Replies
do you have a mockup or a figma design of the website?
Is this visible? There are a few small diffrerences since I made this a year ago but it's close: https://www.figma.com/proto/KUe2X9FxrCAbaFdOmoXjPQ/SuomiSF-Front-Page?node-id=105-2
it requires login
Here's the share link: https://www.figma.com/proto/KUe2X9FxrCAbaFdOmoXjPQ/SuomiSF-Front-Page?node-id=105-2&t=0n8N5dRqTxdJePtG-1. If that doesn't work I don't know what to do.
atill requires login
can you copy-paste in png?
Hm, doesn't the link to the site itself work? You would also see how it misbehaves.
Yes, but i want to see the final result too
just because it misbehaves dosn't mean that what i will say is the right fix
Well, that's currently the "final" version. I'm not good at designing UIs... That Figma version is a year old.
no, no, that's not the problem
Couple of things I might improve but I want to make it functional first.
the problem is that i don't know how it's supposed to look like
Oh, I see. Well, it looks correct when using on desktop. When on mobile or just narrow enough it just simply looks all wrong. The four books in the left hand side don't change to two-row config, instead just don't fit & the text overflows and isn't all visible.
Even the header is cut from sides.
it's the flex
you are trying to make a grid design using flex, but then you set it to do not grow or shrink
i would scrap it and start all over with grid
Sorry, I have to leave for a while because the results of the EU elections are in.
But so it's all wong? 😦
it's not wrong
it's just that you picked flex, but you don't let it flex
and you want everything to stay in a grid, from what i see from the code
but flex isn't the best choice for grids
So how would I let it flex corrrectly? What I do wonder is why they fields don't work properly. I.e. why don't the left column shrink when everything goes into one column?
if your design is a grid, you don't