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

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:

https://getbootstrap.com/docs/4.0/layout/overview/

For instance:

/* (mobile) */
.foo {
    color: red;
}

/* (tablet landscape) */
@media screen and (min-width: 768px) {

}

/* (desktop) */
@media screen and (min-width: 1024px) {

}

@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