Centering things for small devices

I’m still having problems with this page

Now, I want to center the 4 photos when at around 750px (for lack of space? - it is not a break point in the queries) they go vertical. Thre is a js script which was written for me and compliactes things even more…

I expect I will have simlilar problem with the 3 boxes below.

The images and boxes in the centre body of the page should look like they do in when you narrow the screen

Thank you

Set up a media query and apply rules to center the images as required. You will need to increase the height of the container as you have fixed its height as mentioned 1 million times before :smile:

This will center the images.

@media screen and (max-width:768px){

#container{height:auto;margin:0 20px}
.clipped{display:table;float:none;margin:0 auto 10px}

This is probably not as well thought out as @Paul’s (who is more familiar with your code).

I deleted a bunch of apparently unnecessary properties, changed 1 and added 1. No additional media query needed. In case @Paul’s doesn’t work out as desired, give this a try. No promises, though. That fixed height was a show-stopper.

#content #box4 {
    padding-right:20px;  /* DELETE Me */ /* line 624 */

#container {
    height:400px;   /* DELETE Me */ /* line 697 */
    margin-left:31px;  /* DELETE Me */ /* line 697 */
    position:relative;   /* DELETE Me */ /* line 697 */
    width:100%;  /* DELETE Me */ /* line 1078 */

.clipped {
    float:left;  /* CHANGE to {float:none} *//* line 662 */
    display:inline-block;  /* ADD Me *//* line 662 */


Thank you Paul, thank you ronpat

I’m a bit tired now. I will leave this for morning. Thanks again.

I don’t know. It looks like you went and fixed the problem at source rather than my band-aid effort :smile:


Good morning

Thank you for the help above. It worked fine.


I transferred some code into the .stylesheet to sort out the sidebars and the images no longer work…

.popup {
    border:1px solid brown;
     background-position:0 -40px;
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;

.look-inside {
    margin:-10px 0 20px -28px;
.popup:hover  {
    background-position: 0 0;



But I still have the other problem

Maybe it’s my memory that’s failing me (Alzheimer’s on the way?..) or I’m just useless. A bit of both I think!.

I’ve played around with the 3 boxes in to make them look exactly as in , in MQ but without any success.

If you have time and patience…

Which method did you use to center the images, Paul’s or mine? Whichever you used, try the other and see if it works in spite of the new sidebar code.

Hi ronpat

As Paul approved of your method, I used yours.

I’m starting to think that the problem now has to do with the images themselves that do not adjust to the screen.

I must have done something silly!

If the images worked properly before the sidebar code was inserted, then remove the sidebar code and start again with the sidebar.

NO! I took the sidebar code out and the problem remains. (Put it back)

I think it’s something to do with the images not adjusting to the screen narrowing. I must have done something that I shouldn’t! Something to do with .img-container, but I’ve looked everywhere and cannot see any difference.

I could backup to an earlier version of this morning before I made any changes and start again slowly.

But the page validates…

The code that I posted worked perfectly when it was posted and I’m sure Paul’s did, too.

Back out the sidebar code AND the image code. Let’s revert to a known point, please.

If you don’t keep frequent milestone backups, then shame on you after all this time.

Hi ronpat

My apologies

I do keep regulat backups: see above.

I found the culprit in some code I copied from the other file, this morning

#maincontainer {
max-width: 1000px;  

I changed the width to 100% and all’s well on that front.

Could you help me with the 3 boxes, please?

1 Like

There is still a small problem with the width of the center section, or something, that is triggering a horizontal scroll bar briefly just before the images change position and the content is being scrolled over. That didn’t happen before.

I will look at the menu boxes in a little bit.

I don’t get it here, but I’ve just adjusted the margins of the text. Did that solve it?

Which browser are you using?



What I am getting is a totally wrong display with Safari. I know nobody uses it (1.5% of my visitors this year), but I like to test it just the same. Paul gave me a solution for this , I believe, which should be included in the code and I may have discarded it in this version…

After all works fine in Safari and the newhtl. code is a close copy.

I would hazard a guess that they are mac safari users and not PC safari users. I don’t believe there is anyone apart from you running safari on the PC now.:slight_smile: Safari on the mac and mobile is fine. Safari on the PC was discontinued years ago and users told to abandon it as it was no longer supported and would raise security issues.

Safari on the pc doesn’t like max-width on display:table elements so instead you would need to do this.

@media screen and (max-width:1000px){

Hi Paul

Yes, the solution works. Many thanks.

Well, I checked my Google Analytics that has a rule excluding own traffic and since January 1st, 1.5% of my “New Users” used Safari 5.(point something), which I believe is the last PC version of Safari for Windows.

I don’t know why someone would stay with such an outdated browser. Nevertheless, how many of those people are likely to be spending customers? Just musing. :slight_smile:

Just as likely as all the other 88.5%, as in 2 years I never got a penny out of this site.

It is a past-time, not a commercial venture, although I would be happy to see the millions rolling in!

Another curious cat question is how many pages are there in your site (or family of sites, however it is constructed)?

Over 300, with a sitemap of 217…