![Firefox logo](https://assets-prod.sumo.prod.webservices.mozgcp.net/media/uploads/products/2020-04-14-08-36-13-8dda6f.png)
How do I center the Responsive Design View?
How do I center the Responsive Design View within the larger FF window? I use a large widescreen monitor, and when using the RDV its always way off on the left side of my monitor, but I want it to be centered in front of me. Its tiring to constantly be looking and leaning in at an angle to peer at the left side of my monitor. Is there a way to move or center the RDV view port?
Tất cả các câu trả lời (5)
I can't find a quick fix for this using a custom style rule. margin:auto doesn't work, or percentages, presumably because the container has an indeterminate width. I suspect an add-on might be needed.
You can drag the border to adjust the width and height of the window. If the window would be centered then I assume that dragging the borders would no longer work because the position of the window would have to change.
@jscher2000 I'd looked to see if an add-on existed but I don't see one related to this. Its surprising to me that the RDV was placed left-justified, like old-school web design from the 90s.
@cor-el My thought was that if the RDV window were centered, dragging the right border would keep the window centered while adjusting its width. In other words, the left and right sides of the window would move in or out the same distance from the center of the window, somewhat like an elevator door.
There is a toolbar on that page.
Would that have toolbar need to be above the RD window and adjust its position.
The page layout as is isn't really easy for centering the content. I've tried a few thing myself in the DOM Inspector when I found your question and just like Jefferson didn't succeed and thus didn't post a reply.
I was able to move the RD window closer to the center by putting a rule in my userChrome.css. Its not perfect since its a static positioning, but it does make it a lot better. This also moves the RD toolbar, keeping it lined up with the RD window.
.browserContainer[responsivemode], vbox[anonid=browserContainer][responsivemode] {
padding-left: 600px !important;
}