We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How do I center the Responsive Design View?

  • 5 ŋuɖoɖowo
  • 1 masɔmasɔ sia le esi
  • 5 views
  • Nuɖoɖo mlɔetɔ fingershop

more options

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?

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?

All Replies (5)

more options

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.

more options

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.

more options

@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.

more options

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.

more options

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;

}