<div dir="ltr">awesome mr. peck...<div>thank you...</div><div><br></div><div><br></div><div>/'m'/...</div><div><br></div><div><br></div><div>message ends.</div><div>________________________</div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Tue, May 21, 2019 at 8:29 AM Akkana Peck <<a href="mailto:akkana@shallowsky.com">akkana@shallowsky.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">jim writes:<br>
> From what I've read, the following addition will improve google's<br>
> perception:<br>
> <br>
> <meta name="viewport" content="width=device-width, initial-scale=1"><br>
> <br>
> Yes?<br>
<br>
Certainly start with that.<br>
<br>
> And there's our image, currently<br>
> <BODY><br>
> <P> la la la </P><br>
> <IMG SRC="LinuxKongSmall.jpg" align="left" width="289" height="701"><br>
> <P>mi mi mi </P><br>
> <br>
> which should be revised to be something like<br>
> <BODY><br>
> <P> la la la </P><br>
> <style type="text/css"><br>
> IMG { SRC="LinuxKongSmall.jpg" align="left"; max-width: 100%; height:<br>
> auto; }<br>
> </style><br>
> <P>mi mi mi </P><br>
> <br>
> My guess is that the above is incorrect. Corrections anyone?<br>
<br>
Two problems with that.<br>
<br>
First, in your revision, you've added style inside the <style> tag<br>
but removed the actual image from the HTML. Sure, that would solve<br>
the problem of the image being too big, but I'm guessing that's not<br>
what you intended. Also, you put the <style> tag inside the <body>,<br>
but it's supposed to go in the <head>.<br>
<br>
If you want to maintain the page and make it mobile-friendly using<br>
CSS, I'd recommend reading some basics about what CSS is and how it<br>
works. It turns out it's not that easy to find beginner-friendly CSS<br>
tutorials; the best I found so far is<br>
<a href="https://www.w3.org/Style/Examples/011/firstcss.en.html" rel="noreferrer" target="_blank">https://www.w3.org/Style/Examples/011/firstcss.en.html</a><br>
That should give you a basic idea of what a stylesheet is and how<br>
it modifies HTML.<br>
<br>
Second, look at the CSS you're asking about, and look at the page.<br>
The LinuxKong image is 289 pixels wide, so setting max-width: 100%<br>
should only matter on devices less than 289 pixels wide. Googling<br>
[minimum phone resolution] gives me a page from 2010 that says there<br>
were at that time a few phones that used QVGA (240x320). I doubt that<br>
resolution is common today (you can add 2019 to that query to find a<br>
table of common resolutions today).<br>
<br>
The real problem with the Kong image is that it takes width away from<br>
the main content, and on a phone, there isn't much width to begin with.<br>
So if you really want to be friendly to mobile browsers, you might<br>
want to re-think the page layout so it doesn't depend on that big<br>
image along the side of the page (the Kong penguin is cute, though!).<br>
Or make the image optional so it doesn't show up on small screens,<br>
or shows up smaller; but that takes more elaborate CSS, and you'd<br>
definitely need to learn a few CSS basics first before tackling<br>
device-specific stylesheets.<br>
<br>
...Akkana<br>
<br>
_______________________________________________<br>
sf-lug mailing list<br>
<a href="mailto:sf-lug@linuxmafia.com" target="_blank">sf-lug@linuxmafia.com</a><br>
<a href="http://linuxmafia.com/mailman/listinfo/sf-lug" rel="noreferrer" target="_blank">http://linuxmafia.com/mailman/listinfo/sf-lug</a><br>
SF-LUG is at <a href="http://www.sf-lug.org/" rel="noreferrer" target="_blank">http://www.sf-lug.org/</a> <br>
</blockquote></div><br clear="all"><div><br></div>-- <br><div dir="ltr" class="gmail_signature"><p style="margin-bottom:0.0001pt"><b><span style="font-family:Tahoma,sans-serif">~the quieter you become,
the more you are able to hear...</span></b></p></div>