Can't get the image resolution to adopt to different display sizes.

CLHarrison · April 21, 2022

Hi, I'm really new to HTML coding and trying to teach myself using online resources. So far so good, but I've images on the webpages I've created so far and while they display just fine on a PC monitor as either a .jpg or a .png, they won't display at all on a tablet or a phone. I had tried to use a responsive layout but didn't have any luck. So, I converted all of the images so .webp. They do the exact same thing. My question is, when using .webp, do I need to take out parameters of the image? for instance"....style=height:300px;width:900px; hspace="9" vspace="7">" Or does that stay? Are there any other settings to use with .webp that I just haven't found yet?

Is there a simpler, and more sure fire way to do this?

The line above is my code, and as I said, it displays fine on a PC monitor but not a smaller tablet or phone.

Thanks for taking a look at this.

Ingolme · April 21, 2022

The image format shouldn't make any difference to the visibility of the image.

How are you testing this on phone and tablet? If you're copying the files onto the device, you need to make sure that the image is in the right location in the filesystem relative to the HTML file. Though I don't know if HTML documents have permission to access files. If you're not testing on an online server with a URL then for phones and tablet testing it's best to use the responsive design tools in a desktop browser instead.

You should fix up the HTML, as some browsers might not be able to interpret it with mistakes. You need quotation marks around your style attribute. hspace and vspace are not valid HTML, you can replace it with the CSS margin property.

<img src="images/shooting_dummy.webp" alt="Shooting Dummy" style="height:300px; width:900px; margin:7px 9px;">

CLHarrison · April 21, 2022

Thank you I will try that. The files are stored on my OneDrive and simply access them and open the file using Edge or Chrome.

Yes, I'm sure I'm making many mistakes. I'm pretty happy I've gotten the 5 pages I've built to work as well as they do so far. As I stated, I'm very new to this and there is a significant learning curve for me. However I'm not really a fan of the WIX or SquareSpace sort of sites. I'd rather learn to write HTML and CSS to avoid the limitations. I want to add a forum and that will take a database added in, I think.

Thank you for the response.

CLHarrison · April 21, 2022

Ok, I'm afraid that didn't help.

Ingolme · April 21, 2022

There might be other code on the page which is interfering with the image on mobile devices.

CLHarrison · April 22, 2022

Here is the code down to the line I pasted in earlier.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

/* Add a gray background color with some padding */
body {
font-family: Arial;
padding: 40px;
background: #f1f1f1;
}

/* Header/Blog Title */
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: white;
}
img {
float: right;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}

/* Right column */
.rightcolumn {
float: left;
width: 25%;
padding-left: 20px;
}

/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}

/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* Footer */
.footer {
padding: 40px;
text-align: center;
background: #ddd;
margin-top: 20px;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}

body {
background-image: url("images/Blue_Background.jpg");
</style>
<style>
img {
width: auto ;
   max-width: 100% ;
   height: auto ;
   }
</style>
<picture>
<Source meida="(min-width: 300px)" srcset="images/TWP Large.webp">
<source media
</head>
<body>

<div>
<div class="header">
<img src="images/TWP Large.webp" alt="Train With a Purpose Logo" style="width:300px;height:220px;">
<h2>Train With A Purpose</h2>
<p style="font-size:65%;"><i>"When in training or in practice, have specific improvement goals as the outcome".</i></p>

<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0000b2;
}
background-color:white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #38444d;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
font-size:20px;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: blue;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #b4b4b4;}

.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>

<ul>
<li><a href="Blog Main Page Setup-ITDIR.html">Home</a></li>
<li><a href="blog page 2.html">Page 2</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Tutorial Musings</a>
<div class="dropdown-content">
<a href="About That Stance.html">About That Stance</a>
<a href="Handgun Presentation.html">Handgun Presentation</a>
<a href="The Proper Grip.html">The Proper Grip</a>
</div>
</li>
</ul>

</style>
</div>

<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>IF You Are New to Shooting, Start Here</h2>
<h5>March, 2022</h5>
<img src="images/shooting_dummy.webp" alt="Shooting Dummy" style="height:300px;width:900px; hspace=9 vspace=7">

Ingolme · April 22, 2022

You have a lot of different <head> and <body> tags. There should only be one <head> and one <body>.

