Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: Responsive code for web page

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

    Default Responsive code for web page

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

    I understand what responsive code does etc but trying to put it down on paper for it to work is another thing.

    I Have 2 background images.
    One is for pc "main middle image & text either side" & the other for mobile devices "just main image"

    Im trying to get the mobile version to work correctly as at present i see the pc background & nothing will scroll etc.

    If i change the 768px in the code below to 1366 the background image is corrected

    Code:
    @media (max-width:768px){
    .container > div:nth-of-type(1) {
      background-image: url(https://theremotedoctor.co.uk/bike-gallery/backgroundmobile.jpg);
    Now im stuck with how to reduce what you see on the page so it can work like it should.

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

    Default

    I think i might now have done it by using the below.

    Code:
    @media (max-width:1366px){
    .container > div:nth-of-type(1) {
      background-image: url(https://theremotedoctor.co.uk/bike-gallery/backgroundmobile.jpg);
      width: 70%;
      margin:auto;
    }
    Please see screen shot as ive now seen an issue with back ground image.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	4155.jpg 
Views:	15 
Size:	92.6 KB 
ID:	6540  

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

    Default

    I have made no progress in this at all after spending hours on it.
    I attach 2 screenshots.
    When i apply some code & check it in Firefox using the dev tool i see how it should be like & its correct.
    However when i look at it on the ipad i see the second screenshot where majority of the page is missing.

    Thus ipad view doesnt show what i see on pc using dev tool.

    Ive only even been able to see the thumbs & nothing else.
    Any advice please as to why

    I had created some jpg files for the background of plain red & plain green.
    This was the only thing i could see that would change
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	4158.jpg 
Views:	18 
Size:	98.0 KB 
ID:	6541   Click image for larger version. 

Name:	4159.jpg 
Views:	36 
Size:	48.3 KB 
ID:	6542  

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

    Default

    Hi there theremotedr,

    I cannot see any need for this...
    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;
    }
    ...or this...
    Code:
    <meta https-equiv="X-UA-Compatible" content="IE=edge">
    I do not have an iPad, so can only test for it in Firefox's Responsive Design Mode

    Check out the attachment to see my take on the page.

    coothead
    Attached Files Attached Files
    ~ 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

    Hi,
    I have used your files as supplied above but the result is the same.

    I also use Firefox design tools f12 in browser & it shows it as being correct.
    However the page on the actual ipad isnt as Firefox.

    What i see on the ipad is the screen shot supplied.Click image for larger version. 

Name:	4159.jpg 
Views:	19 
Size:	48.3 KB 
ID:	6544

    What you see are the thumbnails
    The issues.

    There is NO main image at all.
    If i click on a thumbnail nothing at all happens.
    I can see "just about" the next / previous arrows but also touching these nothing happens.

    Basically all i see is as the screenshot supplied & thats it.

    Also you are using an old file as some changes were made but lets get this sorted if we can

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

    Default

    The reason behind that css was i use 2 different background images.
    1 for Pc & 1 for mobile.

    The pc image is to big for mobile hence why i use the code so i can use a different image.
    It works well for me.

    The old files you have will not show this though

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

    Default

    Hi there theremotedr,

    have you actually tested the page thaI I sent you in Responsive Design Mode?

    This has nothing to do with function key F12.

    You can find it here...

    Tools >Browser Tools>Responsive Mode

    ...or by using Ctrl + Shift + M

    1080x810

    Click image for larger version. 

Name:	iPad-1080x810.jpg 
Views:	15 
Size:	94.3 KB 
ID:	6545

    810x1080

    Click image for larger version. 

Name:	iPad-810x1080.jpg 
Views:	13 
Size:	94.6 KB 
ID:	6546

    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

    Hi,
    Yes i have.
    I use F12 then select the responsive icon.
    What you have advised is a shortcut BUT both end up in the same place.

    As mentioned in post #5 what you see in responsive mode isnt what actually happens on the ipad.

    I supplied a screen shot of what is shown on the ipad.

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

    Default

    Quote Originally Posted by theremotedr View Post
    I supplied a screen shot of what is shown on the ipad.

    That screen shot is neither 1080x810 nor 810x1080.

    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.

    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

    I made it smaller so it wouldnt be huge on this page.

    Doing a quick search on google for "media query not working on ipad" there seems to be a few.
    Looks like a known issue

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
  •