Centralise HTML text & images for mobile


#1

Hello, I'm learning a little bit about coding. I've been using a WYSIWYG editor and had some success.

I sell items online and like to create my scripts to do this.

I've noticed that my images and text centralise well on desktops and laptops but are left justified on mobile. Can anyone suggest how I can make the content centralised for mobile?

Here's an example of some recent work. Interestingly on this blog, this justifies left as well.

<a href="https://content.screencast.com/users/dan3180/folders/Default/media/c2fef15f-57ad-4ba2-a46f-21e4f5c1c94b/Sale-01.jpg"></a><p style="font-size: 14pt; text-align: center;"><a href="https://content.screencast.com/users/dan3180/folders/Default/media/c2fef15f-57ad-4ba2-a46f-21e4f5c1c94b/Sale-01.jpg"><img class="permalink" src="https://content.screencast.com/users/dan3180/folders/Default/media/c2fef15f-57ad-4ba2-a46f-21e4f5c1c94b/Sale-01.jpg" width="600" height="156" border="0"></a></p><p style="font-size: 14pt; text-align: center;"><font size="5">Previously £38.99 - Sale Price Only&nbsp;<strong><font color="#ff0010">£24.99</font></strong></font></p><p style="font-size: 14pt; text-align: center;"><font rwr="1" size="4" style="font-family:Arial"><font face="Arial" size="6">This beautifully handmade Cordura falconry waistcoat is easily adjustable and perfect for everyday use in the field&nbsp;</font></font></p>

Thank you

Rob


#2

how do you expect us to do this without the required code to reproduce the problem?


#3

Thank you for your reply. I fully agree with you, I pasted the HTML code into the blog and it converted it to what you can see.


#4


#5

you should really put your code over some more lines to make it readable:

<body>
  <a href="https://content.screencast.com/users/dan3180/folders/Default/media/c2fef15f-57ad-4ba2-a46f-21e4f5c1c94b/Sale-01.jpg"></a>
  <p style="font-size: 14pt; text-align: center;">
    <a href="https://content.screencast.com/users/dan3180/folders/Default/media/c2fef15f-57ad-4ba2-a46f-21e4f5c1c94b/Sale-01.jpg">
      <img class="permalink" src="https://content.screencast.com/users/dan3180/folders/Default/media/c2fef15f-57ad-4ba2-a46f-21e4f5c1c94b/Sale-01.jpg" width="600" height="156" border="0">
    </a>
  </p>
  <p style="font-size: 14pt; text-align: center;">
    <font size="5">Previously £38.99 - Sale Price Only&nbsp;
      <strong>
        <font color="#ff0010">£24.99</font>
      </strong>
    </font>
  </p>
  <p style="font-size: 14pt; text-align: center;">
    <font rwr="1" size="4" style="font-family:Arial">
      <font face="Arial" size="6">This beautifully handmade Cordura falconry waistcoat is easily adjustable and perfect for everyday use in the field&nbsp;</font>
    </font>
  </p>
</body>

#6

this anchor element:

<a href="https://content.screencast.com/users/dan3180/folders/Default/media/c2fef15f-57ad-4ba2-a46f-21e4f5c1c94b/Sale-01.jpg"></a>

doesn't do anything?

you should really check if certain things (border="0" attribute, <font> tag) are not Deprecated, because they are.

Well, on a mobile device, of the text is longer then the screen-width, how should it possible center?


#7

Hi thank you for your help it is most appreciated.

I have a couple of screenshots, one shows the website accessed on my smartphone - and it seems to work ok.

The second screenshot is viewing exactly the same piece of coding but through the eBay app. This is where the issue seems to lie.

We have checked it on iphone, ipad, tablet, desktop and laptop and it seems to work on all fine except the app where the images and code are left justified (and the text seems very much condensed - i.e. just a couple of words per sentence).

(sorry, both examples on one image as the blog only allows new users to upload one image at a time)

Regards

Rob


#8

this was never in the original question?

I have no idea about the ebay app, and without code i can work with, there is nothing i can do


#9

ok I didn't realise it was only the app where the issue lied.

Thanks anyway