Page not displaying properly across devices

[gsaboft]

I'm working on a course page built with the new CidiLabs Design Tools. The page has buttons and content cards. In Chrome, on my PC (15") and Mac (13") these look like this: Attachment 1.

When I check in Designer tools the responsiveness for different sized devices, I see this layout for phones: Attachment 2.

So far, so good.

When I shared the page with the clients and they opened the page on their end, it looked like the smartphone layout, everything was stacked. The client is working with 14" and 15" PC laptops. Three people tested in Chrome, Edge, and Firefox, respectively. There were no issues in Firefox, but in both Edge and Chrome everything on the page was enlarged and stacked. I asked them to check browser zoom level - it was at 100%, just like mine and that of the person who had no issues.

I don't know enough about html and responsiveness to troubleshoot this. I don't even know where to start.

(I'm an instructional designer but not a coder and this is beyond my current level of html/css understanding).

ETA:

1. The buttons are styled to appear 3 in a row for large and medium screens and 1 in a row for small screens. 

2. I've added the html code.

[Chris_Hofer · Accepted solution]

Hi @gsaboft ...

I also use the Cidi Labs DesignPLUS tools at our College.  Since I cannot see the code you have on your page to help troubleshoot this, I do have a couple suggestions for you.

1. Have you reached out to Cidi Labs tech support?  They are super responsive (shout out to Claire and Sarah!)  You might consider submitting a ticket to them and also include the HTML code in a file to share with them, and they would be able to take a look at your code to see if they can spot anything that might be "off".  Here is their support website: Support | Cidi Labs.
2. Are you familiar with the Slack application?  If so, Cidi Labs has their own Slack group where lots of Cidi Labs users are there helping each other out, and you'll also get responses from people like Kenneth and some of the other staff at Cidi Labs.  Here's that page for you: Join Us On Slack | Cidi Labs

Hopefully you'll be able to get a quick response using either of these methods.  (And, if you do join the Slack group and post your question, it may be complex enough that they ask you to submit a ticket anyway to share your code.)

Good luck to you!

[gsaboft]

Thank you, Chris - I'll reach out both ways right now. I appreciate the information!!!

I'm also going to add the code to my post above, in case someone here is also able to see what's broken.

[Jenny121]

Since the layout works fine in Firefox but not in Chrome or Edge, and the zoom level is consistent, I wonder if display scaling settings on the clients' Windows devices might be affecting how the page renders. Sometimes a high display scaling (like 125% or 150%) can trick the browser into using a mobile-style layout even on a larger screen. It might be worth asking them to check their display settings in Windows to see if that's the case. Also, it’s great that you included the HTML—maybe someone with more CSS expertise can spot if there's a breakpoint or container width that's behaving unexpectedly. You're definitely on the right track!