Page 1 of 6 123 ... LastLast
Results 1 to 10 of 56

Thread: Css advice for spacing between images

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

    Default Css advice for spacing between images

    Morning,
    Here is the page https://www.theremotedoctor.co.uk/bikegallery.html

    Please can you advise what css controls this on my page.
    Im unable to find it using the dev tool so maybe i need to add something ?
    Thanks
    See screenshot for example please
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	4175.jpg 
Views:	26 
Size:	95.3 KB 
ID:	6547  

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,309
    Thanks
    4
    Thanked 286 Times in 279 Posts

    Default

    Hi there theremotedr,

    seek, and ye shall find...
    Code:
    /* SIX COLUMNS SIDE BY SIDE & SPACE BETWEEN EACH IMAGE ROW */
    .column {
       width: 16.66%;
       margin-bottom: 0.8em; 
    }

    coothead
    ~ the original bald headed old fart ~

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

    Default

    With my learning issues trying HTML css & this dev tool is a real leaner for me.

    Sometimes I click something and everything that it applies to changes yellow.
    I’m trying to remember all these little tools.

    Many thanks.

    Asking on the iPad forum screenshots sent back to me are fine.
    So my iPad operation system doesn’t like to code so time to spend some

  4. #4
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,309
    Thanks
    4
    Thanked 286 Times in 279 Posts

    Default

    Hi there theremotedr,

    I checked out your thread here...

    iPad 3 issues with rendering HTML & css

    I don't know what help you actually got, but before you start splashing
    out on new iPad have a think about this...

    It seems that iPad uses the Safari browser and did not fully support
    sticky until September 2019...

    Can I use sticky ?

    ...but you may find that the -webkit- prefix may work on you old iPad...

    Code:
    .container > div:nth-of-type(1) {
      /* BEHIND MAIN 640 x 480 image */
      position: sticky;
      -webkit-position: sticky;
      top: 0;
      background-image: url(https://theremotedoctor.co.uk/bike-gallery/background.png);
      background-attachment: fixed;
    }
    Also note that it might be prudent to check out other modern CSS
    properties to see if they also require the -webkit- prefix treatment.

    coothead
    ~ the original bald headed old fart ~

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

    Default

    Thanks for the follow up.
    Ive just applied that code but still the same.

    Thanks

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

    Default

    A member private messaged me with screen shots from 2 different iPads that he owns.

    Both were how it should be.
    I have reset my iPad back to factory settings but the same.
    So I’ve ordered another for which I now know it works on.

    Many thanks.

  7. #7
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,309
    Thanks
    4
    Thanked 286 Times in 279 Posts

    Default

    Quote Originally Posted by theremotedr View Post
    Thanks for the follow up.
    Ive just applied that code but still the same.

    Thanks

    Did you do a Ctrl+F5 page refesh or whatever the iPad equivalent is?

    How do you do a F5 page refresh on an iPad

    coothead
    ~ the original bald headed old fart ~

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

    Default

    Yes.
    Cleared cache & cookies.

    Also factory reset and tried it but same result.

  9. #9
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,309
    Thanks
    4
    Thanked 286 Times in 279 Posts

    Default

    Hi there therremotedr,


    I am very sorry, but I made an error with -webkit-position: sticky
    It should be position: -webkit-sticky

    A further search on caniuse showed another old iPad problem...

    Can i use display:flex

    So before you part with you hard earned cash do try putting-webkit- prefixes here...

    Code:
    .container > div:nth-of-type(1) {
      /* BEHIND MAIN 640 x 480 image */
      position: sticky;
      position: -webkit-sticky;
      top: 0;
      background-image: url(https://theremotedoctor.co.uk/bike-gallery/background.png);
      background-attachment: fixed;
    }
    ...and...
    Code:
    .row{
      display: -webkit-flex;
      flex-direction: -webkit-row;
      flex-wrap: -webkit-wrap;
      justify-content: -webkit-space-around;
    }

    coothead
    ~ the original bald headed old fart ~

  10. #10
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,261
    Thanks
    165
    Thanked 3 Times in 3 Posts

    Default

    Hi,
    First code made no difference.

    Display flex made all the thumbs minute & straight across the page.
    So ive put this back how it was before which shows many rows

Similar Threads

  1. Advice to put space between images
    By theremotedr in forum CSS
    Replies: 6
    Last Post: 07-23-2022, 05:26 PM
  2. Replies: 6
    Last Post: 03-29-2012, 03:16 PM
  3. Lightbox waits until all images are loaded to work. Advice?
    By AHalsey in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 11-11-2010, 05:34 PM
  4. Resolved Odd spacing in FF?
    By bassa in forum CSS
    Replies: 6
    Last Post: 04-09-2009, 02:46 PM
  5. Replies: 1
    Last Post: 09-02-2008, 01:17 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
  •