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/
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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) {
}
Thread Starter
gore.m
(@gorem)
@gappiah Thanks you, Im using bootstrap .-)
@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
