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.

CSS targeting for mobile

Discussion in 'CSS' started by Roger Bunch, Mar 13, 2018.

  1. #1
    I know this has probably been asked before but perhaps we can turn my question into a learning lesson for others as well. I am working on a website in which I have an image (in an article) that I wish to float:left on PC screens and float:none on mobile devices. I have tested different code to no avail.
    (1) Does the CSS over ride need to be placed before or after all other CSS rules?
    (2) As I understand it, this can be done all within the same style sheet correct?

    original code
    .featured-image {
        margin-top: 6px;
        margin-right: 1px;
        margin-left: 7px;
        margin-bottom: 1px;
          float: left; 
        width: 100px;
        /* height: 200px; */
    }
    Code (CSS):
    Did not wish to link the website, not sure if that is considered spam or not

    P.S. would like to use this thread / post as an ongoing learning experience for myself as well as other if anyone is willing to help teach a semi newbie
    SEMrush
     
    Roger Bunch, Mar 13, 2018 IP
    SEMrush
  2. Roger Bunch

    Roger Bunch Greenhorn

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #2
    Well I think I just taught myself something since posting this. Experts correct me if I am wrong.
    I placed my CSS targeting rules at the end of the stylesheet such as
    @media only screen and (max-width: 580px) {
    .featured-image {
        margin-top: 6px;
        margin-right: 1px;
        margin-left: 7px;
        margin-bottom: 1px;
          float: none;
        width: 190px;
    }
    Code (CSS):
    Used "max-width" as opposed to "Max-Device-width" so I could test it on PC
    Apparently setting these rules "after" your initial rules allows the over write.
    The div is now floating left on browser and none on screens up to 580 pixels
     
    Roger Bunch, Mar 13, 2018 IP
  3. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,483
    Likes Received:
    1,019
    Best Answers:
    19
    Trophy Points:
    400
    #3
    You may want to close it with another }
    Maybe you just forgot to copy it.

    Also, do you have something like:

    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

    in the <head></head> ?
     
    qwikad.com, Mar 13, 2018 IP
  4. Roger Bunch

    Roger Bunch Greenhorn

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4
    Yes I have the following
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=3.0,width=device-width"/>
    Bt the way, thanks for pointing out the rbrace I forgot to put it in, easy to forget small things
     
    Roger Bunch, Mar 13, 2018 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,621
    Likes Received:
    1,553
    Best Answers:
    225
    Trophy Points:
    515
    #5
    Do NOT set maximum-scale in the viewport meta, you're just breaking the user's ability to zoom!

    Also depending on the image and the layout, you may want to be using EM media queries instead of PX... but that would depend on if you are using EM fonts like a good little doobie or if you are pissing on accessibility by using PX there too.

    Which given your use of pixel margins seems like a possibility. You set something like font-size:12px; or font-size:18px; you just /failed/ at basic web development. (see that powersurgemedia website from your avatar)
     
    deathshadow, Mar 13, 2018 IP
  6. Roger Bunch

    Roger Bunch Greenhorn

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #6
    Mr. Deathshadow you should first find out the circumstances before you start pissing on other peoples feet. FYI there know it all the code you mentioned was already in the theme, I am trying to fix it but thanks for your very rude feedback. Instead of throwing out "you failed" comments wouldnt ya think the helpful advice would be a straight "try this". That's exactly why some folks simply don't use these forums.
     
    Last edited: Mar 14, 2018
    Roger Bunch, Mar 14, 2018 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,410
    Likes Received:
    349
    Best Answers:
    26
    Trophy Points:
    335
    #7
    Roger, you're getting your panties in a bunch for nothing. The circumstances don't matter except that poorly written themes are harder to fix. Also, if you don't know what is wrong with your page, how can you fix it except by ad hoc patches. Those can build a mountain of potentially conflicting styles.

    Talking about em versus px metrics, if the user has his default font sizes set differently from yours, the break points for different screen sizes will be in different places relative to the content. Maybe even enough that it breaks the page for various small screen devices. Hell, even for large screen desktops. Worse, it may even override the visitors' preferred sizes.

    So take @deathshadow's comments to heart and begin digging. Else, accept that most themes are crap on a stick and run them unmodified, knowing they are crap.

    gary
     
    kk5st, Mar 14, 2018 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,621
    Likes Received:
    1,553
    Best Answers:
    225
    Trophy Points:
    515
    #8
    You know, if that's your idea of "very rude' I wonder how the blazes you made it out of grade school without dehydration from crying so much... IF that's all it took to get that reaction out of you, you wouldn't last a New York minute in a real business.

    You've got problems, HOW DARE anyone in curt frank language point them out... right. No, instead you want soothing syrup works, rose coloured glasses, and to be led to the drum circle to sing kumbaya along with the rainbow farting unicorn.

    Often seems like some people just can't handle offers of actual help, and instead go pure defensive if you even mention that something is bad -- no matter what utter shite it is. JOE FORBID we call a turd a turd. Seriously, what in the F*** is wrong with people now?!?
     
    deathshadow, Mar 14, 2018 IP
  9. Roger Bunch

    Roger Bunch Greenhorn

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #9
    The point I made is when people show up and without even finding out what the circumstances are they yell out OH YOU FAILED
    Very good way to welcome someone who asks for help and is looking to learn, def not the best spokesperson here.
    anyway, moving on.
     
    Roger Bunch, Mar 15, 2018 IP
  10. cyphix

    cyphix Well-Known Member

    Messages:
    245
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    103
    #10
    Unless you have a specific use for it, you generally shouldn't use "max-device-width"; this doesn't have anything to do with you viewing it on a PC or not, this basically tests the width of the actual device screen, in that it doesn't change... so if I resize the width of my browser then it's not going to respond; always use "max-width" as this responds to change and works perfectly fine on devices too.

    Additionally, you should specify mobile first in that you specify the mobile styles as the default styles and then override for desktop/larger screens, like:

    .featured-image {
        margin-top: 6px;
        margin-right: 1px;
        margin-left: 7px;
        margin-bottom: 1px;
         float: none;
        width: 190px;
    }
    
    @media only screen and (min-width: 581px) {
        .featured-image {
            float: left;
        }
    }
    Code (CSS):
    Also, I'm not going to get into a em vs px debate, but it's not as black and white as deathshadow is making it out to be; if you want to use relative units then use "rem"; they are faaaaar easier to work with as they don't compound; that's not to say there aren't specific situations where they can be useful though.
     
    cyphix, May 10, 2018 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,621
    Likes Received:
    1,553
    Best Answers:
    225
    Trophy Points:
    515
    #11
    Of for Chrismas sake, NO!!!

    Legacy desktop cannot be targeted with media queries, which is why DESKTOP should be your starting point. Any smaller display devices -- like mobile -- we care about recognize media queries which is why you layer that OVER your desktop layout, NOT THE OTHER WAY AROUND. The whole 'mobile first" nonsense is utterly and completely back-assward!

    It's not rocket science... it's actually pretty easy you just have to separate yourself from the pixel mentality. Thankfully as raster images in interface design are going the way of the dodo thanks to SVG, storing lineart in webfonts, and leveraging advanced CSS styling, it's getting even EASIER! It's so damned simple I don't understand why so many people seem to still cling to pixels like some sort of pathetic faith based ignorance.

    ... and they are too new to rely on for legacy support, do NOT obey the system metric or browser setting in Firefox, and are NOT any easier to work with if you have even a modicum of common sense in how you are using your fonts.

    Seriously, if you're changing font-size often enough for EM to become 'hard' to use, you probably are screwing around declaring too many different font sizes too damned often!

    Admittedly that describes a LOT of the halfwitted mentally enfeebled trash artists under the DELUSION that they are "designers" and marketing turds who know dick-all about websites often cream their panties over.
     
    deathshadow, May 10, 2018 IP
  12. cyphix

    cyphix Well-Known Member

    Messages:
    245
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    103
    #12
    Sure, if you wanna support IE8 lol....... but most people don't and shouldn't (IE6, 7 and 8 have a combined usage rate of 0.21%), but if you have a specific reason to then you would have to rethink things, but even then I would suggest using a polyfill such as respond.js rather then rewrite your whole codebase around having to support legacy browsers; I would highly suggest a mobile-first approach and so would most devs. This however doesn't mean you have to develop your mobile site first, I personally develop desktop first and then make adjustments to the CSS afterwards.

    The only time I would suggest a desktop-first approach is when coding html emails, this is because there are a ton of email clients and their support for css is far behind modern browsers and many strip code out and do all kind of things.

    Here we are - this is just you making assumptions on why people still use pixels; could it be that people have actually done their research, weighed the pros and cons of each and actually decided to use one over the other? Just because you prefer to use em or rem doesn't make you right and everyone else wrong, it's just your preference.

    ...again, unless you are needing support for IE8 or below then you don't really have anything to worry about*. You seem far too concerned about support very old browsers, do you still try and support Netscape 4? lol

    * IE 9 and 10 support REM but don't support it's usage on the shorthand 'font' property or within pseudo elements.

    After reading a number of your posts you come across as quite obnoxious and think far too highly on your own opinion over others and if they think differently to you they're halfwitted or delusional or what have you; you need to check yourself and have more respect for your peers.
     
    cyphix, May 10, 2018 IP
  13. cyphix

    cyphix Well-Known Member

    Messages:
    245
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    103
    #13
    Oh and if for some reason you want to provide a fallback for browsers that don't support rem, then you can do something like this:

    body {
      font-size: 36px;
      font-size: 2.25rem;
    }
    Code (CSS):
    This way browsers that support rem will overwrite the former declaration, and browsers that don't support rem will ignore it.
     
    cyphix, May 10, 2018 IP
  14. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,621
    Likes Received:
    1,553
    Best Answers:
    225
    Trophy Points:
    515
    #14
    Or if you want to write code that gracefully degrades by progressively enhancing. We have a new technology (media queries) so you write WITHOUT the media queries FIRST and then enhance it. The starting point for without should be devices without... and that's NOT mobile.

    Graceful degradation for older browsers and unsupported features is an inherent part of using HTML and CSS the way they were designed to be used. Sadly much like semantic markup or separation of presentation from content, most developers fall into two camps, those making up lame excuses for their ineptitude, or those who just refuse to pull their cranium out of 1997's rectum by using outdated, outmoded, and half-assed methodologies.

    ... and throwing scripttardery at older browsers isn't the huffing answer!

    PX fonts are an INSTANT WCAG violation, a giant middle finger to users (like myself) who run non-standard metrics either due to eyesight issues or just being able to afford better displays. I've been running 1600x1200 or more since the late '90's, 1024x768 since the early 1990's, and even 800x600 as my norm in the '80's. As such I'm painfully more aware of how pixel based designs either send me diving for the zoom only to encounter broken layouts or side-scrolling, or basically results in such sites telling me to go f*** myself.

    But Joe forbid I respond in kind.

    If a client was willing to pay for it, I might -- but IE8/earlier is still in a LOT of businessed, medical facilities, and so forth thanks to thin clients running as far back as IE 5.5 out of ROM. Graceful degradation to at least be USABLE for those users is not rocket science. Semantic markup, separation of presentation from content, progressive enhancement, DONE.

    ... and if we have a perfectly good easy to use existing measurement, why the hell use a new one that doesn't offer any legitimate advantage other than "wah wah, I dunz wans two due mats?!?"

    AGAIN telling users with accessibility needs to go f*** themselves by using pixels, and POSSIBLY depending on the type of website landing you with fines or in civil lawsuits for WCAG violations.

    All because "wah wah, eyes two stewpidz two yews EM"... the WCAG says to use EM, so use 'em for all but the rarest of corner cases (such as underneath gilder-levin image replacement). Anyone telling you otherwise is talking out their arse!

    Lands sake, PX on body... /FAIL/ at web development and design.

    I work in web accessibility, ALL the crap I'm railing against is what lands my clients in trouble with the law. It is hard to respect people who make irrational nonsensical decisions that ignore things like the Web Content Accessibility Guidelines, the entire reason HTML exists, why HTML and CSS are separate from each-other, why we even have semantic markup, and the results and advice coming from usability studies by places like nnGroup.

    Respect needs to be earned, otherwise it's nothing more than rosy platitudes that let the scam artist dirtbags get in the door; and right now there are WAY too many snake oil peddlers and two bit hucksters preying upon ignorance -- much less nubes and rubes alike blindly parroting bad information, worse practices, and outright mentally enfeebled methodologies!
     
    deathshadow, May 10, 2018 IP
    malky66 likes this.
  15. cyphix

    cyphix Well-Known Member

    Messages:
    245
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    103
    #15
    I'm all for graceful degradation, but up to a point, yes you provide fallbacks when there is still a decent reason to (such as when a technology is new and doesn't have much support), but over time when the technology has matured and has gained support in all browsers then it is not needed; coding FIRST for legacy browsers is a ass-backwards way of thinking, but because you work in accessibility I can see how that has affected your thinking, but you need to separate the accessibility inclusion aspect of it from the older technology aspect, otherwise you may as well be still coding fallbacks for IE6 in everything you code lol

    Ummm no, they're not a violation, from what I know WCAG states you just need to allow the user to control the font-size (not restrict it) and unless you're using an older browser like IE6 then you shouldn't have a problem, as <= IE6 wouldn't allow resizing for fonts set in 'px'.

    I'm not trying to say that using relative units is wrong, because it isn't, I'm saying use what you prefer - and please stop trying to make it out like I don't care about accessibility, because I do; I just happen to have a different opinion than you.

    As for px, I think you should have a read of these articles:

    https://mindtheshift.wordpress.com/2015/04/02/r-i-p-rem-viva-css-reference-pixel/
    https://hackernoon.com/rems-and-ems-and-why-you-probably-dont-need-them-664b9ce1e09f
    https://benfrain.com/just-use-pixels/

    No pixels aren't perfect, but neither are relative units and hence that is why each user should be entitled to their preference.

    But as I said, I didn't want to get into a big debate over this topic, you have your opinion and I have mine, so I won't be responding any further on this matter.

    Sure, if a client wants to pay EXTRA for the additional support then sure, but it is not worth it otherwise. As for your point of it still being inside many places, that is getting smaller and smaller and on top of that, if you keep providing support for these users then they will have no reason to upgrade lol; so no, I don't agree with supporting these users.

    You really need to learn to control your emotions, that was an example; you can use whatever the hell you want, change the pixels for em units if you feel like it, that's your prerogative and again, NOT a WCAG violation.

    Geez dude, grow up - if you're not going to act civil and can't have an intelligent debate without resorting to name calling and childish behaviour then I am done with you.

    I think you need to find a new field of work because obviously this field isn't working for you, I know people that work in accessibility and they don't talk to people and their peers like you do; I'm serious, go and find a different field of work to do.

    ...again, refer to my comment about needing to grow up.
     
    cyphix, May 10, 2018 IP
  16. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,621
    Likes Received:
    1,553
    Best Answers:
    225
    Trophy Points:
    515
    #16
    Thing is you're talking about it like it is extra coding, it is not. It's the starting point you build off of. JUST like how your pages should work scripting off, and even CSS off.

    In fact, using media queries to BLOCK modern features off from old browsers is one of the easiest ways to implement this! It should at least work and be usable -- they don't get goofy extras like rounded corners, box shadows, and flex, OH WELL. Doesn't mean they shouldn't still be able to access what's REALLY important, the CONTENT.

    Then you know exactly two things about the WCAG... and Jack left town.

    The valid choices for WCAG compliant font-sizes is:

    Percent - https://www.w3.org/TR/WCAG20-TECHS/C12.html
    Named - https://www.w3.org/TR/WCAG20-TECHS/C13.html
    EM - https://www.w3.org/TR/WCAG20-TECHS/C14.html

    All of which do NOT have a predefined correlation to any real-world measurement. That's the cornerstone of elastic design and if you aren't doing that, you ARE in violation! JUST like illegible colour contrasts, JUST like having no scripting off graceful degradation for base functionality, and just like any dozens of other things sleazy dirtbags make up lame excuses or claim isn't in the WCAG when it is JUST to cover up for their own ineptitude and ignorance.

    Which is why ALL of those articles you linked to are ignorant know-nothing dipshits talking out their collective arses! EXACTLY the type of disinformation I'm constantly fighting against with client's IT departments filled with turds unqualified to even hold their damned jobs who land my clients in court for failing to meet accessibility minimums in the first damned place!

    Of course the sites for said articles being comedy gold, every last one of them flipping the bird at usability and accessibility -- so naturally we can 'trust' that they are qualified to tell us about these subjects.

    That's not my 'opinion' or 'preference', that is FACT. Using pixels is a giant middle finger to users with non-standard metrics or accessibility needs. PERIOD. If that's to to your 'preference' than you simply don't care about those users and if you worked with the types of sites I do, you'd find your ass being fined or facing civil lawsuits sooner than later.

    ... and it's NOT huffing rocket science, I don't get why so many people act like it's hard to huffing do or why the fact they relate off the parent is so difficult to understand or work with. Again I suspect people cannot see past the screen they happened to be seated in front of.

    ... and you need to learn what you're talking about, because you quite clearly do not. You might want to research and understand the WCAG -- in particular reading the entire "understanding success criterion" pages before you start flapping your yap about things you CLEARLY have next to zero knowledge about!

    1) I'm a New Englander, this is how we speak.

    2) If I was brusque, it's because to be brutally frank you're full of manure, and someone might actually listen to the disinformation and ignorance you're spouting. You clearly don't know the first damned thing about the WCAG, so you REALLY might want to zip it until you do.

    Works great for me because I don't put up with the bullshit people like you spout -- aka the bullshit that lands my clients in court. The clients appreciate that even if you don't... probably because they've either been scammed, duped, bamboozled, or packed full of it by people who hold beliefs such as yours.

    There's a reason plastered on fake smiles, platitudes, and the "if you can't say anything nice" attitude is only found in business with scam artists, two bit hucksters, and the people DUMB enough to swallow their lies hook, line, sinker, and a bit of the rod. You want to do serious work slapping the rose coloured glasses on everyone's heads to lead them down the garden path to sing kumbaya around the drum circle with the rainbow farting unicorn is NOT going to get the job done!

    THAT's an adult attitude.

    Though in a way I should be thankful -- from the sound of it people like you are why I have regular work as a freelancer.
     
    deathshadow, May 11, 2018 IP
    malky66 likes this.
  17. cyphix

    cyphix Well-Known Member

    Messages:
    245
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    103
    #17
    So no extra code to support legacy browsers huh!? Yeah ok LOL! But hey, if you want to develop websites that support every browser known to man - more power to you.

    ...and there you go again, just can't help yourself can you - can't seem to go one post without insulting or degrading someone.

    Anyway, to your point..... please see:

    https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html

    Each numbered item in this section represents a technique or combination of techniques that the WCAG Working Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see Understanding Techniques for WCAG Success Criteria, particularly the "Other Techniques" section.
    One of these techniques as I already explained to you is:

    G142: Using a technology that has commonly-available user agents that support zoom
    Yes, your technique of using fonts that are relative, named or a percentage is also an option - but no, it's not required, as long as you meet one of the other options stated.

    Additionally, what is required with all levels of WCAG compliance depends on the conformance level you are trying to meet; I'd say most sites on the web should at least try and reach Level A and then of course AA and AAA have different use cases.

    Once again, you seem to fail at making an argument to counter what the articles are stating to support your case, and instead choose to slander them like that is going to prove anything!? I think you need to do meditation to help you learn how to control your anger or get into anger management classes or something; that, or as I said before, get a different job that doesn't make you so angry.

    Just because you keep saying it doesn't make true I'm sorry. It is your preference and that is my preference and we both care about accessibility despite what you may think.

    ...again, whilst some may have a preference for pixels because it's "easier", many have done research like myself and chosen to use pixels over relative units because neither are perfect and IMO relative units doesn't really offer much incentive over using pixels for accessibility, so I choose to use pixels.

    Yep, I believe I linked to part of that above when I was flapping. :)

    Anyway, good chat - reply if you like, but I'm not going to waste any more time on someone like you.

    I enjoy a good debate as much as the next guy, but you might earn more respect and educate more people with a change of attitude and try and come across as helpful rather than badgering and slandering people and thinking your way of thinking is gospel.

    Good day!
     
    cyphix, May 11, 2018 IP
  18. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,621
    Likes Received:
    1,553
    Best Answers:
    225
    Trophy Points:
    515
    #18
    Except the LAST "commonly available" browser to meet G142 was Opera 12, since Gecko based browsers have never met it, Webkit/Blink based browsers don't meet it, and IE9/later DO NOT MEET THIS REQUIREMENT. (there's a reason G142 calls out IE7 and Opera by name, but omits Firefox / Mozilla Suite from it!)

    NOT that forcing users to dive for the zoom is good usability; but when the browser fails to actually do the legwork needed to make layouts when zoomed useful, it is now IMPOSSIBLE to meet G142 as no commonly in use browsers provide said functionality.

    Well, unless you have complete control over your deployment environment so that everyone is either using Opera 12.18 or earlier, or IE8/earlier.

    But now that the only browser that REALLY did it worth a damn (actual Opera) is dead and buried, with the steaming pile of SHIT that is the Opera logo slapped onto Chrome any-old-way completely missing ANY of the features that made Opera worth using in the first place (and it wasn't the renderer or browser engine) ... well, there's a reason most "real" Opera users now use Vivaldi.

    Again, just more lame excuses to cover up for incompetence of something as unbelievably piss-simple as EM.
     
    deathshadow, May 12, 2018 IP
  19. alfieindesigns

    alfieindesigns Active Member

    Messages:
    117
    Likes Received:
    5
    Best Answers:
    1
    Trophy Points:
    80
    #19
    Hi @Roger Bunch
    I suggest you study or at least have understanding how CSS3 Media Queries works.
    And from then you can explore it more. Check these,

    How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
    https://www.smashingmagazine.com/20...s-to-create-a-mobile-version-of-your-website/

    Using CSS Media Queries To Create Responsive Web Layouts


    Tutorial: Learn how to use CSS Media Queries in less than 5 minutes


    *You may search more tutorials...

    I hope this help, because for a beginner its always best to study the fundamentals so you can use it properly.
     
    alfieindesigns, May 14, 2018 IP