How to view page in responsive mode

I’m unsure how to view my codepen page to check for its responsiveness.

I have been doing this:
(1) open the pen in debug mode
(2) then copy the url and paste into Chrome Dev Tools or Firefox Dev Tools
(3) in Dev Tools, I select the responsive design mode view and then expand/contract the browser window to get the various device widths

In Chrome, when I select a width/height of 360/640, my page looks exactly how I want it. It looks fine on my phone which has roughly the same width. (see image 1)

But in Firefox, with the same width/height, everything is a lot bigger. (see image 2)

What am I doing wrong here?


For CSS (Not JS), I just resize the window of chrome and see how elements react to the new sizes.
if anything’s wrong and as I’m resizing the window, codepen shows me the current width of the window; I just note it, then I create a media query for it.

Oh and BTW, To get the current width without depending on codepen, you can also:

  1. Open the inspect element page by either clicking on the right button of your mouse and selecting Inspect, or via the keyboard by clicking on CTRL + SHIFT + I.

  2. Then start resizing the window’s width and you’ll notice the current width and height appearing on the top right corner of your screen.

Thanks, but then I get everything extra small on my phone. That’s why I increased the font-sizes etc to get image 1. Then when I view it in Firefox Dev Tools, everything is extra big.

Oh, first reply was in response to your first message. :slight_smile:

Check whether the version of Firefox is new because it could be very old and therefore doesn’t support media query.

You can see here what versions of Firefox support media query.

Yup, it says it’s up to date.

Would you please share your project link so that we’ll be able to find the source of the problem?

Care to link the Codepen so we could take a look at the code?

Sure, thanks. Here’s my page:

I’m attempting to do a mobile-first design.

Sorry it’s kinda messy…

Well, the design (for small screen sizes) has issues and it should be fixed.

On my browser (chrome), the website looks similar to that in the first image you shared, which means that there’s nothing wrong with Firefox.

In general, your design looks great on desktop (except that text on top of the yellow button and those products that look very far from each other), and it needs to be fixed for small screens.

The solution is to try the methods I shared with you on my first and second comments (by resizing the browser’s width on your desktop and using Media Query).

1 Like

Okay, I’ll try that. Thanks!

Agree with clevious, the font sizes for a small screen need adjusting, they are way too big at the moment. Your h1 is set to 13rem which translates to 130px. I’d suggest bringing those way down.

Also to me it didn’t look like your media queries were being applied to larger views. Might be worth adding the ‘screen’ type to them like this @media screen and (min-width: 1025px)


Noted! Thanks for taking a look at it. :))