Results 1 to 9 of 9

Thread: Responsive webpage advice

  1. #1
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,243
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default Responsive webpage advice

    Morning,
    Im making a page for some photos & would like some advice please to make it responsive for screen size like pc, mobiles, ipads etc
    Thanks

    Here is the page in question

    https://www.theremotedoctor.co.uk/gallery.html

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,272
    Thanks
    3
    Thanked 284 Times in 277 Posts

    Default

    Hi there theremotedr,

    As far as I can see your page is responsive - ( no sign of a horizontal scrollbar ).

    coothead
    ~ the original bald headed old fart ~

  3. #3
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,243
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default

    Hi,
    I’ve been looking at some photos on a mobile device and in portrait view they look ok but If I then turn the device to landscape view the photo is bigger than the screen this need to start moving the picture to view it all.

    Thansk.

  4. #4
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,272
    Thanks
    3
    Thanked 284 Times in 277 Posts

    Default

    Hi there theremotedr,

    Personally, I do not own a mobile device and cannot comment about iit's rendering.
    For testing purposes I use Firefox's built in "Responsive Design Mode" tool and
    it displays the image correctly in both both viewpoints.

    As a test, download one of the photos to your mobile device and see how it renders
    in both viewpoints.

    Let me know the result of your testing.

    coothead
    ~ the original bald headed old fart ~

  5. #5
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,243
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default

    When downloaded to my phone it’s fine.
    When I look at the same photo on the site in landscape mode you only see say 3/4 of the photo.
    The 1/4 you don’t see is off the bottom of the screen.
    Hence a code to check what screen is used then show 100% of the photo accordingly

  6. #6
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,243
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default

    Tomorrow I will browse one of my pages to locate it and also use.
    Just had a brainwave.

  7. #7
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,243
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default

    Morning,
    Yes i agree.
    Last night i was reading & now applied some css media queries to the bottom of my css "gallery1.css"

    When looking on a mobile device it doesnt scale correctly, looking at it in landscape it looks fine BUT when in portrait the image is off the screen.
    Please can you look at my css file & see what ive done wrong.

    I applied the css for .modal-image but maybe that was incorrect or just the css in incorrect.

    Many thanks if you can take a look & i can test.

    Have a nice day

  8. #8
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,243
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default

    Just an update.

    The css i applied i wrote it like below,
    Code:
    .modal-image
    But using the following i now see a difference.
    Code:
    #modal-image
    The "." didnt have any action BUT when "#" was used it now has.

    Please take a look to if if anything i missed there.
    Thanks

  9. #9
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,272
    Thanks
    3
    Thanked 284 Times in 277 Posts

    Default

    Hi there theremotedr,

    it is impossible to code for all the mobile and other devices and silly to try.
    And I would not worry about laptops and desktops. Users are perfecty able
    to manually resize windows to suit the content.

    By all means code for your personal choice of mobile or other devices.

    Let's asume that you are using "iPhone 5" or "iPhone 6" then this would be
    myfinal CSS for the project....
    Code:
    /****************** modal window ******************/
    
    #modal {
        position: fixed; 
        z-index: 999;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background: linear-gradient( to bottom, #666, #000 );
        text-align: center;
     }
    #modal-image, 
    #modal video {
        width: 60%;
        height: auto;
        margin: 1em auto;
        border: 1px solid #fff;
        border-radius: 0.75em;
     }
    #closure {
        padding: 0.5em 2em;
        margin-top:1em;
        border-radius: 1em;
        font-size: 1em;
        cursor: pointer;
     }
    .hide{
        display: none;
     }
     
     #modal video {
        display:block;
        border-radius: 0;
     }
    
    
    /************** For iPhone 5 and 6  **************/
    @media (width: 568px) and (height: 320px),
           (width: 667px) and (height: 375px) {
    #modal-image, 
    #modal video {
      height: 70%;
      width: auto;
      }
     }
    
    @media (width: 320px) and (height: 568px),
    (width: 375px) and (height: 667px) {
    #modal-image, 
    #modal video {
      height:auto;
      width: 90%;
      }
     }
     /*******************************************/
    
     /***************************************************/
    My tests using Firefox's "Responsive Design Mode" showed reasonable results
    in all of the 17 devices that I had set.

    coothead
    ~ the original bald headed old fart ~

Similar Threads

  1. Replies: 6
    Last Post: 05-25-2016, 11:58 AM
  2. Need advice: designing a webpage background
    By marrkedee in forum Graphics
    Replies: 2
    Last Post: 09-12-2013, 04:52 PM
  3. Replies: 2
    Last Post: 06-24-2010, 05:59 PM
  4. Need an advice!
    By biochimistu in forum JavaScript
    Replies: 1
    Last Post: 05-22-2007, 08:39 PM
  5. Anyone have any advice?
    By diamondkilo in forum Looking for such a script or service
    Replies: 2
    Last Post: 05-04-2007, 11:53 AM

Bookmarks

Posting Permissions

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