Printable View
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
Attachment 6242
Is there any advice please.
Thanks
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:
(Other values for background-size and background-position are possible, but that's perhaps not relevant here).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
3. Here's a possible application of the above lines:
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.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>
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:
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; }}
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:@media screen and (max-width: 500px) {.responsive_img {width: 100%!important; height:350px!important}}
I hope this helps.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>
Hi,
Ive added the following to the main css which seems to have solved the issue for the image.
I have noticed the following in respect of the text but cant see why its word warping etc.Code:background-size: contain;
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
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.
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
I'm sorry to hear about your learning condition.
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.Attachment 6243
Please could you take a look at the site now and advise where i went wrong.
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.