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.

Show 'this' if desktop-show'that' if mobile

Discussion in 'HTML & Website Design' started by dave-london, Feb 24, 2016.

0
  1. #1
    As per the title,want to show different ad script on phpbb forum if using desktop or mobile.
    I have ads that are not responsive.

    I have this...
    http://blog.hubspot.com/marketing/site-content-only-mobile-viewers-can-see-ht

    <div class="mobileShow">
TEXT OR IMAGE FOR MOBILE HERE
</div>
This div will declare that this copy will respond only when the class is triggered. By adding the code below, the class will only be triggered when the user is on a mobile device. Add the following code in the HTML <head> section of your page:

<style type="text/css">
   .mobileShow { display: none;}
   /* Smartphone Portrait and Landscape */
   @media only screen
   and (min-device-width : 320px)
   and (max-device-width : 480px){ .mobileShow { display: inline;}}
</style>
Hide content on mobile devices.
To hide certain text or images that will not display on mobile devices, you will add similar code as before in your HTML <body>:

<div class="mobileHide">
TEXT OR IMAGE NOT FOR MOBILE HERE
</div>
Then, you will want to add the following code to your HTML <head> section:

<style type="text/css">
   .mobileHide { display: inline;}
   /* Smartphone Portrait and Landscape */
   @media only screen
   and (min-device-width : 320px)
   and (max-device-width : 480px){  .mobileHide { display: none;}}
</style>
    Code (markup):

    But it's a teeny bit slow and was wondering if anything could be better and also how would I use the @media thing.
     
    Solved! View solution.
    dave-london, Feb 24, 2016 IP
  2. Phil S

    Phil S Member

    Messages:
    60
    Likes Received:
    18
    Best Answers:
    4
    Trophy Points:
    35
    #2
    Whoa, that application of media queries is just... wacky in so many ways.
    You know they're using wrongs tags if they display a DIV inline. Now, there is absolutely no reason to declare min and max device width, if you go with the device with it is to precisely target certain devices. And that... is not ideal in most cases. It might be possible to make the add responsive, though I'm not sure you'd want that.
    Also, I doubt that little snippet is slow by itself. What generally slows you down is adding third party crap on your website, like that add. You can't neither predict its behavior nor content, you couldn't possibly trust it as such.

    I'd go with something as simple as this:
    @media screen and (max-width:480px) {
    .advert { display:none }
}
    Code (markup):
    ...if I don't decide to completely ditch the idea of unreliable adverts on my website.
     
    Phil S, Feb 25, 2016 IP
  3. dave-london

    dave-london Member

    Messages:
    65
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    48
    #3
    Thank you for your reply,where would I put the code you posted,I'm quite good with html/css but that one stumps me.

    And what does that code do?

    And what about this code below?
    @media (max-width: 479px) {
.show-on-desktop, .show-on-tablets, .hide-on-mobile { display: none; }
}
@media (min-width: 480px) and (max-width: 979px) {
.show-on-desktop, .hide-on-tablets, .show-on-mobile { display: none; }
}
@media (min-width: 980px) {
.hide-on-desktop, .show-on-tablets, .show-on-mobile { display: none; }
}
    Code (markup):
    Where would I put the ad code to show/hide?
     
    dave-london, Feb 25, 2016 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,236
    Likes Received:
    1,688
    Best Answers:
    29
    Trophy Points:
    475
    #4
    You create a regular css for desktop screens and then you change it to display what you want it to display for mobile screens. For instance (these are just basic examples):

    .some_div {
width: 1000px;
height: 300px;
background-color: #FFF;
}
@media (max-width: 479px) {
.some_div {
width: 400px;
height: 300px;
background-color: #CCC;
}
}
    Code (markup):
    So now on cell phones the width is 400px and the color is #CCC.

    Or you can have something completely hidden using display: none;

    .some_div {
display: block;
width: 1000px;
height: 300px;
background-color: #FFF;
}
@media (max-width: 479px) {
.some_div {
display: none;
}
}
    Code (markup):
    So now .some_div is completely hidden from view on cell phones.

    Etc. etc.

    And I forgot to mention. You need to add this to your <head></head>: 

    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes">
    Code (markup):
     
    Last edited: Feb 25, 2016
    qwikad.com, Feb 25, 2016 IP
  5. dave-london

    dave-london Member

    Messages:
    65
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    48
    #5
    Thank you but I've messed around with it and still can't get it to work,especially when I add an ad code re:Google ad script.

    What I need is an ad script inserted so it shows on mobile only.
    And another for desktop only.
    So would need
    <div class="mobileAd"> & <div class="desktopAd">
    And @media for mobile & @media for desktop.

    I really can't figure out how to do this.
     
    dave-london, Feb 26, 2016 IP
  6. #6
    Try this: 
    <!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type"
            content="text/html; charset=utf-8">

    <meta name="viewport"
            content="width=device-width; height=device-height; initial-scale=1">
   
    <title>
      Test document
    </title>

    <style type="text/css"
           media="screen">
    /*<![CDATA[*/

  html,
  body {
      background-color: white;
      color: black;
      font: 100%/1.5 sans-serif;
      margin: 0;
      padding: 0;}

   p {
      font-size: 1em;}

    #desktop-ad {
       display: block;}

    #mobile-ad {
         display: none;}

    @media (max-width: 640px){
         #desktop-ad {
              display: none;}

         #mobile-ad {
              display: block;}}
   
    /*]]>*/
    </style>
  </head>
  <body>
    <div id="desktop-ad">
      <p>
         I'm a desktop ad.
      </p>
    </div>

    <div id="mobile-ad">
      <p>
         Can you hear me now?
      </p>
    </div>
  </body>
</html>
    Code (markup):
    cheers,

    gary
     
    kk5st, Feb 26, 2016 IP
  7. dave-london

    dave-london Member

    Messages:
    65
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    48
    #7
    Thank you very much Gary,of course it worked.
    Again big thanks.
     
    dave-london, Feb 26, 2016 IP