How to move the CSS Styles part to the bottom in Chrome Devtools?

Question

When i go to Inspect on Google Chrome, i have the HTML and CSS sections in parallel as shown below.

How can i move the CSS part to the bottom while keeping the HTML part above, as shown below?

Territorialize

Does this answer your question? How to reposition Chrome Developer Tools – Alitta

You should accept an answer, someone took the time to tell us fools how to do it, pay some respect. – Garland

Answer 1

Click the nail > Set 'Panel layout' to horizontal

Here is where you are gonna set your panel horizontal I hope helped you.

Gand

this is the correct answer – Irradiance

This is exactly what I was looking for. Thanks – Annalee

Answer 2

I had the same question this evening. All the answers I found kept trying to describe how to move the entire Dev Tools panel. But what you and I actually want is to adjust the inner panels.

Here is what I did:

1. Click on the settings GEAR in the upper right-hand corner of Developer Tools. It's the little donut-looking thing. This will bring up a full-screen SETTINGS panel.
2. Click on the PREFERENCES option (if it isn't already selected).
3. In the APPEARANCE option group, look for the Panel layout dropdown.
4. Change the Panel layout selection to horizontal.

That did it for me this evening. Hope it helps you.

Sorry, I'm not including screenshots — I've got to get back to work!

Altostratus

The "I need to get back to work" part is unnecessary. You don't need to apologise for not including screenshots, as the question asker has not explicitly requested it. Not condemning you, just giving some tips on how to answer. Other than that, good work! – Peary

Thank you, Clark! And good luck at work, pal! You can find the same answer above from @alexandrupineda – Territorialize

Agent Biscutt, thanks for explaining your idea of how stackoverflow and the internet should work. I liked Clark's personal touch. It's a reminder that we are people with personalities, not AI drones here to dole out dry answers. – Emissive

Answer 3

Setting - Preferences - Appearance - Panel layout - "vertical"

With chrome v120, it works to me.

Rozier

Answer 4

1: Right Click, Open Inspect

2: Top Right Corner, Click 'Gear Icon' (Preferences Menu)

3: Top Left Preferences Tab, Choose 'Horizontal' For 'Panel Layout'

4: Close the Preferences Menu, In Main Inspect
Window, Close Console Tab

5: HTML Elements will be on top of menu, CSS Selectors will be on bottom of Menu

Annelid

Answer 5

First, you need click 3 dots. Then you select your desired dock side.

Farleigh

This option will move the whole console to the bottom. What i need is to move only the CSS part to the bottom of the HTML one as i described in my screenshot. I don't want to change the lateral view of the whole console. – Territorialize

Answer 6

you need to click 3 dot on right side of devTools and select dock side

Lilli