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

Thread: @media advice please

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

    Default @media advice please

    I have an issue with the centering of my photo on most mobile devices.
    The photo is not centered to the screen but its more to the right.
    Here is a screen which is mostly the same for many devices.

    Please could you advise how i correct this within the @media code then i can continue with the others.

    Thanks.

    http://www.theatticbanwell.co.uk/index.html
    The problem is shown once an image is loaded

    Click image for larger version. 

Name:	css.jpg 
Views:	84 
Size:	11.4 KB 
ID:	6242
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	g.jpg 
Views:	58 
Size:	5.6 KB 
ID:	6241  

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

    Default

    Is there any advice please.


    Thanks

  3. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,804
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    54

    Default

    Hello Remote Doctor,
    Not only is the position of the image not right, its size too is incorrect. On smaller windows, the text is not fully shown.
    Unfortunately, I can't immediately see from the code on your page how you have sized the image, so let me just make some general remarks about creating responsive images. I will be using your image.
    1. Always start with creating a container div for the image. Give the div a class name (see below), a position (fixed, absolute or relative), a percentage width, and a height (percentages for the width must be preferred, pixels for the height are okay). If you want to center the div, give it also margin: auto. If, in the case of a div that must be centered, you have chosen position: fixed or position: absolute, make the width for the div 100% or choose another percentage (for. ex 70%) and then add: left: 15% (100%-minus-70% divided by 2).
    2. Put another div inside the container div and give it width: 100%, height: 100% and margin: auto (for centering). Also give this div a certain max-width because, depending on what image you use, it might extend too much to the left and the right, which would automatically make the image too 'short'.
    Adding a background image for the div inside the container div is done by something like:
    Code:
    background-image: url(http://www.theatticbanwell.co.uk/images/fulls/welcome-to-the-attic.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center
    (Other values for background-size and background-position are possible, but that's perhaps not relevant here).
    3. Here's a possible application of the above lines:
    Code:
    <div class="responsive_img" style="position: relative; width: 70%; height: 400px; margin: auto">
    <div style="width: 100%; height: 100%; max-width: 600px; margin: auto; background-image: url(http://www.theatticbanwell.co.uk/images/fulls/welcome-to-the-attic.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center">
    </div>
    </div>
    The need for a maximum width for our image (max-width: 600px) becomes immediately obvious when we omit the maximum width. Try it: the image will be too big on wide screens, as a result of which parts of it will not be visible any more.
    4. Finally @media screen code is required to solve possible problems that still may occur at certain window sizes. When we resize the window until it is less than 500px wide, the text on your image is not entirely visible anymore. We can solve this problem by stipulating that the image must be 100% wide at less than 500px:
    Code:
    @media screen and (max-width: 500px) {.responsive_img {width: 100%!important; }}
    In fact, it turns out that this does not do the job for windows that are still smaller, so we also make the image shorter (the shorter the image, the more 'it shows':
    Code:
    @media screen and (max-width: 500px) {.responsive_img {width: 100%!important; height:350px!important}}
    Note that the keyword !important is not needed if we replace all inline styles with a style sheet while making sure that the @media screen code is below the other css, like this:
    Code:
    <head>
    
    <style>
    .responsive_img {position: relative; width: 70%; height: 400px; margin: auto}
    .responsive_img_inner {width: 100%; height: 100%; max-width: 600px; margin: auto; background-image: url(http://www.theatticbanwell.co.uk/images/fulls/welcome-to-the-attic.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center}
    
    @media screen and (max-width: 500px) {.responsive_img {width: 100%; height:350px}} </style>
    
    </head>
    
    <body>
    <div class="responsive_img" >
    <div class="responsive_img_inner" >
    </div>
    </div>
    </body>
    I hope this helps.

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

    Default

    Hi,
    Ive added the following to the main css which seems to have solved the issue for the image.
    Code:
    background-size: contain;
    I have noticed the following in respect of the text but cant see why its word warping etc.
    If you click the thumbnail top right you will see when loaded the following,on a pc.

    CHEST OF DRAWERS £150
    H 112cm W 115cm D50cm
    This is fine BUT when i check on a mobile i see the following,

    CHEST OF DRAWERS
    £150
    H 112cm W 115cm D
    50cm

    Many thanks for your reply

  5. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,804
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    54

    Default

    background-size: contain; hasn't solved the problem because at 980px or less the text on the image gets cut off. Please read carefully what I wrote in post #3.

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

    Default

    Thanks,
    I have learning difficulties & trying to take on board / where to put it / delete existing code is too much for me.
    I am reading it through again but so far dont understand.

    Do you get that feeling you wish you never started it.

    Thanks

  7. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,804
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    54

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

    Default

    I appreciate your time spent so far.
    I have attached the files if you assist a little further please.

    I am trying what i think is correct but when it looks like a patchwork quilt i then know it wasnt in the correct place.
    Once i get this sorted i can continue with other tasks which i find easier but these things take me so long to acheive.

    Many Thanks.
    I understand if you cant/wont help further.index.zip
    Attached Files Attached Files

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

    Default

    Please could you take a look at the site now and advise where i went wrong.

  10. #10
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,804
    Thanks
    48
    Thanked 237 Times in 230 Posts
    Blog Entries
    54

    Default

    I'm so sorry, but I can't help you any further. This would require me to go over all your code instead of trying to solve a local problem. Good luck.

Similar Threads

  1. Media Query advice for ipad 1
    By theremotedr in forum CSS
    Replies: 14
    Last Post: 04-01-2016, 06:36 PM
  2. Media Query Help!
    By LeaChristine in forum CSS
    Replies: 1
    Last Post: 11-22-2014, 11:26 AM
  3. Social media
    By molendijk in forum The lounge
    Replies: 5
    Last Post: 11-11-2013, 05:23 AM
  4. Media RSS Script
    By dazbobaby in forum Looking for such a script or service
    Replies: 3
    Last Post: 02-13-2009, 12:33 AM
  5. Media files
    By southga1974 in forum Other
    Replies: 1
    Last Post: 06-13-2006, 01:12 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
  •