Hello, I’m hoping some of you good folks can help me out. I have worked on this for hours, read help replies, watched videos, I have tried–to no avail.
On Smartphones my Header Image is repeating down in the body (see example). Of note, on my and friends PCs and Laptops (Windows 10 and 11 with different Browser it works as it should)
My site is hosted on a server (at godaddy) having issues right now with bad redirects, so I attached a picture of what it looks like.
Since I’m a new member, this system (or I can’t figure it won’t let me put the html and css code below).
Please help! Guide me! Thank you. Monty_W
PaulOB
December 22, 2022, 4:31pm
#2
mivintagesled:
On Smartphones my Header Image is repeating down in the body (see example).
I assume you have used background-repeat:no-repeat on the background image?
I’m guessing you have tried that so we’ll really have to wait until you post a link or code that exhibits the problem.
Thanks Paul for replying. I’ve tried all the normal no repeated things I can think of. The background image isn’t the issue. It’s the Header image. The website, assuming godaddy has the issues resolved is www.teshio.com I be home in a half hour. What files do you want me to post? Again, thank you for reaching out. Monty
PaulOB
December 22, 2022, 5:33pm
#4
The site is still down i’n afraid. I’ll take a look later this evening as I have to go out now.
We probably can’t resolve this until we see the real page anyway.
I’m trying to put the code in. Keep getting this message: Multiple errors occurred: 1) Sorry, new users can only put one embedded media item in a post. 2) Sorry, new users can only put 2 links in a post. I’ll take a screenshot of the site.dwt and index.htm files and reply twice.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="shortcut icon" href="https://teshio.com/favicon.ico" />
<link href='http://fonts.googleapis.com/css?family=Gabriela' rel='stylesheet' type='text/css' />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!-- #BeginEditable "doctitle" -->
<title>Two Equal Height Columns - Liquid Layout</title>
<!-- #EndEditable -->
<!-- #BeginEditable "description" -->
<meta content="insert DESCRIPTION here" name="description" />
<!-- #EndEditable -->
<meta content="en-us" http-equiv="Content-Language" />
<meta content="General" name="rating" />
<meta content="no" http-equiv="imagetoolbar" />
<meta content="Copyright 2013, Pat Geary http://expression-web-tutorials.com/ All Rights Reserved" name="copyright" />
<!-- main css -->
<link href="../styles/site.css" rel="stylesheet" type="text/css" />
<!-- media queries css -->
<link href="../styles/media-queries.css" rel="stylesheet" type="text/css" />
<!-- css3-mediaqueries.js for IE less than 9 --><!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<style type="text/css">
.auto-style1 {
text-decoration: underline;
background-color: #FFFF00;
}
</style>
</head>
<body>
<!-- Page Container begins here -->
<div id="outerWrapper">
<!-- Masthead begins here -->
<div id="header">
<p class="sitename">Snowmobile Michigan<br />
<span class="tagline">Vintage | Late Model</span></p>
</div>
<!-- Masthead ends here -->
<!-- Top Navigation begins here -->
<!-- Top Navigation ends here -->
<!-- Columns Container begins here -->
<div id="contentWrapper">
<!-- Left Sidebar Begins Here -->
<div id="leftColumn1">
<!-- Sectional Menu Begins Here -->
<ul>
<li><a href="../index.html" title="Home">Home</a></li>
<li><a href="../vsn/events.htm" title="Events">Events</a></li>
<li><a href="../vsn/michigan.htm" title="History">History</a></li>
<li><a href="../msch/msch.htm" title="Links">Clubs/Races</a></li>
<li><a href="../twister.htm" title="Search">Twister</a></li>
</ul>
<!-- Social Media Icons begin here -->
<div class="socialmedia">
<a href="https://www.facebook.com/VintageSnowmobileMichigan"><img alt="Visit us on Facebook." src="../images/facebook_hover_32.png" style="width: 32px; height: 32px" /></a>
<a href="https://www.instagram.com/vintagesnowmobilemichigan/">
<img alt="instagram" longdesc="instagram" src="../images/instagram_hover_32.png" style="width: 32px; height: 32px" /></a>
<a href="https://twitter.com/SnowmobileEvent"><img alt="Follow us on Twitter." src="../images/twitter_hover_32.png" style="width: 32px; height: 32px" /></a></div>
<!-- Social Media Icons begin here -->
<!-- Sectional Menu ends Here -->
<p class="heading">Latest Update(s)</p>
<p><span class="auto-style1"><strong>22 Dec 22</strong></span><strong><br class="auto-style1" />
ALPHA SITE TEST<br />
9:30 AM EST</strong></p>
</div>
<!-- Left Sidebar ends Here -->
<!--Main Content Area Begins Here-->
<div id="content">
<!-- #BeginEditable "content" -->
<h1>H1 Main Content </h1>
<p> </p>
<!-- #EndEditable -->
<!-- Do NOT Delete or your footer will not fall below your content area --><br class="clearFloat" />
<br />
</div>
<!--Main Content Area Ends Here--></div>
<!-- Columns Container begins here -->
<!-- Footer begins here -->
<div id="footer">
<p>Copyright © 2023 MCW. All Rights Reserved.</p>
<p>
<a href="mailto:[email protected]?subject=Teshio Website Submission">
[email protected]</a> <a href="../privacy-policy.html" title="Privacy Policy.">Privacy Policy</a> </p>
</div>
<!-- Footer ends here -->
<!-- Page Container ends here --></div>
</body>
</html>
index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- #BeginTemplate "dwt/site.dwt" -->
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="shortcut icon" href="https://teshio.com/favicon.ico" />
<link href='http://fonts.googleapis.com/css?family=Gabriela' rel='stylesheet' type='text/css' />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!-- #BeginEditable "doctitle" -->
<title>Snowmobile Michigan</title>
<!-- #EndEditable -->
<!-- #BeginEditable "description" -->
<meta content="insert DESCRIPTION here" name="description" />
<!-- #EndEditable -->
<meta content="en-us" http-equiv="Content-Language" />
<meta content="General" name="rating" />
<meta content="no" http-equiv="imagetoolbar" />
<meta content="Copyright 2013, Pat Geary http://expression-web-tutorials.com/ All Rights Reserved" name="copyright" />
<!-- main css -->
<link href="styles/site.css" rel="stylesheet" type="text/css" />
<!-- media queries css -->
<link href="styles/media-queries.css" rel="stylesheet" type="text/css" />
<!-- css3-mediaqueries.js for IE less than 9 --><!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<style type="text/css">
.auto-style1 {
text-decoration: underline;
background-color: #FFFF00;
}
</style>
</head>
<body>
<!-- Page Container begins here -->
<div id="outerWrapper">
<!-- Masthead begins here -->
<div id="header">
<p class="sitename">Snowmobile Michigan<br />
<span class="tagline">Vintage | Late Model</span></p>
</div>
<!-- Masthead ends here -->
<!-- Top Navigation begins here -->
<!-- Top Navigation ends here -->
<!-- Columns Container begins here -->
<div id="contentWrapper">
<!-- Left Sidebar Begins Here -->
<div id="leftColumn1">
<!-- Sectional Menu Begins Here -->
<ul>
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="vsn/events.htm" title="Events">Events</a></li>
<li><a href="vsn/michigan.htm" title="History">History</a></li>
<li><a href="msch/msch.htm" title="Links">Clubs/Races</a></li>
<li><a href="twister.htm" title="Search">Twister</a></li>
</ul>
<!-- Social Media Icons begin here -->
<div class="socialmedia">
<a href="https://www.facebook.com/VintageSnowmobileMichigan">
<img alt="Visit us on Facebook." src="images/facebook_hover_32.png" style="width: 32px; height: 32px" /></a>
<a href="https://www.instagram.com/vintagesnowmobilemichigan/">
<img alt="instagram" longdesc="dwt/instagram" src="images/instagram_hover_32.png" style="width: 32px; height: 32px" /></a>
<a href="https://twitter.com/SnowmobileEvent">
<img alt="Follow us on Twitter." src="images/twitter_hover_32.png" style="width: 32px; height: 32px" /></a></div>
<!-- Social Media Icons begin here -->
<!-- Sectional Menu ends Here -->
<p class="heading">Latest Update(s)</p>
<p><span class="auto-style1"><strong>22 Dec 22</strong></span><strong><br class="auto-style1" />
ALPHA SITE TEST<br />
9:30 AM EST</strong></p>
</div>
<!-- Left Sidebar ends Here -->
<!--Main Content Area Begins Here-->
<div id="content">
<!-- #BeginEditable "content" -->
<h1>Snowmobile Michigan</h1>
<p>
<img alt="Daisy With Raindrops." class="imglft" src="images/patio_1_bg_061304.jpg" style="height: 224px" width="256" />Test
22 Dec 22</p>
<h2>History of www.teshio.com</h2>
<p>Test 22 Dec 22</p>
<!-- #EndEditable -->
<!-- Do NOT Delete or your footer will not fall below your content area --><br class="clearFloat" />
<br />
</div>
<!--Main Content Area Ends Here--></div>
<!-- Columns Container begins here -->
<!-- Footer begins here -->
<div id="footer">
<p>Copyright © 2023 MCW. All Rights Reserved.</p>
<p>
<a href="mailto:[email protected]?subject=Teshio Website Submission">
[email protected]</a>
<a href="privacy-policy.html" title="Privacy Policy.">Privacy Policy</a> </p>
</div>
<!-- Footer ends here -->
<!-- Page Container ends here --></div>
</body>
<!-- #EndTemplate -->
</html>
media-queries.css
@media screen and (max-width: 980px) {
#outerWrapper {
width: 95%;
}
#contentWrapper {
clear: both;
background: #FFFFFF url('images/mobile-bg.jpg') repeat-y;
}
#content {
width: 60%;
padding: 3% 4%;
}
#leftColumn1 {
width: 30%;
}
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (orientation : portrait) {
#outerWrapper {
width: 95%;
}
#contentWrapper {
clear: both;
background: #FFFFFF url('images/mobile-bg.jpg') repeat-y;
}
#content {
width: 63%;
padding: 3% 4%;
}
#leftColumn1 {
width: 27%;
}
}
@media screen and (max-width: 650px) {
#header {
height: auto;
}
#topNavigation {
position: static;
}
#contentWrapper {
clear: both;
background: #FFFFFF url('images/mobile-bg.jpg') repeat-y;
}
#content {
width: auto;
float: none;
margin: 20px 0;
}
#leftColumn1 {
width: auto;
float: none;
margin: 0;
height: 100%;
}
}
@media screen and (max-width: 480px) {
html {
-webkit-text-size-adjust: none;
}
#contentWrapper {
clear: both;
background: #FFFFFF url('images/mobile-bg.jpg') repeat-y;
}
#header {
height: 100px;
}
#outerWrapper #topNavigation {
height: 50px;
}
#topNavigation a {
font-size: 90%;
padding: 10px 8px;
}
#leftColumn1 {
width: auto;
float: none;
margin: 0;
height: 100%;
}
form fieldset {
width: 240px;
}
}
1 Like
PaulOB
December 22, 2022, 11:48pm
#12
mivintagesled:
has the issues resolved is www.teshio.com
I can see the site now and just checked on my iphone and it doesn’t look like your image. It looks exactly like its shown in devtools device toolbar. have you cleared your cache?
Why are you repeating a white image down the page?
Paul, I cleared my cache like 10 times before I wrote this. I called my neighbor (iPhone) he screen shot it and sent it to me. Same image. I’m at a loss over this. Still shows my issue. Galaxy S21. I’m going to call others with ‘droids. Why (the background) image? I figure no matter what device it should be white everywhere. I guess I could make the background white (FFFFFF). Any recommendations I would appreciate. Thanks for helping. I’ll update. Monty
Paul, he had the same image as yours, no issues.
Paul, I reloaded google. It looks like, it should be, I wrote it. Sorry I wasted your time. I have no clue why after clearing cache so many times it keep showing up like that. Thank you. Monty
1 Like
PaulOB
December 23, 2022, 8:33am
#16
mivintagesled:
t. Sorry I wasted your time.
No worries. Glad it’s sorted.