Unable to get smooth transition

Mobile
21

Are we still talking about his page ? If so which images are disappearing as they seem to be here as far as I can tell.

This image is pointless! Not only have you made it hard to use responsively you have increased the size of the image file in order to show a smaller image!! Just include the large image and then you can scale it smaller in the browser which will be fine for your needs and save on bandwidth.

Only use a sprite when there are different images altogether of a fixed height and width (and usually only for icons and small images not great big images like that).

Never use zoom as that is proprietary (invalid) IE (and -webkit) code used for effects but never really for normal content. What you should actually be doing (as I have said before) is to have a real image in the html because these images are important to the content - they are not decoration or backgrounds. Once you have the images in the content then you can simply do img (width:100%;height:auto} and they will scale to fit their container at every size you require. It is possible to scale background images with background-size:cover but not for sprites.

Regarding the page I linked to above you still haven’t added the clear statements that I mentioned in my previous post and as a result the display is still badly broken at smaller sizes with text all over the place.

Responsive design is not that hard but it needs to be logical and the simpler you keep things the better. It may be that you will need to tweak your html a little to get better results (some extra wrappers and proper images as I mentioned before) but these would ony be minor changes and take a few minutes for that one page.

I realize that you have hundreds of pages but I can only suggest what I think best :smile:

22

Hi

The page in question is http://pintotours.net/Work/2test.html

I spent months doing these sprites… and there are so many, It is just not possible to change them all at this stage. Is there a way round this?

I have! I guess you mean I should do it in the whole page and not only in the media queries?

[quote=“PaulOB, post:21, topic:110749”]
Just include the large image and then you can scale it smaller in the browser [/quote]

Can i do that with css?

23

Not really 'm afraid. It was a bad decision that has come back to haunt you. The only thing you can do is scale the width.

Assuming you have images set up roughly like this then you ca scale the width smaller.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.img {
    width:510px;
    max-width:510px;/* media query will use this*/
    height:370px;
    margin:20px;
    background:url(http://pintotours.net/Americas/DomRepublic/images/RealRoomSp.jpg) no-repeat 0 -180px;
}
.img2 {
    width:250px;
    max-width:250px;/* media query will use this*/
    height:180px;
    margin:20px;
    background:url(http://pintotours.net/Americas/DomRepublic/images/RealRoomSp.jpg) no-repeat 0 0;
}
.imgwrap {text-align:center;}
.scale {
    display:inline-block;
    vertical-align:middle;
}
@media screen and (max-width:600px) {
    .scale {
        width:90%
    }
}
</style>
</head>

<body>
<div class="imgwrap">
        <div class="img scale"></div>
        <div class="img2 scale"></div>
</div>
<p>following content</p>
</body>
</html>

The image is at the normal size but when the window is smaller than the image we just shorten the width but leave the height the same. This assumes that your sprites are stacked vertically and that you have sized them with background-position as in my example. It’s not perfect but doesn’t look too bad.

24

Hi paul

Like a lot of code in my site I had it given to me. The sprites from what i can understand are handled by a script and js is a big mystery for me…

I’ll be working on the code you dent me to see if it works.

Regarding the clear:both. Am I supposed to apply to throughout the file or only in the media queries?

UPDATE

I’ve just realized that the clear:both; makes more sense if applied to the html. I put it in the css media queries. Could you confirm which, please?

Sorry…

25

Yes the clear:both rules go in the main stylesheet as they will make the structure correct to start with. The only reason you don’t see a problem at large sizes is that there isn’t enough room for it to go wrong :smile:

26

Hi

Well. the results were not quite what I need. I’ve decided to start afresh on a brand new page to minimize the problems I have at the moment. No doubt, I will be back for help…

Many thanks for your interest.

Regards

27

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.