Title: Screen resolution / starting width for responsive theme?
Last modified: August 21, 2017

---

# Screen resolution / starting width for responsive theme?

 *  [gore.m](https://wordpress.org/support/users/gorem/)
 * (@gorem)
 * [8 years, 8 months ago](https://wordpress.org/support/topic/screen-resolution-starting-width-for-responsive-theme/)
 * Hi,
 * I was working on my new web design on my notebook with 1600×900. After I done
   all responsive css tweaks etc, I found out that it is not enough… my design doenst
   look good on users most used sceen resolution 1366×768, everything looks “too
   big”… images, spacing/negative space, typography etc.
 * **So have I made a mistake in an starting point?** Should I use 1366×768 as my
   screen resolution and to define max width, because of image sizes? Or design 
   in max width size? Im confused 🙂
 * Which is your screen resolution / starting width or workflow for responsive theme
   design?
    Thanks you

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [George Appiah](https://wordpress.org/support/users/gappiah/)
 * (@gappiah)
 * [8 years, 8 months ago](https://wordpress.org/support/topic/screen-resolution-starting-width-for-responsive-theme/#post-9426826)
 * Now, I get it that you may have a legitimate reason for starting from scratch
   instead of using a front-end library that has all these kinks sorted out already.
 * But at the very least why not adopt their breakout points since they seem to 
   work very well (judging from their popularity)?
 * **Bootstrap 4’s primary breakout points are:**
 *     ```
       // Extra small devices (portrait phones, less than 576px)
       // No media query since this is the default in Bootstrap
   
       // Small devices (landscape phones, 576px and up)
       @media (min-width: 576px) { ... }
   
       // Medium devices (tablets, 768px and up)
       @media (min-width: 768px) { ... }
   
       // Large devices (desktops, 992px and up)
       @media (min-width: 992px) { ... }
   
       // Extra large devices (large desktops, 1200px and up)
       @media (min-width: 1200px) { ... }
       ```
   
 * They also use additional breakout points in specific scenarios. See the layout
   documentation here:
 * [http://getbootstrap.com/docs/4.0/layout/overview/](http://getbootstrap.com/docs/4.0/layout/overview/)
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [8 years, 8 months ago](https://wordpress.org/support/topic/screen-resolution-starting-width-for-responsive-theme/#post-9426829)
 * Start writing your CSS for mobile widths, then move up. Otherwise you’ll get 
   into difficulty trying to cram layouts into smaller widths.
 * For instance:
 *     ```
       /* (mobile) */
       .foo {
           color: red;
       }
   
       /* (tablet landscape) */
       @media screen and (min-width: 768px) {
   
       }
   
       /* (desktop) */
       @media screen and (min-width: 1024px) {
   
       }
       ```
   
    -  This reply was modified 8 years, 8 months ago by [Andrew Nevins](https://wordpress.org/support/users/anevins/).
    -  This reply was modified 8 years, 8 months ago by [Andrew Nevins](https://wordpress.org/support/users/anevins/).
 *  Thread Starter [gore.m](https://wordpress.org/support/users/gorem/)
 * (@gorem)
 * [8 years, 8 months ago](https://wordpress.org/support/topic/screen-resolution-starting-width-for-responsive-theme/#post-9427072)
 * [@gappiah](https://wordpress.org/support/users/gappiah/) Thanks you, Im using
   bootstrap .-)
 * [@anevins](https://wordpress.org/support/users/anevins/) Thanks you, in CSS Im
   mobile first.
 * **Im sorry. I was not clear…** my problem seems not to be in CSS and small screens,
   but in my workflow between Photoshop X live web page X large screens.
    Because
   design is not “compact” during changing screen sizes.
 * Here is large screen size statistic from our web site (most used to less used):
   
   1366×768 1920×1080 1440×900 1536×864 1600×900 1280×1024 1280×720
 * I thought it is good idea to determine/decide for which screen resolution I will
   do design (in Photoshop), so I decided 1300px, but result is not pretty now on(
   most used) 1366×768 screen.
 * So:
    – For which max-resolution are you designing web pages (in Photoshop), is
   there an “large screens starting width” standard? – Are you fixing container/
   wrap width to max-width based on Photoshop design? – If no…how deal with resolutions
   above resolution you chosed (like 1920×1080, 1440×900, 1536×864, 1600×900)? –
   If 1366×768 is most used screen resolution, is it helpfull/make a sence to switch
   my monitor (when Im in Photoshop) to that resolution? – Is there special workflow(
   starting in Photoshop) if fluid layout is used?
 * Thanks you

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Screen resolution / starting width for responsive theme?’ is closed to
new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 3 replies
 * 3 participants
 * Last reply from: [gore.m](https://wordpress.org/support/users/gorem/)
 * Last activity: [8 years, 8 months ago](https://wordpress.org/support/topic/screen-resolution-starting-width-for-responsive-theme/#post-9427072)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics