Hello,
I have “team” page set up, with 4 columns wide on desktop (one row), then 2 columns wide (two rows) for tablet portrait mode. In just the range of 768 to 792 pixels wide, the second row gets jumbled. It appears that column 1 (top left) is too “long” so it pushes column 3 (which should be bottom left) over to the right, creating a 3rd row for columns 4 (which should be 2nd row right).
See the pic. The thing is, all the sizings are set to “auto”, so I’m not sure why it’s doing this. It’s probably something I’m doing–can you help?
See below:
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
please share read only link, thanks
I got there… in the end!
I turned on X-ray mode so you can see all the outlines of every element.
By moving the slider to change the width I noticed that the text of Shultz was causing the issue.
Change paragraph 3 to Display > Inline and all is good.
Thanks for the puzzle!
Hi Jonathan–thank you for the reply, and for taking the time. I changed Paragraph 3 to inline, but it moved the problem to a different screen size range. Now the problem happens at 936 to 958 pixels wide. Do you have any suggestions? Again, I really appreciate your help!
Best,
J
Jonathan_Holden, or anyone else – might anyone have a suggestion on the jumbling issue? Jonathan’s suggestion made it such that the issue isn’t present at a typical screen size, but you could still run into it on a desktop if you’re resizing your browser. I’d like to find a way to eradicate, if at all possible.
Thanks in advance for your help!
-J
Anyone have any suggestions? I’m still stuck on this one… Thank you!
-J
Anyone have any ideas? Thanks in advance!
Best,
J
guoshuzhang, thanks for the tip! That appears to have done it. I just wasn’t as familiar with grids. I can’t believe what I’ve been missing–thanks!
-J
