Flexbox and Mobile Responsive Display Problems

[Gene_W]

Hello,

I have run into a problem I cannot solve. I’m using the code pasted at the bottom of this to facilitate Flexbox on my WordPress site. The problem is on mobile, flexbox items are too wide for a small screen and causes a sidescroll. On desktop and tablet browsers, it looks awesome.

After searching Google, countless articles, StudioPress forum, and reading through the CSS-Tricks Flexbox guide, I admit that I’m still stuck!

Can anyone point out or suggest what I may be missing for mobile responsive display? I sure appreciate any help or advice here.

[MOD EDit – Codedump removed]

[Paulie_D]

Please no codedumps they are rarely useful without the associated HTML.

A reduced demo in Codepen.io or, at the very least a link to teh affected page is preferable.

[Gene_W]

I apologize, I do see the CodePen mention in the tips, but I failed to click the link thinking it was just HTML.

Will just the CSS I’m asking for help with be enough, or is there something more I can provide that will be helpful? I have the CSS in question saved to this Pen.

Thank you.

[Paulie_D]

We need the HTML & CSS but just enough to demonstrate the problem.

[Gene_W]

Ok, thanks again Paulie_D. If you couldn’t tell, I’m kind of out of my element here and have usually found ways to learn what I don’t know with lots of searching, reading, trial, and error.

I went to a post on my site where the Flexbox is definitely acting up, copied the HTML and placed in in the Pen I shared. The CSS I have in that Pen is just the Flexbox code from my CSS. I can paste the whole CSS if that helps or is necessary.

I will say that any post or page on my site where I’ve used Flexbox is not displaying mobile responsive and that’s why I suspect there’s something in my code that is missing.

Thanks again for the help.

[Shikkediel]

There are two elements, .sidenote and .flex-wrapper.upgrade that have margin-left and margin-right defined in the style. If I remove these, the scrollbar disappears.

[Gene_W]

Thank you big time, that helps quite a lot! I removed those margins and it looks much, much better.

One more question if you don’t mind. On that page, there’s the opt-in/sign up form that’s also sitting in a flexbox, “flex-wrapper” and “card flex-item” which is displaying to the right of center. Do you see a way that I can fix that? I’ve noticed those cards in flex-wrappers are off center anywhere I’ve used them, but I don’t see an align or a margin indicator for them.

I appreciate the help more than my keyboard can express!

[Author]

Posts