IPhone screen size in Photoshop

I'm designing UI for iPhones starting at 2X image size retina display.
What screen size should I set up in Photoshop?

If you choose File > New and choose the Mobile App Design preset, you'll find the Size menu already lists most recent iPhone screen sizes including the 6 and 6 Plus.
Mylenium's link is very helpful; if you go there and go to Icon and Image Sizes there's a table of dimensions for all of those things.
If you have Photoshop CC 2014, you can set up Generator and Extract Assets to export layers (e.g. button designs) to multiple pixel dimensions automatically. That will be a lot easier and faster than manually sizing/cropping/exporting.

Similar Messages

  • IPhone Screen Sizes?

    Does anyone know the screen sizes?
    Full Screen Size:
    Application Screen Size:
    Safari Browser Screen Size:
    For designing purposes I need to know the exact space available in pixels.
    Thanks

    The iPhone scales web pages assuming a width of 960 pixels. If you put out something that is 240 pixels wide, it will turn into a tiny, unreadable rectangle in the top left.
    There are two options to producing a readable page:
    * create a display using the full 960 width, with multiple columns. The user can double-tap the columns, which expand to a readable size.
    * produce output using a narrower width, and tell the iPhone to use that width. E.g. I produce outputs assuming 240 pixel width, and use
    <meta name="viewport" content="width=240">
    The phone will scale it so that a width of 240 pixels fills the horizontal width of the screen (which can be different depending upon which way the user is holding the phone). I use 240 because I want my pages to work on other devices, and 240 is a fairly standard width for hand-held devices. My page thus works nicely on a Blackberry as well.

  • Fit screen size on Photoshop CS4

    I know there is a similar post related to this but my laptop resolution is 1366 x 768 (highest possible) and my OS is window 7 home premium.  When I use the liquify function on CS4, the liquify screen will not fit to my laptop screen.  I cannot access to the scrollbar at the bottom when I zoom in to the image.  Is there a way to fix this thing?

    Two ways right off hand:
    1. Set your taskbar to Autohide.
                    or
    2. Use the Fullscreen mode in photoshop.
      (press the F key once to get fullscreen)
      (press the F key twice to get back to the regular screen)
    MTSTUNER

  • IPhone app screen size set up in Photoshop

    I'm designing an iPhone app in Photoshop. I want to work in 2X size.
    What size should I set the screen up in Photoshop to be able to export UI images and icons accurately?
    Should I use an iPhone 5 or iPhone 6 screensize?
    These are both 2X png but screensizes are different, therefore UI exported for the @2X size will differ depending on which screensize I first decide to start with.

    If you choose File > New and choose the Mobile App Design preset, you'll find the Size menu already lists most recent iPhone screen sizes including the 6 and 6 Plus.
    Mylenium's link is very helpful; if you go there and go to Icon and Image Sizes there's a table of dimensions for all of those things.
    If you have Photoshop CC 2014, you can set up Generator and Extract Assets to export layers (e.g. button designs) to multiple pixel dimensions automatically. That will be a lot easier and faster than manually sizing/cropping/exporting.

  • ITS Mobile screen sizes too small on iPhone device

    Hi Everybody,
    I am facing the some problems relating to screen sizes on iphone mobile. The ITS service and the templates were working fine at the desktop level..But, in iPhone,screen sizes are too small to view.We need to zoom it and enter.I have tried with screen format 16X20 and 16X20ITS.
    Can any body provide the solution to fix the problem?
    Regards,
    Mahesh

    You must have a very high resolution screen, also called HiDpi.
    If you have Photoshop CC 2014, you can go to Edit > Preferences > Experimental Features and checkmark "Scale UI 200%"
    If you have CC, CS6, or below, there is no way to scale the UI as of yet. There may not be. These products are no longer being updated.
    At best I can recommend reducing the resolution down to around 1400 px horizontal. That's not the native resolution and defeats the purpose of having a Hidpi screen.
    So only thing left aside from returning the laptop, is to work with a large external monitor, or for $10/monthly, join the Photography Plan and you can use CC 2014 and the 200% UI.

  • Screen (Window) maximum size in Photoshop (ScriptUI or something?)

    Hi!
    I can't get the right dimensions of the maximum screen size in Photoshop. Neither with javascript nor with Actionscript. I'm trying to use Window.maximumSize but when Photoshop is fullscreen-d, it returns the height value, as if Windows Taskbar is on, while it is not. (In docs it is said that the height value will be screen size minus 50, but in my case it returns minus 100 or like so).
    I have to stick a panel to the bottom of the screen in every Photoshop state - so I have to know the size of the screen area. How can I do it the right way?
    Thanks!

    The ability to programmatically maximize a frame was only introduced in JDK 1.4.
    Someone posted an ugly solution that used the Robot class to programmatically click the maximize icon in the title bar. Search the forums for it if you want to give it a try.
    Somebody else proposed to position the window at (-2, -10) or something like that to hide the title bar and make it larger than the screen to hide the the borders.
    No real solution until 1.4, I'm afraid...
    Stephen

  • Image size of iPhone 5S is smaller than screen size

    When I click any picture with my iPhone 5s, the image size is always 20-30% smaller than screen size. Its like a picture clicked from iPhone 4, is this an issue or is it designed in that way?? Coz Images clicked in potrait mode are always cropped 20-30% and I am not liking it..

    If auto adjust to fit with the Default Full Zoom extension isn't working then the pages may be using absolute values for elements and in such a case you would have to zoom the pages manually.
    Can you post a link to a few pages where it isn't working properly?

  • Any idea when apps will be updated to utilize the new screen size on iphone 5?

    any idea when the apps will be updated to utilize the new screen size on iphone 5?

    Don't know what "the apps" are; they won't happen all at once. It will happen for an individual application when the developer chooses to make a new version available.

  • Regarding apps screen size of iphone 5

    I bought an iphone 5 and i found most apps i installed through backup from my earlier iphone and i found most of apps' screen size are same as iphone 4s.
    Is there any way to make my apps fit for iphone 5 screen size.
    My another query is about how can i disable game centre option as it being a disturbance when opening the game apps.
    Hope i will be clarified soon.

    tell the app developers to update their apps for the iphone 4 screen.

  • Script photoshop to output for devices of different screen sizes

    Does anyone know of a script that will output Photoshop images at difference screen sizes for various devices?

    Image Processor Pro can save various sized documents at the same time.
    http://russellbrown.com/scripts.html

  • Why screen size for iPhone simulator is still 480x320 pixels?

    Hi,
    I just upgraded my xcode to 4.2.1 so I have iOS SDK 5.0 now. However, when I create a project, the screen size in simulator for iPhone is 480x320 pixels. I was told the screen size for iPhone/iPad is now 960x640 pixels. Why in simulator it is still old size? What should I do to get the correct size or I am wrong and the actual device is still 480x320 pixels? Thanks.
    Regards,
    Taizhi

    hi,
    you change between "iPhone" and "iPhone retina" to simulate both physical resolutions.
    For the project it doesn't matter because the logical resolution is still 320 x 460 "Points". The OS does most of the work for you.
    I suggest reading: this: http://developer.apple.com/library/ios/#documentation/2DDrawing/Conceptual/Drawi ngPrintingiOS/SupportingHiResScreens/SupportingHiResScreens.html#//apple_ref/doc /uid/TP40010156-CH15
    Dirk

  • IPhone 6+ unsupported screen size?

    stage.fullScreenWidth returns 960
    stage.fullScreenHeight returns 640
    stage.stageWidth returns 1000
    stage.stageHeight returns 750
    If I listen to Event.Resize, the values will be the same. But the IPhone 6+ screen sizes much more.
    How should I fix this ?
    My options:
    stage.align = StageAlign.TOP_LEFT;
    stage.scaleMode = StageScaleMode.NO_SCALE;
    <key>UIDeviceFamily</key> = 1, 2
    <requestedDisplayResolution>high</requestedDisplayResolution>

    According to the release notes at http://labs.adobe.com/downloads/air.html published on Oct 2, 2014, the following issues exist:
    [iPhone 6 Plus] Wrong screen size and dpi is returned through the runtime APIs.
    [iPad 3 and later]iPhone Launch image([email protected]) appears on iPad if iPhone launch images are packaged along with iPad launch
    images.
    [iPhone 6 Plus] [Launch Image]: Blank frame appears instead of launch image when only [email protected] is packaged with application.
    Have these been addressed? If not, what is the status of these problems?
    I do not have an iPhone 6 or 6 plus, so I can't test this; but I am eager to publish my app with full support for iPhone 6 and 6 plus.

  • How do i make this page adapt to all screen sizes???

    if i copy and paste my index code can someone please tell me if theres anything i can add so it will adapt to all screen sizes??
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Nicola Campbell Photography</title>
    <style type="text/css">
    #apDiv1 {
              position:absolute;
              width:1001px;
              height:170px;
              z-index:1;
              left: 438px;
              top: 221px;
    #navbar {
              height: 40px;
              width: 900px;
              margin-right: auto;
              margin-left: auto;
              border-top-style: none;
              border-right-style: none;
              border-bottom-style: none;
              border-left-style: none;
    </style>
    <script src="js/modernizr-2.5.2-respond-1.1.0.min.js" type="text/javascript"></script>
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
    <script src="js/jquery.mousewheel.js" type="text/javascript"></script>
    <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/flexslider.css" rel="stylesheet" type="text/css" />
    <script type="text/xml">
    <!--
    <oa:widgets>
      <oa:widget wid="2827522" binding="#OAWidget" />
    </oa:widgets>
    -->
    </script>
    <style type="text/css">
    #apDiv2 {
              position:absolute;
              width:901px;
              height:49px;
              z-index:2;
              left: 487px;
              top: 51px;
              text-align: center;
              color: #FF99FF;
              font-size: 80px;
              font-family: HaloHandletter;
    #apDiv3 {
              position:absolute;
              width:409px;
              height:56px;
              z-index:3;
              left: 768px;
              top: 96px;
              color: #999999;
              font-family: "Adobe Garamond Pro";
              font-size: 24px;
    #apDiv2 div {
              font-size: 100px;
              font-family: HaloHandletter;
              color: #999999;
    #apDiv4 {
              position:absolute;
              width:901px;
              height:449px;
              z-index:4;
              left: 451px;
              top: 202px;
    #apDiv5 {
              position:absolute;
              width:848px;
              height:152px;
              z-index:11;
              left: 433px;
              top: 201px;
    #apDiv6 {
              position:absolute;
              width:200px;
              height:115px;
              z-index:5;
              left: 1250px;
              top: 138px;
    #apDiv7 {
              position: absolute;
              width: 891px;
              height: 42px;
              z-index: 5;
              left: 552px;
              top: 174px;
    #apDiv8 {
              position:absolute;
              width:48px;
              height:50px;
              z-index:6;
              left: 102px;
              top: 51px;
    #apDiv9 {
              position:absolute;
              width:49px;
              height:51px;
              z-index:7;
              left: 152px;
              top: 51px;
    #apDiv10 {
              position:absolute;
              width:49px;
              height:49px;
              z-index:8;
              left: 202px;
              top: 51px;
    #apDiv11 {
              position:absolute;
              width:52px;
              height:52px;
              z-index:9;
              left: 252px;
              top: 51px;
    </style>
    <script type="text/javascript">
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    </script>
    <meta name="Description" content="Welcome to Nicola Campbell Photography. I am based in Lancashire and specialise in Wedding Photography." />
    <meta name="viewport" content="width=device-width" />
    <link href="untitled.css" rel="stylesheet" type="text/css" />
    <!-- Phone -->
    <link href="iphone.css" rel="stylesheet" type="text/css" media="only screen and (max-width:320px)" />
    <!-- Tablet -->
    <link href="ipad.css" rel="stylesheet" type="text/css" media="only screen and (min-width:321px) and (max-width:768px)" />
    <!-- Desktop -->
    <link href="desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:769px)" />
    <style type="text/css">
    #apDiv12 {
              position:absolute;
              width:1013px;
              height:648px;
              z-index:1;
              left: 321px;
              top: 299px;
    </style>
    </head>
    <body onload="MM_preloadImages('navbaroriginalroll_r1_c1.jpg','navbaroriginalroll_r1_c2.jpg','n avbaroriginalroll_r1_c5.jpg','navbaroriginalroll_r1_c6.jpg','navbaroriginalroll_r1_c7.jpg' ,'navbaroriginalroll_r1_c8.jpg','navbar_r1_c4.jpg')">
    <div id="apDiv2">
      <div align="center">nicola campbell</div>
    </div>
    <div id="apDiv3">P H O T O G R A P H Y</div>
    <div id="apDiv7"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navbar','','navbaroriginalroll_r1_c1.jpg',1)"><img src="navbaroriginal_r1_c1.jpg" alt="c1" name="navbar" width="111" height="40" border="0" id="navbar2" /></a><a href="Aboutme.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','navbaroriginalroll_r1_c2.jpg',1)"><img src="navbaroriginal_r1_c2.jpg" name="Image13" width="111" height="40" border="0" id="Image13" /></a><a href="Gallery.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','navbaroriginalroll_r1_c5.jpg',1)"><img src="navbaroriginal_r1_c5.jpg" alt="c5" name="Image21" width="111" height="40" border="0" id="Image21" /></a><a href="Blog.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','navbaroriginalroll_r1_c6.jpg',1)"><img src="navbaroriginal_r1_c6.jpg" alt="c6" name="Image22" width="111" height="40" border="0" id="Image22" /></a><a href="ContactMe.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image23','','navbaroriginalroll_r1_c7.jpg',1)"><img src="navbaroriginal_r1_c7.jpg" alt="c7" name="Image23" width="111" height="40" border="0" id="Image23" /></a><a href="Clients.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image24','','navbaroriginalroll_r1_c8.jpg',1)"><img src="navbaroriginal_r1_c8.jpg" alt="c8" name="Image24" width="111" height="40" border="0" id="Image24" /></a><a href="Weddings.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image25','','navbar_r1_c4.jpg',1)"><img src="navbar_r1_c41.jpg" alt="" name="Image25" width="111" height="40" border="0" id="Image25" /></a></div>
    <div id="apDiv5">
      <script type="text/javascript">
    // BeginOAWidget_Instance_2827522: #OAWidget
    $(window).load(function() {
          $('#slider').flexslider({
                  namespace: "flex-",             //{NEW} String: Prefix string attached to the class of every element generated by the plugin
        selector: ".slides > li",       //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
          animation: "slide",
                 easing: "swing",               //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
          direction: "horizontal",   //String: Select the sliding direction, 'horizontal' or 'vertical'
        reverse: false,                 //{NEW} Boolean: Reverse the animation direction
        animationLoop: false,             //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
        smoothHeight: true,            //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode  
          slideshow: true,                //Boolean: Animate slider automatically
          slideshowSpeed: 5000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
          animationSpeed: 600,         //Integer: Set the speed of animations, in milliseconds 
          initDelay: 0,                   //{NEW} Integer: Set an initialization delay, in milliseconds
          randomize: false,               //Boolean: Randomize slide order
                 useCSS: true,                   //{NEW} Boolean: Slider will use CSS3 transitions if available
          touch: true,                    //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
           video: false,                   //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
          directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
          controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
          keyboard: true,              //Boolean: Allow slider navigating via keyboard left/right keys
          mousewheel: false,              //Boolean: Allow slider navigating via mousewheel
          prevText: "Previous",           //String: Set the text for the "previous" directionNav item
          nextText: "Next",               //String: Set the text for the "next" directionNav item
          pausePlay: false,               //Boolean: Create pause/play dynamic element
          pauseText: "Pause",             //String: Set the text for the "pause" pausePlay item
          playText: "Play",               //String: Set the text for the "play" pausePlay item
          startAt: 0,                //Integer: The slide that the slider should start on. Array notation (0 = first slide)
          pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
          pauseOnHover: true,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering    
          start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
                controlsContainer: "",          //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is                                                             not found, the default action will be taken.
           manualControls: "",             //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
           // Carousel Options
        itemWidth: 0,                   //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
        itemMargin: 10,                  //{NEW} Integer: Margin between carousel items.
        minItems: 0,                    //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
        maxItems: 0,                    //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
        move: 0,                        //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
                before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
          after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
          end: function(){}               //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
    // EndOAWidget_Instance_2827522
      </script><!-- #main-container -->
      <script type="text/javascript">
    // BeginOAWidget_Instance_2827522: #OAWidget
    $(window).load(function() {
          $('#slider').flexslider({
                  namespace: "flex-",             //{NEW} String: Prefix string attached to the class of every element generated by the plugin
        selector: ".slides > li",       //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
          animation: "slide",
                 easing: "swing",               //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
          direction: "horizontal",   //String: Select the sliding direction, 'horizontal' or 'vertical'
        reverse: false,                 //{NEW} Boolean: Reverse the animation direction
        animationLoop: false,             //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
        smoothHeight: true,            //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode  
          slideshow: true,                //Boolean: Animate slider automatically
          slideshowSpeed: 5000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
          animationSpeed: 600,         //Integer: Set the speed of animations, in milliseconds 
          initDelay: 0,                   //{NEW} Integer: Set an initialization delay, in milliseconds
          randomize: false,               //Boolean: Randomize slide order
                 useCSS: true,                   //{NEW} Boolean: Slider will use CSS3 transitions if available
          touch: true,                    //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
           video: false,                   //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
          directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
          controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
          keyboard: true,              //Boolean: Allow slider navigating via keyboard left/right keys
          mousewheel: false,              //Boolean: Allow slider navigating via mousewheel
          prevText: "Previous",           //String: Set the text for the "previous" directionNav item
          nextText: "Next",               //String: Set the text for the "next" directionNav item
          pausePlay: false,               //Boolean: Create pause/play dynamic element
          pauseText: "Pause",             //String: Set the text for the "pause" pausePlay item
          playText: "Play",               //String: Set the text for the "play" pausePlay item
          startAt: 0,                //Integer: The slide that the slider should start on. Array notation (0 = first slide)
          pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
          pauseOnHover: true,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering    
          start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
                controlsContainer: "",          //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is                                                             not found, the default action will be taken.
           manualControls: "",             //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
           // Carousel Options
        itemWidth: 0,                   //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
        itemMargin: 0,                  //{NEW} Integer: Margin between carousel items.
        minItems: 0,                    //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
        maxItems: 0,                    //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
        move: 0,                        //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
                before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
          after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
          end: function(){}               //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
    // EndOAWidget_Instance_2827522
      </script>
      <div id="main-container">
        <p> </p>
        <div id="main" class="wrapper clearfix">
          <!-- FlexSlider -->
          <div id="container">
            <div id="slider" class="flexslider">
              <ul class="slides">
                <li> <img src="hollie.jpg" width="500" height="600" /> </li>
                <li> <img src="slider2.jpg" width="500" height="600" /> </li>
                <li> <img src="slider3.jpg" width="500" height="600" /> </li>
                <li> <img src="slider8.jpg" width="500" height="600" /> </li>
                <li> <img src="slider4.jpg" width="500" height="600" /> </li>
                <li> <img src="slider5.jpg" width="500" height="600" /> </li>
                <li> <img src="slider6.jpg" width="500" height="600" /> </li>
                <li> <img src="slider1.jpg" width="500" height="600" /> </li>
              </ul>
            </div>
            <div id="carousel" class="flexslider" style="display:none;">
              <ul class="slides">
                <li> <img src="hollie.jpg" width="500" height="600" /> </li>
                <li> <img src="slider2.jpg" width="500" height="600" /> </li>
                <li> <img src="slider3.jpg" width="500" height="600" /> </li>
                <li> <img src="slider8.jpg" width="500" height="600" /> </li>
                <li> <img src="slider4.jpg" width="500" height="600" /> </li>
                <li> <img src="slider5.jpg" width="500" height="600" /> </li>
                <li> <img src="slider6.jpg" width="500" height="600" /> </li>
                <li> <img src="slider1.jpg" width="500" height="600" /> </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- #main -->
      </div>
      <!-- #main-container -->
    </div>
    <!-- #main-container -->
    <div id="apDiv8"><a href="https://www.facebook.com/nicola.shulmancampbell?fref=ts"><img src="Retro-Facebok-Rounded-128.png" width="48" height="48" /></a></div>
    <div id="apDiv9"><img src="Retro-Flickr-Rounded-128.png" width="48" height="48" /></div>
    <div id="apDiv10"><img src="Retro-Tumblr-Rounded-128.png" width="48" height="48" /></div>
    <div id="apDiv11"><a href="https://twitter.com/nicola_shulman"><img src="Retro-Twitter-Rounded-128.png" width="48" height="48" /></a></div>
    <script type="text/javascript">
    $(window).load(function() {
          $('#slider').flexslider({
                  namespace: "flex-",             //{NEW} String: Prefix string attached to the class of every element generated by the plugin
        selector: ".slides > li",       //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
          animation: "slide",
                 easing: "swing",               //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
          direction: "horizontal",   //String: Select the sliding direction, 'horizontal' or 'vertical'
        reverse: false,                 //{NEW} Boolean: Reverse the animation direction
        animationLoop: false,             //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
        smoothHeight: true,            //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode  
          slideshow: true,                //Boolean: Animate slider automatically
          slideshowSpeed: 5000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
          animationSpeed: 600,         //Integer: Set the speed of animations, in milliseconds 
          initDelay: 0,                   //{NEW} Integer: Set an initialization delay, in milliseconds
          randomize: false,               //Boolean: Randomize slide order
                 useCSS: true,                   //{NEW} Boolean: Slider will use CSS3 transitions if available
          touch: true,                    //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
           video: false,                   //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
          directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
          controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
          keyboard: true,              //Boolean: Allow slider navigating via keyboard left/right keys
          mousewheel: false,              //Boolean: Allow slider navigating via mousewheel
          prevText: "Previous",           //String: Set the text for the "previous" directionNav item
          nextText: "Next",               //String: Set the text for the "next" directionNav item
          pausePlay: false,               //Boolean: Create pause/play dynamic element
          pauseText: "Pause",             //String: Set the text for the "pause" pausePlay item
          playText: "Play",               //String: Set the text for the "play" pausePlay item
          startAt: 0,                //Integer: The slide that the slider should start on. Array notation (0 = first slide)
          pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
          pauseOnHover: true,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering    
          start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
                controlsContainer: "",          //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is                                                             not found, the default action will be taken.
           manualControls: "",             //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
           // Carousel Options
        itemWidth: 0,                   //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
        itemMargin: 10,                  //{NEW} Integer: Margin between carousel items.
        minItems: 0,                    //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
        maxItems: 0,                    //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
        move: 0,                        //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
                before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
          after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
          end: function(){}               //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
    // EndOAWidget_Instance_2827522
    </script>
    </body>
    </html>

    APDivs cannot be resized. 
    APDivs in primary layouts won't work in Responsive Web Design. 
    APDivs are a very poor layout method. 
    For this reason, Adobe removed APDivs from Dreamweaver CC.
    Example of Fluid Grid Layout with floats & margins, no APDivs required.
    http://alt-web.com/FluidGrid/Fluid2.html
    Nancy O.

  • Screen size with iPad

    When I set my iPad to mirror unto my Apple TV the screen size is small. How can I get it to be the maximum size of my tv screen?

    Mirroring won't fill the TV screen. The iPad has an aspect ratio of 4:3 and the iPhone and aspect ratio of 3:2, neither of these will fit exactly into a TV screen which as an aspect ratio of 16:9. The Apple TV will not zoom the mirrored image, because it may well cut off information which is situated at the top or bottom of the screen.

  • My iphone screen turns up very big, how can I set it back to the normal look? Thank u, my iphone screen turns up very big, how can I set it back to the normal look? Thank u

    my iphone screen suddenly turns very large and I can't put it back to normal. I tried to turn it off and on again, but still keep the same big screen. Please advise me how can I turn it to normal size again.

    Thank you, thank you, thank you! My screen images were so big that I couldn't log in or even slide the control to turn the phone off. The double tap with three fingers gave me the access I needed, and then I was able to turn zoom off via the settings as you suggested.

Maybe you are looking for

  • How do I add a simple, 1D, uneditable bar code to a PDF?

    I would like to add a simple 1D bar code to an existing PDF form.  The bar code is used to identify me as the issuer of the PDF form and would not be edited by anyone else.  If it is not possible to do in Adobe X Pro,  is there a third-party software

  • PO acknowledgement from vendor in system

    Hi gurus, PLease let me know the procedure for getting acknowledge from vendor for PO... Once po created , how to get acknowledge and what are settings required for the same.. how to use that option.. plesae explain.. thanks in advance

  • IDOCs  ALE

    hi pro's well we are mapping this scenario can u please help me .. like we are getting the stock from japan to india as a intercompany sale . ok now both are distributed systems. so in this process order is done at india ( va01 ) . then transfered to

  • Export photos to USB

    Having trouble loading Aperture photos to either SD Card or USB stick to get printed at a lab Have tried Export & Copy without success

  • Understanding NCHAR and Data Storage.

    Hi I plan to migrate an Oracle8i database to Oracle9i to support UNICODE. After reading Oracle9i Daily Feature at http://otn.oracle.com/products/oracle9i/daily/oct02.html I just don't understant how data would be stored. e.g.: if I modify existing ta