<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body text="#000000" bgcolor="#FFFFFF">
<br>
<font face="Courier New, Courier, monospace">very helpful, I will
read and do. <br>
with thanks, <br>
jim<br>
</font><br>
<div class="moz-cite-prefix">On 5/21/19 11:23 AM, Akkana Peck wrote:<br>
</div>
<blockquote type="cite"
cite="mid:20190521152355.GA1263@shallowsky.com">
<pre class="moz-quote-pre" wrap="">jim writes:
</pre>
<blockquote type="cite">
<pre class="moz-quote-pre" wrap="">From what I've read, the following addition will improve google's
perception:
<meta name="viewport" content="width=device-width, initial-scale=1">
Yes?
</pre>
</blockquote>
<pre class="moz-quote-pre" wrap="">
Certainly start with that.
</pre>
<blockquote type="cite">
<pre class="moz-quote-pre" wrap="">And there's our image, currently
<BODY>
<P> la la la </P>
<IMG SRC="LinuxKongSmall.jpg" align="left" width="289" height="701">
<P>mi mi mi </P>
which should be revised to be something like
<BODY>
<P> la la la </P>
<style type="text/css">
IMG { SRC="LinuxKongSmall.jpg" align="left"; max-width: 100%; height:
auto; }
</style>
<P>mi mi mi </P>
My guess is that the above is incorrect. Corrections anyone?
</pre>
</blockquote>
<pre class="moz-quote-pre" wrap="">
Two problems with that.
First, in your revision, you've added style inside the <style> tag
but removed the actual image from the HTML. Sure, that would solve
the problem of the image being too big, but I'm guessing that's not
what you intended. Also, you put the <style> tag inside the <body>,
but it's supposed to go in the <head>.
If you want to maintain the page and make it mobile-friendly using
CSS, I'd recommend reading some basics about what CSS is and how it
works. It turns out it's not that easy to find beginner-friendly CSS
tutorials; the best I found so far is
<a class="moz-txt-link-freetext" href="https://www.w3.org/Style/Examples/011/firstcss.en.html">https://www.w3.org/Style/Examples/011/firstcss.en.html</a>
That should give you a basic idea of what a stylesheet is and how
it modifies HTML.
Second, look at the CSS you're asking about, and look at the page.
The LinuxKong image is 289 pixels wide, so setting max-width: 100%
should only matter on devices less than 289 pixels wide. Googling
[minimum phone resolution] gives me a page from 2010 that says there
were at that time a few phones that used QVGA (240x320). I doubt that
resolution is common today (you can add 2019 to that query to find a
table of common resolutions today).
The real problem with the Kong image is that it takes width away from
the main content, and on a phone, there isn't much width to begin with.
So if you really want to be friendly to mobile browsers, you might
want to re-think the page layout so it doesn't depend on that big
image along the side of the page (the Kong penguin is cute, though!).
Or make the image optional so it doesn't show up on small screens,
or shows up smaller; but that takes more elaborate CSS, and you'd
definitely need to learn a few CSS basics first before tackling
device-specific stylesheets.
...Akkana
_______________________________________________
sf-lug mailing list
<a class="moz-txt-link-abbreviated" href="mailto:sf-lug@linuxmafia.com">sf-lug@linuxmafia.com</a>
<a class="moz-txt-link-freetext" href="http://linuxmafia.com/mailman/listinfo/sf-lug">http://linuxmafia.com/mailman/listinfo/sf-lug</a>
SF-LUG is at <a class="moz-txt-link-freetext" href="http://www.sf-lug.org/">http://www.sf-lug.org/</a>
</pre>
</blockquote>
<br>
</body>
</html>