1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need help with CSS breakpoints

Discussion in 'CSS' started by hallianonline, Oct 17, 2014.

  1. #1
    Hello,
    I want to know about the css breakpoints i searched on internet and get too many confusing results.
    What my requirements are to place only 3 breakpoints which are as follow

    to get the screen width of desktops and laptops
    then to get screen width of tabs and ipads: portrait and landscape
    then to get the screen width of smartphones: potrait and landscape

    Please update me with the smallest and finest working example which will be compatible with all screen sizes.

    Thanks
    SEMrush
     
    hallianonline, Oct 17, 2014 IP
    SEMrush
  2. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #2
    If you search Google you probably saw this page:

    http://responsivedesign.is/develop/...t/media-queries-for-common-device-breakpoints

    If that list does not give you what you need then you will need to post very specific requirements about what you want, because your question is pretty vague. Setting a number of queries you will use without first determining what you will actually support is pretty much backward. If you are just going to set an arbitrary number, you will miss all kinds of devices.
     
    COBOLdinosaur, Oct 17, 2014 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,376
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #3
    Actually, @COBOLdinosaur that article is rubbish, because it is "thinking" in terms of pixel widths and specific devices -- a half assed idiotic way to set break points ESPECIALLY if like a good little doobie you've built an elastic layout.

    @hallianonline -- which is what's biting you in the backside, you are thinking specific widths instead of the needs of your content. There's a reason I flip design around and build "lowest common denominator" FIRST -- and that lowest common denominator is NOT media query capable mobile, it's non-media query capable desktop machines. You build to that using semi-fluid and elastic layout, then narrow the browser window until you reach the point where it breaks and needs to be re-arrange. That's your media query breakpoint, then you just lather, rinse, repeat until you get down to the narrowest you think you need. (which sadly is usually 192px at small fonts/96dpi/100%/whateverthe****theyarecallingitthisyear)

    If you are thinking specific pixel widths and specific devices, YOU'RE DOING IT ALL WRONG!

    But again, there's a reason your starting point in design is also the starting point in coding -- semantic markup of your content or a reasonable facsimile of future content. You then bend that markup to your will with CSS and add breakpoints where the CONTENT needs it. Do it that way, and you're set to go with all current AND future devices!
     
    deathshadow, Oct 17, 2014 IP
    COBOLdinosaur likes this.
  4. jasmeencress

    jasmeencress Member

    Messages:
    119
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #4
    I'd recommend you look into online help code which is a great (and it, it's a must) debugger for JavaScript (HTML, CSS, etc. as well). You can set breakpoints and look into the code live. It'll do the job.
     
    jasmeencress, Oct 30, 2014 IP
  5. alfieindesigns

    alfieindesigns Well-Known Member

    Messages:
    128
    Likes Received:
    5
    Best Answers:
    2
    Trophy Points:
    130
    #5
    I think you may refer to Media queries which actually do the breakpoints.
    Example are in bootstrap (recommended). But it's up to everyone to change it if you wish to.

    /* Extra small devices (phones, less than 768px) */
    
    /* No media query since this is the default in Bootstrap */
    
    /* Small devices (tablets, 768px and up) */
    @media (min-width: @screen-sm-min) { ... }
    
    /* Medium devices (desktops, 992px and up) */
    @media (min-width: @screen-md-min) { ... }
    
    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: @screen-lg-min) { ... }
    Code (markup):
    Source: getbootstrap dot com / css

    So the breakpoints there are:
    - less than 768px
    - tablets, 768px and up
    - desktops, 992px and up
    - large desktops, 1200px and up
    *If you notice, bootstrap is practicing mobile first.

    I hope this helps.

    Thanks and God bless always!
     
    alfieindesigns, Nov 5, 2014 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,376
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #6
    Which is why a hefty chunk of why bootcrap is ignorant halfwit bull alongside it's stupidity of using presentational classes like some sort of OOCSS asshat.

    Though as I said, targeting by pixels for breakpoints is also ignorant halfwit bull and the antithesis of accessible design. Design for the content, NOT the device!
     
    deathshadow, Nov 8, 2014 IP
  7. Naina S

    Naina S Active Member

    Messages:
    203
    Likes Received:
    7
    Best Answers:
    1
    Trophy Points:
    93
    #7
    You will need to have Media properties in your css to make it responsive.
    Either you can use bootstrap for this. Bootstrap is developed by twitter organization.
    Or you can use media properties directly see http://learn.shayhowe.com/advanced-html-css/responsive-web-design/
     
    Naina S, Nov 27, 2014 IP
  8. geniuscapri

    geniuscapri Well-Known Member

    Messages:
    138
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    113
    #8
    I learned responsive Technic from this link.
    There every thing is very clearly explain. i am not sure if there is mentioned this.

    User this meta tag in header:
    <meta name="viewport" content="width=device-width, initial-scale=1">
    HTML:
    Below are very detailed CSS media queries:
    /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
    /* Styles */
    }
    
    /* Smartphones (landscape) ----------- */
    @media only screen
    and (min-width : 321px) {
    /* Styles */
    }
    
    /* Smartphones (portrait) ----------- */
    @media only screen
    and (max-width : 320px) {
    /* Styles */
    }
    
    /* iPads (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px) {
    /* Styles */
    }
    
    /* iPads (landscape) ----------- */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : landscape) {
    /* Styles */
    }
    
    /* iPads (portrait) ----------- */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : portrait) {
    /* Styles */
    }
    
    /* Desktops and laptops ----------- */
    @media only screen
    and (min-width : 1224px) {
    /* Styles */
    }
    
    /* Large screens ----------- */
    @media only screen
    and (min-width : 1824px) {
    /* Styles */
    }
    
    /* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    }
    Code (CSS):
    if still need help or other detailed. than go to link below:
    http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
     
    geniuscapri, Dec 15, 2014 IP
  9. alfieindesigns

    alfieindesigns Well-Known Member

    Messages:
    128
    Likes Received:
    5
    Best Answers:
    2
    Trophy Points:
    130
    #9
    Yes, we have to design for the content.
    But targeting breakpoints by pixel is actually a practical way and so efficient.
    1. I personally used pixels when doing designs on PSD.
    2. Most/All of the devices or screen resolutions are in pixels too.
    (e.g. iPhone 5 = 320 x 568, iPhone 6 Plus = 414 x 736)
    So using pixels for me is a go when doing breakpoints (responsiveness).

    Thanks and God bless always!
     
    alfieindesigns, Jan 28, 2015 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,376
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #10
    The ONLY time I would ever allow it is for targeting a group of images that need re-arranging. If the content is a mix of images and text or just text, OH HELL NO!

    No offense, that means you are dicking around drawing goofy pictures and NOT actually doing web design, since your paint program of choice should NOT come into the mix until AFTER you have working layoutS! ... and that's the truth no matter how many re-re halfwit and scam artist PSD jockeys claim otherwise.

    ... and there is ALWAYS a new flavor of the month screen size, so targeting by screen size or to specific devices is stupid -- PARTICULARLY if like a good little doobie you are using ACCESSIBLE font sizes (%/EM) and not pissing all over your pages with the dumbass halfwit px measurement for fonts. Your fonts are in EM, your breakpoints need to be in EM since there is no fixed relationship between EM and PX. (and do not believe the ignorant 62.5% bull!

    To me that probably means you aren't designing properly from an accessibility and usability standpoint -- there ARE exceptions, but it should be the last resort SPECIFICALLY when dealing with images, not the first go-to.

    See this rewrite I just did for someone here:
    http://www.cutcodedown.com/for_others/OliverSB/

    Which uses both px and em for breakpoints -- the ONLY reason I went to PX being the content (images) were in PX and I wanted to swap how many were shown per row and their alignment. Even so I didn't ONCE think about a specific resolution for any device, I based the change based on the needs of the CONTENT. If you are thinking specific devices you'll NEVER be done with it as there are hundreds of specific resolutions and there always seems to be a new flavor of the week.
     
    deathshadow, Jan 28, 2015 IP