Page 2 of 2 FirstFirst 12
Results 11 to 18 of 18

Thread: Responsive code for web page

  1. #11
    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
    Doing a quick search on google for "media query not working on ipad" there seems to be a few.

    There is absolutely no media query coding in the CSS that I used for my example.

    I removed all the nonsense that you had inserted.

    See the validation...

    Sorry! We found the following errors (4)

    coothead
    ~ the original bald headed old fart ~

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

    Default

    Well that’s strange.

    Tomorrow I will revert back to your files & go with them.

    Can you advise what changes you made or was it just an old out of date file you used ?
    I ask as I see some differences.

  3. #13
    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 used the HTML file that you had in your link.

    I replaced this jpg image of yours...



    ...wifh this transparent gif that I made...



    This creates one sky instead of two for your initial page.

    I removed the border from this image by giving it an id...

    Code:
      <div class="mySlides">
        <div class="description">FRIENDLY SERVICE AT MY PLACE OR YOURS</div>
        <img id="plain" src="bike-gallery/splash-2.gif" alt="The Remote Doctor Motorcycle Keys In North Somerset">
      </div>
    ...and adding this...

    Code:
    #plain {
        border: none;
        box-shadow: none;   
      }
    ...to the CSS file.

    As mentioned earlier I removed this unnecessary code...

    Code:
    @media (max-width:1366px){
    .container > div:nth-of-type(1) {
      background-image: url(https://theremotedoctor.co.uk/bike-gallery/backgroundmobile.jpg);
      width: 100%;
      margin:auto;
    }
    
    
    /* Landscape */
    @media only screen 
      and (min-device-width: 375px) 
      and (max-device-width: 667px) 
      and (-webkit-min-device-pixel-ratio: 2)
      and (orientation: landscape) { 
      
    .mySlides img {
       display: block;
       width: 70%;
       max-width:640px;
       height: 250px;
       margin: auto;
       border: 1px solid #FF0000;
       box-shadow: 4px 4px 8px #000;
    }
    ...from the CSS file.

    coothead
    ~ the original bald headed old fart ~

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

    Default

    Morning,
    Ive now changed it to your advised code.

    Still the ipad is the same which is a pain.

  5. #15
    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
    Still the ipad is the same which is a pain.

    Quote Originally Posted by coothead
    Perhaps you should seek out a iPad forum that can help you with
    the way that it incorrectly renders HTML and CSS pages that work
    perfectly well on Windows and Linux operating systems.
    Perhaps this one...



    ...might be able to shed some light on iPad's annoying anomaly.

    coothead
    Last edited by coothead; 08-02-2022 at 01:30 PM.
    ~ the original bald headed old fart ~

  6. #16
    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 forgot to mention that it took me almost an hour to track
    down the font that was used in the image. My guess was
    that you had used a Google font.

    Luckily for me, I had created a web page some while ago that
    was a great help in my search...

    the complete google font collection

    Of course, I had to start at "A" and then work my way through
    the alphbet until I arrived at "P" for "Playball".

    coothead
    ~ the original bald headed old fart ~

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

    Default

    Hi,
    Ive joined that group & will await some advice thanks.
    The font thats was used is in the Photoshop library

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

    Default

    Whilst having a look around ive noticed the following.

    Css line 57 "current css in use"
    Code:
    /* HIDE THE IMAGES BY DEFAULT */
    .mySlides {
       display: block;
    Changing none to block now shows the image that was missing BUT all the thumbs are shown directly below it then down the page.

    Looking on the pc no change is seen.
    Also use F12 dev tool no change was seen.

    BUT like before there now is a change on the ipad

Similar Threads

  1. Resolved Form not responsive to page
    By theremotedr in forum CSS
    Replies: 59
    Last Post: 02-15-2017, 01:31 PM
  2. Resolved Could you assist with a responsive code please.
    By theremotedr in forum CSS
    Replies: 21
    Last Post: 12-22-2015, 05:32 PM
  3. Replies: 4
    Last Post: 08-12-2015, 02:11 AM
  4. code for links on buttons and text on one page linking to selection on portfolio page
    By mr108 in forum Looking for such a script or service
    Replies: 2
    Last Post: 08-08-2013, 09:40 AM
  5. Replies: 15
    Last Post: 06-11-2009, 12:27 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
  •