Results 1 to 5 of 5

Thread: Responsive landscape image

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

    Default Responsive landscape image

    Hi,
    Here is a page as example http://www.theremotedoctor.co.uk/kar...llto=selection

    As you will see there are 4 images,last one being Situated in Weston mare.
    I'm happy with the view on PC iPhone etc & iPad in Portrait but when looking in Landscape view you have 3 images in one row then below you have the last image.
    I'm trying to get it to show the 4 images in one row.
    I've tried the following but no change was seen.
    Code:
    max-width:100%;
     height:auto;
    To be honest I've been using chrome f12 a lot more now rather than the Firefox f12 but finding my way around the media code section isn't going down well as I've nothing to check on the PC screen.

  2. #2
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    482
    Thanks
    0
    Thanked 61 Times in 57 Posts

    Default

    It looks fine here in Opera.

    Click image for larger version. 

Name:	ScreenDumpTrd20160302.jpg 
Views:	64 
Size:	60.7 KB 
ID:	5834

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

    Default

    Hmmm,
    Learning this is one thing but then media queries for this screen size and that screen size is another.
    Is the code I supplied correct/in the right place ?

    My iPad is exactly the same view as the PC apart from these post issue.
    Obviously portrait view is different but ok.

    This is why I think the code is incorrect or in the wrong place.

  4. #4
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,067
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

    Ive had a look again but cant see whats causing it to be on 2 rows ?
    Here is a screen shot which shows the issue.

    Click image for larger version. 

Name:	1357.jpg 
Views:	60 
Size:	57.3 KB 
ID:	5835

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

    Default

    Here is an update but not fully satisfied.
    I could not find the answer to why the 4 images would not fit on the one line when using the code
    Code:
    max-width:100%;
     height:auto;
    So looking at the original size of the image I could see they were W287 X H92
    So I decided that each page that required 4 images in a row would have its image width changed from 287 to 243 thus leaving the height untouched at 92
    Uploaded and these pages now have 4 images in a row BUT I see the height has been altered and now aren't the size that they should be.
    So I think the codes height auto property has kicked in and altered this.
    That's great but doesn't answer why the max width code does nothing.

    Look here for original image 287 X 92 three in a row
    http://www.theremotedoctor.co.uk/fac...llto=selection

    Look here for edited width image four in a row but auto code changing its height
    http://www.theremotedoctor.co.uk/acc...llto=selection

    My aim is to put the width back to 287 and let a working code alter it.

Similar Threads

  1. Image Trail Script Responsive Image
    By jundo12 in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 01-20-2016, 12:47 AM
  2. responsive image grid?
    By mlegg in forum CSS
    Replies: 8
    Last Post: 09-24-2014, 04:57 PM
  3. 3D landscape creation
    By kprojects in forum Java
    Replies: 1
    Last Post: 08-26-2008, 04:46 PM
  4. Replies: 0
    Last Post: 07-28-2008, 09:33 AM
  5. Bottum for print landscape
    By vapeur in forum JavaScript
    Replies: 1
    Last Post: 07-22-2006, 02:30 PM

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
  •