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.

Opt-in Background Image Disappears When On Mobile Site ?

Discussion in 'CSS' started by Kayla Rose, Apr 4, 2014.

  1. #1
    Hey there! Brand new here.

    I created this opt-in { not the rest of the site } :
    Im wondering how or what css code to use that will show this image when viewing on iphone and smaller tablets. {client has the Surface Pro and not able to see it }

    Is there a way to use a different image when it switches to mobile? Like if I just wanted to use the text part? Or what would be a suggested better solution?

    OH p.s. if you take a look at the site.. I have some css within the html BUT that is only because that is the only way this theme would listen.

    The site page is here and the opt-in is located at the bottom of the blog post :)


    Thanks!!
     
    Kayla Rose, Apr 4, 2014 IP
  2. ramosthemes

    ramosthemes Greenhorn

    Messages:
    10
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    23
    #2
    just use @media queries to modify that class for mobiles eg

    @media all and (max-width:479px) { .some-element {background-image:(url'....');} }

    Effects all devices with a width of 479px or less.
     
    ramosthemes, Apr 6, 2014 IP
  3. Kayla Rose

    Kayla Rose Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    Thanks! I will do that today!
     
    Kayla Rose, Apr 7, 2014 IP
  4. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #4
    While using media queries, as suggested, is the right way to go, I strongly discourage the use of "media all". Not only that, I also think there's zero reason for it to exist in the first place. You most likely want to target screen so @media screen and (max-width:479px) is the way to do it. (why 479px ?)

    Also, you probably don't want any kind of bandwidth-consuming presentational images on a handheld device. All the smartphones and tablets have a relatively short battery life, so until we figure out how to mass-produce super-capacitors, we should probably strip all the unnecessary, interfering images on handheld devices.
     
    wiicker95, Apr 10, 2014 IP
  5. ramosthemes

    ramosthemes Greenhorn

    Messages:
    10
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    23
    #5
    But would all mobile devices (especially low bandwidth capability) be classed as screen?
    If they were then why would there be 'handheld' media type?

    Plus 'all' is less to type :)

    Here's the media types you can use:

    all - Used for all media type devices
    aural - Used for speech and sound synthesizers
    braille - Used for braille tactile feedback devices
    embossed - Used for paged braille printers
    handheld - Used for small or handheld devices
    print - Used for printers
    projection - Used for projected presentations, like slides
    screen - Used for computer screens
    tty - Used for media using a fixed-pitch character grid, like teletypes and terminals
    tv - Used for television-type devices

    479 because it was in my head from that day - 480 is the break point for iphone landscape so i use max-width: 479px
     
    Last edited: Apr 12, 2014
    ramosthemes, Apr 12, 2014 IP
  6. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #6
    Not exactly.

    Pretty much, yeah. Screen is screen, no matter how small. Not print, not braille reader, but screen.

    No (let me guess, w3fools?). As its name suggests, it targets all "screens". That is probably why the handheld type is more or less redundant to screen and max-width.
    And the reason is simple -- ALL the style sheets linked to your document should have a media attribute (non-"all") declared, because that IS the main purpose of CSS -- being able to target a wide range of devices and making your content accessible for everybody.

    Now, if you want to target devices with a small resolution, you just add the max-width condition. If you have a proper semantic markup established, along with concise styles and hooks (think multiple classes idiocy, or grid systems), a few tweaks is ALL you need to make your website look perfect on smaller resolutions. It's usually stripping the image off the main heading and centering it, setting some floats to none, simplifying the main menu, stripping the background image, removing bilateral margins and padding and a few other stuff. All those people that insist on the fact that having a semi-fluid and responsive website is difficult couldn't be more wrong!

    Not only that, but a small resolution doesn't necessarily imply handheld (think notebooks). Having huge background images is bad for various reasons, but it's even more useless when you cannot even see it as it's overlapped by the actual content.

    That is not a valid argument. It's just a few keystrokes up or down. By the way, "all" doesn't specify anything and it's no better than not even using media queries.
     
    wiicker95, Apr 12, 2014 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #7
    Welcome to the HELL that was the LAST attempt to make CSS target mobile devices. Many developers to this day cannot seem to be bothered to use the MEDIA attribute on their LINK tags, and they are one third of those directly responsible for this mess.

    See, back in the day when HTML 4 introduced the media attribute, the idea was exactly what you think -- targets like handheld for handheld, screen for desktops, etc, etc...

    The problem is NOBODY making browsers for mobile actually bothered implementing it properly. Many of them like IE 5.x for WinCE 5/earlier, IE 6 for WinCE 6, etc realized that NOBODY was coding sites to support them, so they said screw it and just showed screen instead. Others like Opera would use a mix of their own internal style (which is kind-of the idea of HTML in the first place) and then combine them piecemeal with SCREEN's values. Other UA's like Blazer would use a bizarre mix of handheld and screen.

    Which is why when it came time to implement CSS3 on the iPhone and Android, they pretty much said "screw it" and just identify themselves as screen.

    Handheld was doomed by all parties involved; from the W3C being toothless on implementing standards (exemplified by their current laissez-faire attitude), to developers refusing to even bother coding to use 'handheld', to browser makers failing to implement the HTML 4 specification properly. (something that bites us to this day with many browsers having decade and a half old bugs and gaps in their implementations! Part of why HTML 5 pisses me off, their implementing useless code bloat when they don't even have 4 properly implemented yet)

    Even worse was the 'other' formats like WAP which really held handhelds back. As much as I badmouth Apple, their use of a REAL browser engine capable of running REAL HTML and REAL CSS was a massive game-changer, and IMHO the most overlooked change they introduced to the market.

    Also, you have that a lot of browsers mis-used/abuse the other MEDIA attributes as well... a great example is how most browsers "Kiosk" mode ("real" Opera and FF both do this) identify themselves in full-screen mode as projection instead of screen... Likewise most devices that identify themselves as TV (or worse do a hyrbrid of screen and TV) usually should be getting the screen layout too -- which is why if you are targeting screen, well... there's a reason my LINK for screen usually looks like this:

    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    Code (markup):
    Targeting all three.

    Even WORSE is Print... since IE and FF both have their heads up their own backside about actually bothering to OBEY it. By default they just don't... they try to hyrbidize it with the SCREEN target's values and their own rules, making it near impossible (with the browsers default settings) to ACTUALLY make a proper printable document. Sure, you can go in and change that behavior in the settings, but telling users to do that isn't really something we as developers should have to be doing in the first damned place.

    IF (and that's a big if) Media targets were implemented properly, things would be a lot easier -- but fact is they just aren't. Browser makers have drug their heels and outright ignored what they are for, and we all ended up paying for it.

    ... at least they seem to be TRYING to implement media queries in a sane manner, but to be frank the need for:

    <meta
    	name="viewport"
    	content="width=device-width; height=device-height; initial-scale=1.0"
    />
    Code (markup):
    and...

    @media (max-width:480px) {
    	* {
    		-webkit-text-size-adjust:none;
    		-ms-text-size-adjust:none;
    	}
    }
    Code (markup):
    To tell smartphone browsers we actually know what the **** we're doing is just another stunning example of browser makers trying to second guess the specification with their own asshat BS.

    But that's the current W3C in a nutshell; more interested in documenting proprietary crap browser makers come up with than acting as an actual authority that innovates and creates ACTUAL specifications on how things work. Unlike with HTML 4 Strict where they tried to be authoritative and tell us how to do things PROPERLY, they've shrugged their shoulders, given up and said "fine, just sleaze out pages any old way" -- Hence why HTML 5 is a train wreck of BS that undoes all the progress of 4 Strict and sets coding practices back to the worst of the late 1990's. I've seen this **** before, it was called HTML 3.2 :/
     
    Last edited: Apr 12, 2014
    deathshadow, Apr 12, 2014 IP