Browser developer tool & mobile responsiveness

Hello all!

I have some doubts regarding the developer tool (I’m using Chrome).

Basically, I did the machine-drum front end challenge and when I’m using this mode to check if my website is responsive, it shows different things.

This is how it looks when I resize it to a phone size:

This is how it looks when I press the “Toggle device toolbar” next to the "Elements· tab:

When I open the website on my phone (Android & Chrome), I looks different from the first and second image!:

I´m wondering why is everything different? And how can I make sure is mobile responsive?

Thank you!

Please post a link to your project.

My first thought is that the phone is wider than what you have in the browser screenshots.

Hi @dlaub3 .

This is my link: Drum machine

I think I´ve kind of sorted it out. Anyways, what I wanted is to make it look like the first image, but I don´t know how to do it. Another thing I don´t quite understand is why does the page look so different when I resize it in the developer options from when I activate the toggle, even when they have similar sizes.

When you “Toggle device toolbar” it’s actually a little smaller because a border is added. You have to go by the width in pixels.

If you set a max-width: 276px on the container div it will look closer to how you want. But you’ll also want to play around with making it smaller and fixing the overflow.

You could also use this as a chance to start learning grid https://gridbyexample.com/patterns

You are also not using the Bootstrap grid system at all. If you are planning to use Bootstrap for the layout you need rows and columns.

But as said constraining the container to some width will also work because the child elements are inline-block and will wrap to a new line.

Side note, I would suggest you use button elements for the buttons and not div elements.

Thanks for your feedback. I´m struggling a lot with React + styling so I’ll just check out to do it properly. So far everything I touch something, looks worse :pensive:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.