Every HTML document should have a structure similar to this:

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
    
    <!-- Metadata and stylesheets go here -->
    
  </head>
  
  <body>
    
    <!-- Text, images and other content go here -->
    
  </body>
</html>

All of the <style> tags must be in the <head> section, they are not allowed in the <body>.

You have an unclosed <picture> element here. Everything beyond this point could easily just disappear depending on which browser is handling it:

</style>
<picture>
   <Source meida="(min-width: 300px)" srcset="images/TWP Large.webp">
   <source media
</head>
<body>

There's no need to use <picture> at all, a regular <img> tag will work better.

You should run your HTML through the validator to make sure there aren't other problems with it: https://validator.w3.org/

navyfalcon · April 25, 2022

You should use a code validator to check your code. HTML Tidy will give you a corrected page https://htmltidy.net/ or https://infohound.net/tidy/

hope this helps, I like it because it gives a corrected page

falcon

CLHarrison · April 25, 2022

Thank you both for your feedback. I really appreciate it. I'll work on this when I get home tonight and see if can resolve my issues. The code validator sounds like it could be exceedingly helpful for a newbie like me as well.

dsonesuk · April 26, 2022

I found Chrome tends to ignore srcset attribute, for the image stored in cache. Which one? i can't remember? Probably the img tag src url used for fallback.

CLHarrison · April 26, 2022

I ran me code through the both code validators. I was able to rectify a number of the "errors" that were pointed out. However, the "Tidy" website's validator completely removed the page formatting and everything was in a single, full width vertical column. In addition, when I removed a specific <style> about halfway down the page, much of the page no longer displayed and what was displayed, didn't display correctly. Yet both of the code validator and a third one I tried all state that it's an error. I don't doubt that it is, but with the way I did the page, it won't work without it.

So far, despite cleaning up about two dozen errors, the pictures still do not display properly on a phone or tablet but will display just fine on a PC screen. The adaptive resolution is working as expected though. I think using .webp image format probably decreases bandwidth utilization but it's not helping any resizing the images so that they will display. I am going to have to figure out another solution that just using .webp.

Thanks again for responding to me questions. I'm slowly learning.....

CLHarrison · April 26, 2022

I have now cleared all but two errors:

Element “head” is missing a required instance of child element “title”.

From line 90, column 1 to line 90, column 20

Code Extract:
</style>↩<div class="header">↩ <i

and

Element “style” not allowed as child of element “div” in this context. (Suppressing further errors from this subtree.)

From line 94, column 1 to line 94, column 7

