• When building/developing a new site

    Which website/plugin/trick ?? does everyone use to work out the sites @media queries (breakpoints) ?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    The chrome developer tools are quite handy for this. Click the little “responsive” thing:

    View post on imgur.com

    Also, check out https://www.isresponsive.com/

    These are the standard Bootstrap breakpoints based on avg device width:

    Phones (<768px)

    Tablets (≥768px)

    Desktops (≥992px)

    Desktops (≥1200px)

    Moderator bcworkz

    (@bcworkz)

    Another check to run is to slowly drag your large screen window width narrower, watching for any elements running together, overlapping, line feeding, or otherwise looking awful. The width where this starts to happen is a likely breakpoint your theme needs. Keep in mind there may be no device using this width and may be too narrow for any reasonable desktop window width, so it may not be necessary to correct the display at this particular width.

    OTOH, we can never know for sure what width something will be. It’s all the better if your design works at any width no matter how unlikely it is.

    You also don’t want to have 20 different break points. If this seems necessary, you’re doing something else wrong. Usually, if you use percentages and vw units to size elements, you shouldn’t need many breakpoints.

    Thread Starter mrmrmr

    (@mrmrmr)

    Excellent replies

    thank you all very much

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Be sure to ask your client what type of phone they have — make sure it’s perfect on that size device!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Best place to work out breakpoints (@media queries)’ is closed to new replies.