Marquee loop question

[theremotedr]

Hi,
Here is the page in question,
http://www.theremotedoctor.co.uk/index.html

Here is the code used,
<marquee width="100%" bgcolor="#93D3F1"><font size="5" color="#000000" face="Arial, Helvetica">*** New Honda Flip Upgrade & Key cloning Call <a href="tel:07899-827427">07899-827427</a> ***</font></marquee>

What I've noticed is when viewing on a phone the text is shown on say 3 lines.
I would like it to just scroll the text in one line & once the last letter has disappeared off the left hand side then start again leading in from the right.
I believe the reason is due to the width but unsure how to overcome this part.

[coothead]

Hi there theremotedr,

come on squire...

"You can't have your cake and eat it"

If you choose to use twentieth century propriety and obsolete code,
then you really should be extremely grateful to find that it actually
works in any modern phone device.

Having said that, you could try this CSS....

marquee {
    white-space: nowrap;
 }

...but don't hold your breath.

coothead

[theremotedr]

Hi,
CSS was an option & still is but as I started to run into problems & didn't want to ask I got this working in no time.
I'm still thinking of CSS but looking for a post etc of where to start and achieve the same thing.
This was a Sunday afternoon time filler but I'm looking as we speak.

[mlegg]

html:

<p class="marquee">*** New Honda Flip Upgrade & Key cloning Call <a href="tel:07899-827427">07899-827427</a> ***</p>

css:

.marquee {
      width: 100%;
      margin: 0 auto;
      overflow: hidden;
      white-space: nowrap;
      font-size: 20px;
      position: absolute;
      color: #000;
      font-family: Arial, Helvetica;
      -webkit-animation: marquee 5s linear infinite;
    }

    @-webkit-keyframes marquee {
      0% {
        text-indent: 260px;
      }
      100% {
        text-indent: -260px;
      }
    }

[theremotedr]

Morning,
I thought i would apply Mlegg code to see how it would look.
I dont see it scroll ?

[mlegg]

look at it working here https://jsfiddle.net/nkfdz1a0/

[theremotedr]

Hi,
That's strange,please take a look here http://theremotedoctor.co.uk
Ive copied your text again and placed it as follows.

HTML code has been placed where i want the marquee to scroll on the page.
CSS code has been placed in the basic-style.css file.

Ive checked it in Chrome & Firefox but its just staic without the scroll.

I see your fiddle and it works like you say.

[mlegg]

Fix your html errors and upload the page again. You've been doing this website long enough that you should know to check for code errors. Here are a few pages to start with
https://validator.w3.org/nu/
https://jigsaw.w3.org/css-validator/


Error: Stray end tag script. From line 13, column 1; to line 13, column 9 head>↩↩↩↩↩</script>↩

No p element in scope but a p end tag seen. From line 215, column 11; to line 215, column 14 </p>↩

Error: The hspace attribute on the img element is obsolete. Use CSS instead for lines line 324, column 29; to line 324, column 144: 99827427"><img src="m-images/phone-icon.png" hspace="3" alt="phone the remote doctor" width="53" height="53" class="shadow" /></a>↩↩
and all the image lines below that

Error: The language attribute on the script element is obsolete. Use the type attribute instead.
From line 348, column 1; to line 348, column 33: ↩ <h2>↩<script language="JavaScript1.2">↩↩/*↩N

[theremotedr]

Ive done what i can but still does not scroll.
Taking a look i dont see why so putting it to one side as it taking up too much time for me to see the problem.

Thanks anyway

[Beverleyh]

And the fact that you've put the css-marquee CSS inside a print media query doesn't jump out as being problematic to you?