Code Extract:
.</i></p><style>↩ul {

Here are the lines the errors are referring to:

<div class="header">
<img src="images/TWP_Large.webp" alt="Train With a Purpose Logo" style="width:300px;height:220px;">
<h2>Train With A Purpose</h2>
<p style="font-size:65%;"><i>"When in training or in practice, have specific improvement goals as the outcome".</i></p>
<style>

I'm not sure, but the top one seems to be extracting "head" out of header. If I remove the entire line, the page doesn't display properly at all. Is this not really an error but just something the code validator is picking up erroneously?

The second one has me baffled. If I remove the <style> that's claiming is an error, the whole page is messed up. It may be something I've done, not having something in the right place, something out of order or something is missing. But without it, this is not going to work unless I can find it. I see where it says that "style is not allowed as a child element of div in this context". I just have no idea what to do about it.

And now that I have rectified all of the other errors, I can't even open the page with my phone anymore, LoL!

dsonesuk · April 27, 2022

Opening <style> tag along with styling contained within it and closing </style> tag should be between open <head> and closing tag </head> tags. The title error is stating the title open/close tags does not exist between head tags.

Div tag elements also require open/close tag. Yours <div class="header"> shows no div closing tag before style tag and to it, it means the style tag is within the div which is not allowed.

<html>

<head>

<title>my title</title>

</head>

<body>

</body>

</html>

CLHarrison · April 28, 2022

Thank so much for the help. I've got pretty all that cleared up still have one oddity.

Element “style” not allowed as child of element “div” in this context. (Suppressing further errors from this subtree.)

From line 93, column 1 to line 93, column 7

Code Extract:
</i></p>↩<style>↩ul {

If I remove <style> it messes up the page badly. Everything is displaying the way it on a full-sized monitor. This is the only error three different code validators are finding at this point. I tried to add </div> to close above this line but it just makes a different mess.

Now, if I attempt to open the page on my phone, I get a message say that "content links are blocked". I'm not sure what this is referring to.

I also attempted to use the style="max-width:100%; height:auto; in the line with the images but the images are then blow way up and rather than my formatted two columns I have a single column. It may look different on my phone, once I manage to figure out the previous issue I mentioned.

dsonesuk · April 28, 2022

Then maybe there is a closing div and you have to find it and move the style tag below it.

You could do a count of '<div' compared to '</div>' search, if you have editor able to do that. Then you will know you have correct number of opening/closing div tags. Make sure you remove commented out div tags before though.

My editor would highlight any open tag belonging to related closing tag in yellow, so if style tag exist within a div element, i would move it, its content and closing style tag, outside below div closing tag.

CLHarrison · April 28, 2022

Well you may have nailed it. There are 13 <div.. and only 12 </div.. An opening <div is just a few lines above the <style> in question at line 88. The opening <div is for <div class="header"> and the next couple of lines put in the log graphics and a title. The the <style> is there and that is followed by part of the code that puts in a small set of dropdown menus. Just the part that sets up the behavior and the look, but not the links and the names of the links There is a </style>before that portion and then at the end of the portion that puts in the links and names, there is a </div>. I suspect that may be where my issue is, but I'm not sure. Since it's about 80 lines, I'm hesitant to post all of that but here is the beginning and then end of it.

<div class="header">
<img src="images/TWP_Large.webp" alt="Train With a Purpose Logo" style="width:300px;height:220px;">
<h2>Train With A Purpose</h2>
<p style="font-size:65%;"><i>"When in training or in practice, have specific improvement goals as the outcome".</i></p>

<style>

_______________________________________________________________________
</style>
<ul>
<li><a href="BlogMainPage.html">Home</a></li>
<li><a href="blogpage2.html">Page 2</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Tutorial Musings</a>
<div class="dropdown-content">
<a href="AboutThatStance.html">About That Stance</a>
<a href="HandgunPresentation.html">Handgun Presentation</a>
<a href="TheProperGrip.html">The Proper Grip</a>
</div>

I'm guessing that the <style> either has to be completely in between the starting and ending <div> or that it needs to be the other way around with the starting and ending <div> being inside the starting and ending <style>. But if so, I still need to find the missing </div> or the extra <div> since I don't think correcting the style -div problem I've outlined here will impact that.

Thank you again for you help and patience with me.

dsonesuk · April 29, 2022

NO! style element tags must NEVER EVER! be within DIV element, That is why you have that error.

For every opening tag there most be a closing tag, if not! Your browser will try to correct it by adding missing tags, and usually get it wrong!

<style>

  <!--Move this completely outside away from div-->

</style>
<div class="header">
  <img src="images/TWP_Large.webp" alt="Train With a Purpose Logo" style="width:300px;height:220px;">
  <h2>Train With A Purpose</h2>
  <p style="font-size:65%;"><i>"When in training or in practice, have specific improvement goals as the outcome".</i></p>
</div> <!--this correct-->

<ul><!-- I miss my closing soul mate -->
  <li><a href="BlogMainPage.html">Home</a></li>
  <li><a href="blogpage2.html">Page 2</a></li>
  <li class="dropdown"><!-- I miss soul mate too -->
    <a href="javascript:void(0)" class="dropbtn">Tutorial Musings</a>
    <div class="dropdown-content">
      <a href="AboutThatStance.html">About That Stance</a>
      <a href="HandgunPresentation.html">Handgun Presentation</a>
      <a href="TheProperGrip.html">The Proper Grip</a>
    </div> <!--this is not finished! you have missing closing </li> and </ul> -->
  </li><!-- Like this -->
</ul> <!-- and this! -->

it may be like this also

<style>

  <!--Move this completely outside away from div-->

</style>
<div class="header">
  <img src="images/TWP_Large.webp" alt="Train With a Purpose Logo" style="width:300px;height:220px;">
  <h2>Train With A Purpose</h2>
  <p style="font-size:65%;"><i>"When in training or in practice, have specific improvement goals as the outcome".</i></p>

<div class="menu"> <!-- OR this could be <nav class="menu"> -->
<ul><!-- I miss my closing soul mate -->
  <li><a href="BlogMainPage.html">Home</a></li>
  <li><a href="blogpage2.html">Page 2</a></li>
  <li class="dropdown"><!-- I miss soul mate too -->
    <a href="javascript:void(0)" class="dropbtn">Tutorial Musings</a>
    <div class="dropdown-content">
      <a href="AboutThatStance.html">About That Stance</a>
      <a href="HandgunPresentation.html">Handgun Presentation</a>
      <a href="TheProperGrip.html">The Proper Grip</a>
    </div> <!--this is not finished! you have missing closing </li> and </ul> -->
  </li><!-- Like this -->
</ul> <!-- and this! -->
  </div><!--end menu div OR this could be </nav> -->
  </div> <!--end header div -->

Either way the style element IS NOT within Div and error won't appear, I swear, cross my heart.

dsonesuk · April 29, 2022

I think the validator allows you to copy the link to the results of your validation.

WolfLord Skywalker · May 2, 2022

Hey guys please I desperately need help. I'm making a game with an HTML canvas. I know how to draw obstacles onto a canvas. I also know how to draw my own image onto the canvas. My problem lies with combining both- drawing my own image onto a canvas with obstacles. Can someone post the source code or help me or something? Here are the 2 codes (text-1.txt is the source code for drawing obstacles)

Canvas img.txt text.txt

CLHarrison · May 2, 2022

That is what I was slowly coming to realize. However, when I removed <style> from where it exists, it completely hoses up the way the page is presented. I'll need to find just where to put it back.

Also, I had something of an epiphany and realized I had a lot of unnecessary stuff in the page and cleaned up a bunch of it. So I am slowly gaining on it. I still am unable to find a way to get the pictures to display on tablets and phones however. I thought using on .webp image format was going to do the trick but it made no difference at all. I also tried to use (CSS) RWD and it still no luck.

WolfLord Skywalker · May 2, 2022

Yes the webp works as well as jpg. But even on laptop I can't do both. If you want to see how the code works for real change your browser to desktop view. So is there a way to combine

WolfLord Skywalker · May 3, 2022

Anyone know how to draw both obstacles and personal image (I.e like smiley.gif) onto a game canvas?

I'm developing a game and can't do it without this. Anyone???

CLHarrison · May 3, 2022

Removing <style> from the equation does remove the error. It also removes the header that I had. So found a place to put <style> to get the header back, but my horizontal menu is now missing. So I got that back, but the Home is not hosed up. The code validator keeps telling me "No space in "home.html". Well there is no space there, not even a hidden one and on the menu it instead of just displaying Home, it displays, "home.html">Home. I didn't change this line at all and am not sure why it suddenly displays so oddly. But I'm getting closer.

Wolflord, I haver no idea, I'm a newbie to all this and struggling just to get a few pages ready for prime time.

WolfLord Skywalker · May 3, 2022

Oh OK. Mind sharing the code 4 home.html. Maybe I can work out something.

CLHarrison · May 3, 2022

I just figured that out. However now I have different issue that wasn't showing up before. I didn't even have <body></body> in the page, yet I was getting an error from the code validator that <style> couldn't be a child element of <body>. What I do have is this:

body {
background-image: url("images/Blue_Background.webp");

img {
max-width: 100%;
}
</style>

The only place that body appears on the page. The code validator doesn't like it. This only showed up after I fixed the issue with having <style> as a child of <div>. Without the background image the page doesn't look nearly as nice. I see how to apply the background image to other things, but using it like I have is the only way I've found to have the image display on the entire page like I want.

I'm also getting parse errors on adding a color: HMM, after I cut and pasted this in, I can't get under it to finish. But the error appears to be due to a carriage return. Not sure what to do about that.

Error: CSS: Parse Error.

At line 104, column 26

d-color: white;↩}↩ul {↩ list-
Error: CSS: Parse Error.

At line 105, column 2

color: white;↩}↩ul {↩ list-s

Can't get the image resolution to adopt to different display sizes.

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Ingolme

CLHarrison

CLHarrison

Posted Images

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Announcements