Hi
I managed (with help from my friends…) to get a number of pages like http://pintotours.net/Europe/Spain/airportBcn.html
to shrink smoothly to fit most devices.
I tried to do the same with pages that are not too dissimilar http://pintotours.net/Americas/DomRepublic/ParaPalma.html
but can’t replicate the process, starting with excessive background on both sides as it shrinks.
Can you help, please?
Many thanks.
You should look again because those pages don’t scale smaller.
Just close the browser window width and the content overlaps the background at the bottom of the div. This is due to your continued insistence in applying fixed heights to your content. I have mentioned this possibly more than 10 times now and adding heights to fixed content is the number one design mistake and you never want to do it.
I won’t mention it again but it has been the cause of your problems since day 1 and is now compounded by the fact that you now dynamically apply the height with an inline style.
<div id="inside" class="box" style="height: 3395px;">
If you are going to do that then you would need to do it on browser resize which will make the browser very sluggish indeed and not recommended. I have previously given solutions for equal columns without using js or fixed heights and it is those methods you should be using.
Can you clarify what you mean by excessive backgrounds as I was a little unsure what problem I was looking at.?
You seemed to have made the layout narrower but have used fixed widths at the smaller sizes which means you have to keep doing that to make it fit when you would be better off having no width and just letting the content fill the window on the smaller screens.
Responsive web design is easiest when its fluid and adapts to different widths rather than a series of fixed widths that you have to micro manage. I’m not saying you can’t do it with fixed widths but the result is rarely pleasing or easily managed.
Hi Paul
Points taken, but after nearly two years of coding blindly with patches here and there from “my friends” I now have nearly 300 pages and it is not easy to stop and recode everything. But I’m learning…
Now, when you open http://pintotours.net/Americas/DomRepublic/ParaPalma.html directly from the address bar and start narrowing the PC screen, once the first (and following) media query kicks in the box holdong the content does not expand and use the full width, leaving a lot of the green background on both sides.
I expect after reading your response that the answe is in % rather than fixed widths. Is that it?
Many thnks
Yes, or even better, no width at all. That container box could have a max-width set (say 1000px) and then it’ll automatically take up as much space as it can while restricting itself to a limit.
Obviously you’ll need to make sure the contents don’t exceed 1000px (thus make them percentages to ensure it doesn’t overreach 100%) and boom; responsive.
Add in media queries to make stuff look differently or if you need something done for mobile only.
Hi, thanks
I have media queries but can’t make them to behave smoothly…
I’ve copied the file to http://pintotours.net/Work/1test.html and turned the widths into % but it’s all gone wrong, even worse. It’s getting late here and I guess the brain is slowying down, as it looiks that I made some very, very sully mistake!
Hi,
Based on this page I would start with media queries like this.
@media screen and (max-width:1002px) {
#inside {
width:auto!important
}
.notes {
clear:both
}
.div1, .div2, .div3 {
float:none;
display:inline-block;
width:31%;
min-width:190px;
}
.div1 ul, .div2 ul, .div3 ul {
width:auto
}
#container {
height:auto;
overflow:hidden;
text-align:center;
}
#one, #two, #three, #four {
float:none;
}
}
@media screen and (max-width:680px) {
.div1, .div2, .div3 {
width:48%
}
}
@media screen and (max-width:450px) {
.div1, .div2, .div3 {
display:block;
width:auto
}
.ad img {
max-width:100%;
height:auto
}
}
Just add those rules at the end of the css as they are over-rides to your existing css. You should see that the page scales much better with those rules in place. There are still some tweaks to do such as removing those side columns earlier before the scrollbar appears and wrapping some of those elements in a container elements so that you can control them more easily (div1,div2,div3 especially).
Try not to use names like div1 div2 div3 as that is no help in identifying the elements. Use meaningful names like .facilities or something like that.
If you install the css terminal bookmarklet you can just add the rules I gave you into the bookmarklet code box in the browser and see what effect they have on your live site before you start changing the code. It’s an easy way to test out changing rules on the fly before you actually change any of the real code.
Thanks Paul
I’ve pasted the code into a copy of the file and it can be seen in http://pintotours.net/Work/1test.html
The first goal has been achieved inasfar as the excessive sideways background has gone. The problem now is that the images and the 3 tick boxes are not changing as they should.
many thanks again for your help.
They look perfect to me.
The images and the tick boxes all re-align according to the available space quite nicely.
Obviously there comes a point where three tick boxes will not fit across the screen so you go to 2 tick boxes horizontal with one with one below which makes best use of screen size. You could make it just one tick box in the middle (as it does when the screen gets smaller) but I don’t think that’s such a good option.
Responsive design is about the display being responsive and some times you just have to let it flow and not try to micro manage every pixel at every pixel.
The code I gave you is a starting point and you could tweak better but it already looks perfect to me.
The images are also fine and go from 4 across to 3 across to two across to one across depending on the screen width. You could if you want scale the images smaller instead so that they stay 4 across but that would result in quite small images at some screen sizes. Or you could scale them smaller for a bit and then go to 2 across instead of 3 and one but you would need a little more html to do that as each pair of images would need to be in a div so that you could break them in pairs.
e.g. Or scale them like this:
@media screen and (max-width:1002px){
#one,#two,#three,#four{
width:22%;
padding:20% 0 0;
height:0;
}
}
@media screen and (max-width:800px){
#one,#two,#three,#four{
width:48%;
padding:36% 0 0;
background-size:cover;
}
}
The three tick boxes could be contained in a div with text-align:center applied and that would keep the boxes always centred (set text-align:left on each individual box).
These are all minor tweaks that you can experiment with but you should not really worry about the odd transition where an element drops as that is the nature of fluid design.
Hi Paul
In my currently published pages (see http://pintotours.net/Americas/DomRepublic/ParaPalma.html ) the imageas and tick boxes remain 2x2 and 3 x1 until the media queries kick in and then they go straight into vertical mode alltogether. I would like to keep them that way. The main problem was the excess background on the sides that you solved but I need to maintain the images and boxes as they are currently. If the current code does that, can’t we just get rid of the sides?
remove UPDATE as no real update…
Again you are fighting things instead of letting go.
You can tweak as much as you like though so most things are possible.
e.g.
play around with something like this:
@media screen and (max-width:1002px){
#one,#two,#three,#four{
width:34%;
padding:22% 0 0;
height:0;
}
}
@media screen and (max-width:800px){
#one,#two,#three,#four{
width:48%;
padding:36% 0 0;
}
}
@media screen and (max-width:680px){
.div1,.div2,.div3{width:51%;margin;auto;display:block}
}
@media screen and (max-width:480px){
.div1,.div2,.div3{width:90%}
}
You don;t have to make them fluid if you don;t want just fix the width as required but I prefer the fluid version which is why I keep offering it
Thanks
I will play with that code.
Shout if you get stuck
It’s all just a matter of tweaking here and there to suit the design you want.
Hi Paul
http://pintotours.net/Work/1test.html
It goes the opposite way og what i want. I need the images to remain as large as possible, as long as possible.
Ifg I concentrate first on the images only, I could get them to stay 2x2 a bit longer if I free the space on either side. But at 690px they are forced into the vertical mode. I’ve played with the width of the .box, with no padding or margin but can’t see what’s holding it.
Hi,
If you enlarge the images at the first break point then they will stay at two across until they need to break down to one column (otherwise they will go three across when you remove the side columns and increase the space available to them).
e.g.
@media screen and (max-width:1002px) {
#one, #two, #three, #four {
width:275px;
height:180px;
background-size:cover;
}
}
Hi Paul
I’m not with you… I want to keep the images 2 x 2 for as along as possible, only breaking into vertical mode when it becomes phisically impossible due to their width, whch has to be maintained.
The boxes (that later) can be reduced (if possible) but not the image sprites.
i applied the code you’ve just given me and it turned the images into verttical mode much too early.
Sorry…
The code I gave you did just that. It keeps the images 2 across until there is no room and then goes to one column. The problem is that your page keeps changing so I guess we are cross posting at times.
I am testing by injecting the code I give you into your site so I know it has been working at each stage but it maybe that you subsequently changed it. I can see now that it is not behaving in the way that I originally saw.
There is also the fact that we may bith be expecting slightly different things to happen 
It’s late now but I’ll have another look tomorrow and maybe create a test page also if I have time
Hi Paul
Don’t worry about that page. I’ve had a change of mind (nothing new…) and attempted to do something a bit different. It is not perfect but it will do for the time being:
http://pintotours.net/Work/2test.html
If you can think of any easy improvements, please, let me know.
Unfortunately, I don’t have access to tablets and I am not sure if the page displays properly, and well centered.
Many thanks for your interest and help-
Hi,
You seem to be making progress now and as I said before it is a matter of tweaking here and there and seeing what happens. If you plan logically you can accommodate most things.
You need to add clear:both to .notes (it was in the code I gave you) otherwise the text will rise up alongside the tick columns and sit at the top right when the layout is at certain widths. Always remember than any static content that starts after floats should be set to clear:both otherwise as soon as there is a gap it will sneak up the side of the float. (The same issue applies to .text2)
I wouldn’t have floated those tick boxes anyway but as in my example used display:inline-block instead and then you can center those tick columns by putting text-align:center on the parent. That means that when they wrap they will remain centred without any work needed.
You don’t really need a tablet to check the general layout. Just grab the browser window’s edge and make the width smaller and smaller. You need to make sure your layout looks good over the whole range and then it will automatically fit all devices.
hi Paul
In fact., having just finished celebrating my success with thepage, the narrower screen media queries have brought up a problem and I’m not too sure why.
It worked fine before I started adding some stuff from the original page, and the images disappeared from 620 downwards!
Any chance you could have a look to find out why, please?
Thanks
UPDATE
It appears that the problem stems from the following line in the css that was introduced to differentiate among several
<span>
.div1 span,.div2 span,.div3 span {
Now, I’m stuck as I don’t understand why this affects only media queries below 620
NEW UPDATE
The problem is connected to the size of the images (250px wide). I tried zoom:90% in #container { and it works beutifully in IE9. The problem is that zoom does not work across all browsers. So How can I reduce the size of the images (which are a 2 size-sprite)?