Results 1 to 2 of 2

Thread: HTML5 responsive banner ad

  1. #1
    Join Date
    Sep 2005

    Post HTML5 responsive banner ad


    I have to deliver a responsive banner ad tomorrow and I have not made a html banner ad before, used to flash ads!! This banner is actually jus photo but has to change picture size, one for tablet and one for mobile. I think I have understood that I am suppose to use @media but I donīt know what to do. Can anyone help me. I know this is simple but I have no time to learn this now since this came up this morning with big haste!


  2. #2
    Join Date
    Feb 2014
    Easiest way would be to have external CSS sheets, where each sheet would have the width, height and any other properties for your page. I made up the max-width and min-width values off the top of my head but it should be more or less accurate. Feel free to change them to be more accurate. For example put the following anywhere in the <head> section of your page.

    HTML Code:
    <link rel = "stylesheet" type = "text/css" href = "CSS/mainstyle.css" /> <!-- master sheet that specifies constant properties, such as background colours -->
    <link rel = "stylesheet" type = "text/css" media = "screen and (min-width: 901px)" href = "CSS/large.css" /> <!-- executes for standard desktop and laptop screens -->
    <link rel = "stylesheet" type = "text/css" media = "screen and (min-width: 701px) and (max-width: 900px)" href = "CSS/medium.css" /> <!-- executes for tablets -->
    <link rel = "stylesheet" type = "text/css" media = "screen and (max-width: 700px)" href = "CSS/slim.css" /> <!-- executes for phones -->
    In each of the external CSS that adjust the size, it should include at the very least the following:

    HTML Code:
         height: <!-- your desired height in px --> ;
         width: <!-- your desired width in px --> ;
    Good luck with your ad!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center