Idea on how to make it responsive
Hi guys,
You might remember this page from some of my previous posts. I redesigned it using real code, avoiding position absolute on every element. Now, I need ideas for how the design should look on smaller screens. One idea is to make everything into a single column. Do you have any other suggestions that would be easy to implement? 😅
Let me know if you'd like any further changes!
9 Replies
Making everything into a single column is pretty much the standard, and easiset (assuming it is set up correctly) way to make this adapt to small screens. It can get more complex if you want it to adapt to a variety of screen sizes.
I suggest that you keep it simple at this stage and follow the norm. If you have used grid it should be relatively simple to adjust the column count or re-assign the grid areas if you have used them.
For the navigation you may need to resort to the "hamburger" solution but that isn't always necessary, especially if you don't have too many menu items.
As your images look to be mostly decorative, you could probably reduce their height or even not display them for small screens to reduce the vertical scroll and "wasted" space.
thanks chris
another question when i see the live preview in my VS code extension it is perfecrly fine but when i open it in an external browser its seems to be shrinking a bit
which one should i trust?
I would trust the external browser view more than whatever vscode is using as it may be adding more headers etc. behind the scenes.
Any idea why does the gap appear although theres nothing on the left side
Not without seeing the code.
It looks like something either has a fixed width or has too much cinturón fit within the space.
thnx chris i found out something was fixed
😊