Hey guys,
I am using flexbox to center a couple divs on a page but I’d like the divs to not go past the left margin when the browser becomes more narrow than the centered div. Right now, they stay centered thru mobile. Any thoughts would be much appreciated.
My read-only link is: https://preview.webflow.com/preview/mybluecard?preview=0fdb0fae7d4300293fb3b00b93bb624f 1
My preview link is: http://mybluecard.webflow.io/test
Thanks in advance,
Alfredo
Hey @alfredo,
Looking at your site, but could you please further explain or provide screenshots of which specific elements you are referring to. Also which breakpoint do you begin seeing the issue, tablet, mobile landscape, or mobile portrait?
If you can point me in the right direction, I’m glad to try and help you.
Hi @matthewpmunger!
Thanks so much for your response. Let’s see if I can clarify.
If you go to http://mybluecard.webflow.io/test, you’ll see that I have two cards. They are centered and stay centered no matter what the browser size is. I’d like them to stay centered while the browser is 810px or greater but as soon as the browser width drops below 810px I’d like those two cards to not go past the left margin with some space between the left screen edge and the first card and some more space between the first and second card.
Screenshot of what happens now attached as well one for what I’d like to have happen.
I’ve got everything working except getting it to not go past the left margin.
I hope this clarifies your question. Really appreciate you giving me your thoughts!!!
Thanks in advance,
Alfredo
Based on what you’ve described if you set div with the class of 1 to justify:start that gets what you are looking for.
Hope that helps. Happy designing!
Also I made these changes at the tablet breakpoint.
Maybe also make the 2 have a flex child setting of expand. This way the cards will stay centered until they don’t fit and then the left align will take precedence.
Also the overflow: hidden on 1 is cutting the shadow off on the 2nd card. Either remove that or add padding equal to the amount of shadow.
Hey @matthewpmunger
Thanks for that.
Maybe I’m not doing something right. When I set div with the class of 1 to justify:start it moves everything to the left margin. While it definitely solves the problem of the cards not passing the left margin, I want those cards in the center UNTIL the browser width is less than 810px
I messed around with some settings and have figured out how to get it to work perfectly in terms of centering the cards and now the left-most card does not pass the left margin. The only issue i’m having now is that the right-most card still goes past the left margin.
I published changes so if you take a look and change your browser size you’ll see what I mean.
Appreciate you sharing your knowledge!
fredo
Sorry you’re still having problems. Did you see my second message? It was working when I tried that. Now it’s not working so something else must have changed. The tricky part is that you’re using an absolute div inside of a flexbox which is creating the difficulty.
Keep me updated and I’ll try to help some more later when I get the chance. I have a project with overlapping divs that I can refer to also.
@matthewpmunger really appreciate all the help. i think I figured it out. Take a look if you have any interest.
I stopped trying to figure out how to have one setting that worked on all browsers and just adjusted the settings for mobile landscape.
Again, many many thanks!
alfredo
Glad you got it work out! 
