Responsiveness
WDS will set up your site to be mobile/tablet ready. The following media width sizes are what we build for, and are the most popular screen sizes on the market today.
- Desktop: 1920px
- Laptop: 1366px
- iPad: 1024px
- Tablet: 768px
- Mobile: 375px
You can check responsive breakpoints in your browser by following the below steps:
- Right click in the browser and select Inspect from the bottom of the pop up.
- Keyboard Shortcut: F12 or Ctrl + Shift + I (Command on Mac)
- You will either have a pop up or a sidebar:
- Chrome and Edge: in the upper left side of this area, click on the “Toggle Device Toolbar” icon. It looks like a phone and tablet icon.
- Firefox: in the upper right side of this area, click on the “Responsive Design Mode” icon. It looks like a phone and tablet icon.
- Keyboard Shortcut: Ctrl + Shift + M (Command on Mac)
- You will see your site change to an emulator view. In the top bar you should see a device dropdown and dimension options.
- In the device dropdown you will see a lot of presets, feel free to look through these presets or you can type in the dimension in the dimension field. The first number is the width and the second number is the height.
In Safari: in the menu bar click Develop > User-Agent > then choose the device you wish to preview or click other to enter the dimensions.
If you or your customer notices an error on their site on a specific screen size, we can do our best to adjust to those dimensions, but we will need the pixel sizes in order to do so. Below are a couple ways the customer may be able to check their device dimensions. Keep in mind we cannot cover all devices, so please try searching google to help your customer with exact instructions for their machine.
- MAC: Click the Apple menu > About This Mac > there will be a section with your resolution
- Windows: Windows menu > Settings (Cog icon) > System > Display > Scroll to the Scale and Layout section > Display resolution will be your screen size