Problem with horizontal scroll
Hello. I'm working on Instagram-like clone and I'm having issue with making stories on home page scroll horizontally on overflow. I've been trying to fix it for quite some time now with no sign of success... So I copy pasted relevant code from my site to tailwind playground (and cleaned code for a bit) to replicate the issue. So this code is code before I started doing anything. If someone could make it work I'd really appreciate it.
So what I need is for stories on top to have overflow-x: auto, but to actually work lol. And they shouldn't go behind right sidebar like they do.
Also you might need to zoom out a bit to see right sidebar.
https://play.tailwindcss.com/i21MnDZyT2
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
7 Replies
Oh and right sidebar should have flex-shrink: 0 so it doesn't shrink.
I don't fully understand what you are trying to achieve and I can't seem to get instagram to work on my computer to see what effect you are after.
I see that you are hiding the 2 side columns on smaller screens. Is there a reason why the right-hand column is placed inside the "main" column?
Assuming that they are 3 separate columns coupled with the fact that the side columns are "sticky" I would be tempted to use Grid and actually define fixed spaces for these columns.
I have forked your version and adjusted the code to have 3 columns which hide/display and change their widths according to the breakpoints. I don't think that I have exactly matched your breakpoints but you should get the idea.
Sorry if I completely miss-understood what you are trying to do.
https://play.tailwindcss.com/BtFiBiufBT
Well I'm basically trying to recreate Instagram's story list. ONE row of stories that can overflow horizontally, and of then of course you can scroll to see other stories.
Yes actually there is a reason right-hand column is placed inside middle one. The reason why is the way Next.js (which I'm using) routing works. So I basically made left column global, so it's seen on all pages and only right column is... "dynamic". You can see live version of this app on bt-snapgram.vercel.app and you'll see if you navigate to other pages left column (left sidebar) will always stay where it is.
As for you solution... for some reason I see 3 rows of stories? And you have horizontal scrolling on <body> on smaller screens, which i also has problems with
Snapgram
Redesigned Instagram clone. Practice project built with Next.js v14 by @boristenkes on Github.
I added more rows just to test the vertical scroll but thought that I had deleted them - sorry about that.
Can you not save code on Tailwindplay without generating a new URL?
I don't think so lol
ok, that explains why you saw an older version. I am too used to codepen auto save 😆
https://play.tailwindcss.com/rSY4MYGgdW
This version has the right-hand column back within the main container, again using grid as I personally find grid easier to "control".
Yess!! That's exactly what I need! Thank you so much!! 😄