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.

Hiding style elements for mobile devices

Discussion in 'CSS' started by mauroed79, Apr 6, 2016.

0
  1. #1
    Hello guys!
    I'm trying to build a mobile-friendly version of my Joomla 1.5 website (I know, Joomla 1.5 is outdated...).

    I thought the easiest thing to do was using the media query creating a simplified css for the devices with a resolution up to 799px, at the same time hiding all the unnecessary elements with the code
    

.mobile-hide{ display: none; }
}
    Code (CSS):
    This is working quite well at least with Firefox and Chrome browsers from Android.

    The problem happens when I try and access a page of my website from a link posted on my Facebook page. The Facebook mobile app doesn't seem to recognise the simplified style and loads the page in the desktop version, as shown in the comparison between the two screenshots below.

    Of course this is a big issue for me, because I get most of my visits from my Facebook page and I don't think it would be a good solution to recommend users to disable the Facebook App instant browser.

    Could you explain why this happens?
    Any advise and review would be greatly appreciated! :)

    [​IMG] [​IMG]
     
    mauroed79, Apr 6, 2016 IP
  2. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #2
    Could it be that it doesn't recognize the standard viewport?

     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
    Code (markup):
    I assume you have it between your <head></head>.

    Sometimes apps require a valid markup DOCTYPE such as

    
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
    Code (markup):
     
    qwikad.com, Apr 6, 2016 IP
  3. mauroed79

    mauroed79 Active Member

    Messages:
    56
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    93
    #3
    Hello qwikad.com,
    thanks for replying.

    Of course I have a viewport code installed. Here it is 

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    HTML:
    It's actually the first line of code after the <head> tag.

    I also have the following doctype declaration:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    HTML:
    Changing it to the one you posted resulted in the following syntax error:

    Parse error: syntax error, unexpected 'version' (T_STRING) in /var/www/sdb/a/4/stefanstennis/templates/network_v2/index.php on line 11
    Code (markup):
    Still no solution :-(
     
    mauroed79, Apr 7, 2016 IP
  4. Blizzardofozz

    Blizzardofozz Well-Known Member

    Messages:
    132
    Likes Received:
    9
    Best Answers:
    1
    Trophy Points:
    118
    #4
    I'm not familiar with how Facebook loads the pages but I guess this is the problem. If it uses iframe maybe it width is larger than 799px and so the query is not triggered? Can't you just put a simple link from facebook to your website to prevent usage of iframe or facebook app at all?
     
    Blizzardofozz, Apr 11, 2016 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    First off, NEVER use user-scalable=no, minimum-scale=1.0, or maximum-scale=1.0 as you are telling users who need to use the zoom to go plow themselves... a result that will most likely drive users AWAY from the site. There is NO legitimate reason to EVER consider using those values -- I find out who started telling people to use those, the end result may involve my boot being shoved far enough up their rectum they'll be flossing with my laces.

    Second, even thinking "mobile" vs. "desktop" is flawed... it shows a lack of understanding what responsive layout is even FOR. Your layout should adjust to the needs of the content NOT to some arbitrary size that might be mobile, might be desktop, might be anything. Much like thinking design in pixels it's just a flawed mindset that's going to result in a page that tells users to sod off!

    Third, looking at the site in question it is missing ALL of the stepping stones of accessibility needed before you even THINK about making a site responsive, so it falling apart when you try to do so is hardly a shock. PX metric fonts, PX measurements, px breakpoints, px paddings, px widths -- it's all epic fail. You pop the bonnet to look at what Joomla is vomiting up and has the unmitigated gall to call markup and the story is far, far worse with static style in the markup, gibberish document structure, invalid markup, annoying animated scripttardery, static scripting in the markup, pointless meta, overstuffed keywords meta GUARANTEED to either be ignored or result in being slapped DOWN by search, scripttard navigational elements that have no graceful degradation...

    I mean with bloated asshattery like this:

    
<div class="lof-main-item">
             	<a href="/index.php?option=com_content&amp;view=article&amp;id=1606:edberg-a-federer-end-of-the-partnership&amp;catid=41:fedberg&amp;Itemid=93" title="Edberg & Federer, end of the partnership"><img src="http://stefanstennis.free.fr/images/lofthumbs/470x400/images/stories/2015_stefan_edberg_roger_federer_fedberg_end.jpg" title="Edberg & Federer, end of the partnership" ></a> 
<div class="lof-description">
<a style="font-family: arial narrow; font-size: 14pt; color: #ffffff; font-weight: bold; width: 100%;" target="_parent" title="Edberg & Federer, end of the partnership" href="/index.php?option=com_content&amp;view=article&amp;id=1606:edberg-a-federer-end-of-the-partnership&amp;catid=41:fedberg&amp;Itemid=93">Edberg & Federer, end of the partnership</a>
</div>            </div>
    Code (markup):
    Much less the ridiculously absurd 129k of markup to deliver 2.95k of plaintext and maybe a dozen content images -- it's such an ineptly developed train wreck and such a giant "go **** yourself" to accessibility that the only sound advice I can give you is to pitch that entire train wreck of how NOT to build a website in the trash, and start over from scratch... aka the Ellen Ripley solution.

    Nuke the site from orbit, it's the only way to be sure.

    Apologies if that sounds harsh, but the light of reality often is! You literally have the perfect storm of epic fail at site construction in terms of usability and accessibility on the front-end, and speed, efficiency, and good practices on the back end.

    You'd almost think it was sleazed together any old way with one of the off the shelf scam CMS like Joomla with zero concern for separation of presentation from content, progressive enhancement, graceful degradation, semantic markup, much less meeting accessibility minimums.
     
    deathshadow, Apr 11, 2016 IP