How to know the width of the device in codepen

In which mode can I change the codepen so that I can be able to see the width of the device and be able to add media queries to my project? I am currently in editors mode and when I adjust the bar, I cant see the width of the device. Is there a way I can put the project and editor to be side by side? Any help will be appreciated.

hi @emilynyaruri

im not sure if i give you the correct answer,
but as far that i know, if you managed to choose the view panel of html, css and js to the left side of your screen, youll get the live project view on the right.
and when you slide left or right the live screen divider, there would be pop up about the screen width in px.

Hi. Thank you for the response. I have tried to slide bothe on the right and left sides but I am not seeing the project on the sides. Can you please tell me how I can Slide the last parts because I think the problem lies there.

have you changed the editor layout yet?

editor layout

sorry cant give you full screnshot, im in mobile at the moment.

I am patient. Just send it when you get on your PC. Thanks alot

sory i just taken another screnshot with my mobile


will pop up when you slides the divider left to right. like in the image, pop up 152px

Kindly, can you tell me the steps you’ve followed to achieve that. I cant’t find it right still. Kindly.

Thanks @sobadrdb I have found it. I appreciate your help. Be blessed

1 Like

just click the change view > choose the left editor layout (first image that i posted) >
then click hold and drag left or right the divider that pop up the px.

clik and hold drag left or right

1 Like