Centering things for small devices

I’m using the latest Firefox on a PC running WinXP The CPU is “challenged” by the workload of Firefox and JavaScript.

I think the text margin issue that I saw is resolved, but the scrollbar is still lagging. I suspect a media query might be kicking in at too narrow a width, 785px instead of 810px maybe. I don’t think all browsers take the vertical scrollbar into consideration by the same amount, so if that’s the case, I’d recommend extending the width of the query by 25px and see if that helps. I didn’t look thoroughly enough to tell which one it is.

Wow. Large site! and all just for fun? Impressive

At 69, and hating gardening…
The pages are pretty much identical, other than the content, which is also similar

1 Like

While its true that Safari 5 was the version used in Windows its still 99.9% likely that those are still mac users as safari was the main user on the mac and there will be more old macs around than there are old versions of safari on the PC.

Indeed the statistics say that for for safari 5.1 users on all systems is only about 1.2% anyway so the windows users will be virtually nil. Read this article from about 3 years ago as to why you should not use it (even for testing).

If your statistics are showing 1.5% of safari PC users then I would not trust those statistics. I would hazard a guess that the only people to have looked at your site on safari 5.1 PC is you and me :smile:

1 Like

Touché!

Did you try to find the media query in question? The page would look nicer if it could be tweaked a little.

I’m ready with the code for the three boxes

Sorry ronpat

I have to get my old XP computer out of mothballs and as I have to go to physiotherapy to sort out a bad knee, I can only look at it later this afternoon.

Meanwhile if you could have a look at the 3 boxes for media queries, I would be very grateful

I did as well a few months back when he first asked about Safari debugging :stuck_out_tongue: .

Well, there you are! It accounts for the 1.5%…

already

I deleted 3 rules, rewrote them in a more compact fashion and added one. The boxes look good on my PC.

I was unable to determine how to adjust the media query to prevent that brief horizontal scroll bar.

Delete these 3 rules:
newhtl.css (line 785+)

.div1 {
    font-family: helvetica,arial;
    font-size: 85%;
    float:left;  /* DELETE or CHANGE to {float:none} */
    padding-left:7px;  /* DELETE me */
}
.div2 {
    font-family: helvetica,arial;
    font-size: 85%;
    float:left;  /* DELETE or CHANGE to {float:none} */
    margin-left:25px;  /* DELETE me */
}
.div3 {
    font-family: helvetica,arial;
    font-size: 85%;
    float:left;  /* DELETE or CHANGE to {float:none} */
    margin-right:5px;  /* DELETE me */
    padding-left:10px;  /* DELETE me */
}

Add this rule:

#threedivs {
    text-align:center;
}

Add these rules:

#threedivs .div1,
#threedivs .div2,
#threedivs .div3 {
    float:none;
    display:inline-block;
    font-family: helvetica,arial;
    font-size: 85%;
}

.

This is an unrelated overflowing box that I spotted:

newhtl.css (line 438)

.blank1 {
    background: white none repeat scroll 0 0;
    height: 220px;  /* DELETE THIS FIXED HEIGHT!!! */
    margin: 15px 10px;
    width: auto;
}

Hi ronpat

I’m back and am downloading Firefox into my XP. Need also to backup the current work before I make the changes, but need to go out again.

Should sort things out this evening.

many thanks

You’re definitely going the extra mile so you can see what I see. I doubt that WinXP matters. I mentioned it primarily as a point of humor, albeit true humor. . I don’t mind posting screen shots as needed.

Hi

I’ve just looked at the page in Firefox/XP and cannot see anything different, other than a vertical slider. is that what you mean?

There are two issues on the table. These screen shots should help describe both. Sorry, I have to go out so I didn’t take the time to slice them into a compact form.

First, the 3-divs. The left image shows the older arrangement if all are aligned vertically. They are more or less left aligned. The right image shows the new arrangement if the width of the viewport is wide enough for two of the divs to display side by side. They are centered, in other words. If narrowed more, the single column would be centered.

Next, the width sensitive fleeting horizontal scrollbar. Only visible between certain widths. You’ll have look carefully at the right edge and bottom of each image to see the differences.




If the scrollbar needs more clarity, I can slice those images later.

Cheers

Hi ronpat

I’ve applied the code for the threedivs but it does not do what I needed. I want it to behave exactly as in http://pintotours.net/Europe/Spain/CrowneBcn.html where they go vertical together in the centre.

I tried to copy the code from http://pintotours.net/Europe/Spain/CrowneBcn.html across but for reasons beyond me it did not work.

Sorry!

I will look at the other points later.

Silly me. Sounds like I didn’t pick that up from the conversation.

Making them go to the center together is easy enough to do using using a media query… except for those pesky sidebars that haven’t been accounted for yet. The sidebars behave differently from the example page that you pointed to. Is that supposed to be the case? To be clear, you want the 4 images AND the 3 divs to be center aligned at the same time. Is that correct?

I’m leaving the sidebars for the end,but they will be like the http://pintotours.net/Pinto/insurance.html and NOT like the http://pintotours.net/Europe/Spain/CrowneBcn.html

In any case, they are nearly ready

Yes!

Hi ronpat

I’ve now come to the conclusion that your idea for the display of the boxes is a lot better than mine. Not, really, a surprise!

I am happy with the code now.

next I will look at the scrollbar problem that you mentioned.

Thank you very much.

1 Like

That scrollbar problem is not unique to that page. It appears on other pages, too. It will be a good thing to fix.
I’ll give it another look later (it really should be easy to fix as a fluid issue rather than a responsive one). But please do leave a post if you find a solution first.

Hi ronpat

It’s on the list to try and understand the problem. I have your fix above.

Right now I have a colour mystery. On the left sidebar I have a button “HOME” under the logo. I cannot understand why it has a grey background. The css color #cccccc is applied throughout as a border, but I have checked thoroughly (I think…) and it is not elsewhere.

So, why is it grey, Mr Sherlock?