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.
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
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 */
}
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.
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 don’t get it here, but I’ve just adjusted the margins of the text. Did that solve it?
Which browser are you using?
Thanks
EDIT
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…
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. 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.
#maincontainer{width:1000px}
@media screen and (max-width:1000px){
#maincontainer{width:100%;}
}
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.
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.