Don’t forget your basic css and if you want special classes for elements that you have designed more globally then simply add a class and modify the existing rule ensuring that the specificity of the new rule is enough to win out.
.banner2{max-width:728px}
Then add the new class to the html:
<div class="banner banner2"> etc...
There isn’t a blockquote element on that page as far as I can see?
You’d be better off setting the line height on the ul instead of the list. However to make the items easier to click on mobile the links would be better as display:inline-block and then you could add some top and bottom padding to increase the target area.
well that doesn’t make sense to me! You didn’t do it for adbox – 250-wide box doesn’t expand into 300 space. Surely there’s a similar way we could get a block display of 728 to NOT expand into 928? Isn’t the only diff that one is display inline & the other block?
I stole your adbox code for adbanner and tried this:
.btmad{max-width:1200px;margin:20px auto 0;text-align:center;font-size:0;/* white space fix*/}
.adbox{width:300px;display:inline-block;text-align:center;vertical-align:baseline;
font-size:16px;font-size:1rem;}
.adbox img{display:inline;vertical-align:bottom;margin:15px 0;}
.adbanner{display:block;text-align:center;vertical-align:baseline;}
.adbanner img{display:block;vertical-align:bottom;margin:0 auto 15px;}
@media screen and (max-width:768px)
{.adbanner,.adbanner img{max-width:768px}}
@media screen and (max-width:330px;height:auto;)
{.adbanner,.adbanner img{max-width:300px;height:auto;}}
quote: “depending on the image and dynamics of the page you could just scale the image smaller.”
.banner{
max-width:728px;
min-width:300px;
margin:auto;
}
.banner img{width:100%;height:auto;}
A problem might be that adbanner is stuck inside adbtm but I need it that way.
So you’re saying I must do it like you’ve always told me? And every time I get a new banner size, I must ad it to the css, e.g.:
Sorry it’s ul in subscribe area, not blockquote. I’ll fix that!
Yes there is a #txtnav! I’ll try your advice for its ul & li tomorrow. Right now I’m rushing to an Elvis musical of Twelfth Night – we’re promised it’ll have Jailhouse Rock.
The adbox images are not scaled as they are 300px or less and therefore don’t get bigger or smaller. They will fit the mobile screen at their normal size and therefore do not get the img {width:100%;height:auto} rule.
The 768px banner is a different matter and needs to scale smaller (and I assumed larger would be ok also so that it always fits).
You could let the image display at normal size and then just make sure it is never bigger than 100% like this.
On another matter you now seem to have a scrollbar at 432px which wasn’t there before and seems to be because you have removed/adjusted/misplaced the rules I gave you some time ago to make the header logo scale smaller. You need to let the page get down to 320px without a scrollbar or it will break iphone5 and under (and similar devices with a 320px resolution).
Hi Paul - wow thanks million for discovering the 432px scroll. I wouldn’t have known that in a gazillion light years.
I do have the logo scaling smaller. Shall I change that 330 to 450?
@media screen and (max-width:330px)
{.logo,.logo img{width:300px;height:auto;margin:auto;display:block}}
.adbanner img – works perfectly for all banner sizes without any need for @media (or banner1, banner2). Thank you! I made the max-width 99% and it seems to center without a margin, I guess because .adbanner has text-align:center.
.btmad{max-width:1200px;margin:20px auto 0;text-align:center;font-size:0;/* white space fix*/}
.adbanner{display:block;text-align:center;vertical-align:baseline;}
.adbanner img{height:auto;width:auto;max-width:99%;}
Funny, logic tells me that max-width:99% is 99% of 1200px (width of its .btmad container) yet it displays as 99% of screen width (which I want)…
the links [in #txtnav] would be better as display:inline-block and then you could add some top and bottom padding
Works perfectly. Thank you!
Now finally (after logo fix) I’m off to add this mobile stuff to the css of those old 1990’s pages done in html tables…
The banner image width is 728px so the max-width only takes effect when the space available is less than 728px and is based on the width of the containing block which at that width will be the same as the viewport width.
the max-width only takes effect when the space available is less than 728px and is based on the width of the containing block which at that width will be the same as the viewport width
Oh I get it. So .btmad{max-width:1200px;} is another way of saying “display at viewport size.” That’s why my:
I prefer this way of trapping a banner inside a container to scale it:
.btmad{max-width:1200px;margin:20px auto;text-align:center;font-size:0;/* white space fix*/}
.adbanner{display:block;text-align:center;vertical-align:baseline;}
.adbanner img{height:auto;width:auto;max-width:99%;}
Rather than this way which has no container, which doesn’t work unless we create banner1, banner2, etc for each banner width:
When you say width:97% that means the element will be 97% the width of its container. AS you have then stated that the width should never exceed 1200px (max-width: 1200px) then the width can never be more than 1200px even if 97% equated to 2000px wide.
As the container gets smaller than 1200px then the max-width is no longer needed and the element stays at 97% of the current container width.
Hi Paul - interesting, thank you! I wish everyone would use a 99% wrapper. I go to so many sites these days on my laptop where I have to horiz. scroll because they expect me to have a bigger monitor.
I gave up on trying to make the old <table> pages responsive. You can see the mess here:
You know that if you remove that line then mobile devices will see the site at 980px wide and then just scale it smaller and smaller until it fits the 320px width resulting in content too small to read with the naked eye.
Hi Paul – yes I know, I saw that in google, but you can see the mess at the -test pages (1) to (3). I can live with it, since I don’t have time to change those table pages which are about 30% of my site.
In iphone there’s a hamburger in the URL bar and when you tap that, the page displays the text content only at fully legible size. It hides the top & bottom areas. Then if you tap the hamburger again, you get them back and you can use your fingers to widen the screen, eg to see menu bar clearly, then just horizontally scroll across the menu (by swiping finger). And with only 4-5 dropdowns in each menu item, they display on-screen so are easy to tap.
it’s not ideal but it works for now. I’m guessing android also has something like that, where you can hide all css etc and read the text content only at normal screen text size.
The most important thing is that I now have a menu bar and links to the full site map (with all articles) that are pretty easy to access x-browser. Whereas before with those dropdown menus you created for me a few years ago, I found when I tested it with my iphone (earlier this year?) that they were almost impossible to access, even when enlarging the screen with my fingers, because I had so many choices in each dropdown, and they were so close together.
At that time, you’ll recall that @media queries weren’t even available.
So after my iphone test, I submitted it to google’s mobile checker and it told me it was all too close together for fingers.
It’ll take me just a few days to change all files in the entire site to the new 1mst-test template. So I’m ecstatically happy that in essence I do now have a mobile site
thanks for your concern! And all your amazing help… Val
forgot to mention, the 70% of site that’s the same as the 1mst-test template uses a different header from the other 30% that has tables. That header has the viewport metatag so 70% of site is now fully mobile responsive, or will be within next week
and the other 30% readers will just have to click apple’s hamburger in the URL bar or swipe the text bigger with their fingers…
I’ll also add a different footer to those old <table> pages, deleting the “helped by Paul OB and Site point Forums” because it’ll reflect badly on both to be associated with such junk! So you’re on the 70% that’s mobile responsive, but won’t be on this 30% <table>s junk!
haha it just struck me, I began this thread with “Add device-width to non-responsive pages?” and in the end answered my own question. No you can’t add a device-width metatag to pages that are not mobile responsive! They freak out.
