- This topic is empty.
March 28, 2019 at 7:44 am #285592
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]March 28, 2019 at 8:36 am #285596Paulie_DMember
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.March 28, 2019 at 11:14 am #285603
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.March 28, 2019 at 11:31 am #285604Paulie_DMember
We need the HTML & CSS but just enough to demonstrate the problem.March 28, 2019 at 11:50 am #285605
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.March 29, 2019 at 1:31 am #285681ShikkedielParticipant
There are two elements,
margin-rightdefined in the style. If I remove these, the scrollbar disappears.March 29, 2019 at 9:03 am #285704
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!
- The forum ‘CSS’ is closed to new topics and replies.