 Image won't center on mobile browsers |
  |
| malooka |
 Sep 13 2022, 09:31 PM
Post
#1
|
|
Group: Members Posts: 2 Joined: 13-September 22 Member No.: 28,559  |
This looks fine on desktop, but every mobile browser I try it will not center ("Click here for weekly crime blotter", blotterad.jpg, last 2 lines)
<center><h1><font color="#da340f">Vintage Detective Magazine Scans Every Week</h1></font> </center></head> <body bgcolor="#000000" text="#000000" onLoad="SetToNull()" onUnload="LoadAgain()"> <center><img src="images/tcheader2.jpg" title="TrueCrime.VIP - Vintage Detective Magazine Scans" alt="TrueCrime.VIP - Vintage Detective Magazine Scans"></center> <center><a href="http://truecrime.vip/blotter/index.html" target=_blank> <img src="http://truecrime.vip/images/blotterad.jpg" alt="Weekly Crime Blotter" title="Weekly Crime Blotter"></a><br><br></center> www.truecrime.vip This post has been edited by malooka: Sep 13 2022, 09:37 PM |
  |
 
|
| CharlesEF |
Sep 13 2022, 11:38 PM
Post
#2
|
|
Programming Fanatic  Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
What type of document is it? HTML4 or HTML5? The HTML center tag is not supported in HTML5. Use CSS instead.
|
|
|
|
| Christian J |
Sep 14 2022, 06:37 AM
Post
#3
|
|
. Group: WDG Moderators Posts: 9,658 Joined: 10-August 06 Member No.: 7 |
QUOTE(malooka @ Sep 14 2022, 04:31 AM)  This looks fine on desktop, but every mobile browser I try it will not center There are some images with text on, that are perhaps too wide for mobile screens (at least in portrait orientation): https://truecrime.vip/images/blotterad.jpg https://www.truecrime.vip/images/tcheader2.jpg https://www.truecrime.vip/images/headertext.jpg It's better to use ordinary text instead of images with text on. Text on an image can't wrap into multiple lines in narrow windows, also it can't be indexed by search engines. You can use CSS to style text in special ways, so there's almost never any need for images of text. QUOTE ("Click here for weekly crime blotter", blotterad.jpg, last 2 lines) Did you mean the image "blotterad.jpg", or the last two lines of text on the page it links to?  Sidenote: QUOTE <center><h1><font color="#da340f">Vintage Detective Magazine Scans Every Week</h1></font> </center></head> The above is invalid HTML, ordinary content like CENTER or H1 should be inside the BODY section, not in HEAD. |
|
|
|
| malooka |
Sep 15 2022, 01:42 PM
Post
#4
|
|
Group: Members Posts: 2 Joined: 13-September 22 Member No.: 28,559 |
QUOTE(Christian J @ Sep 14 2022, 07:37 AM) QUOTE(malooka @ Sep 14 2022, 04:31 AM) This looks fine on desktop, but every mobile browser I try it will not center There are some images with text on, that are perhaps too wide for mobile screens (at least in portrait orientation): https://truecrime.vip/images/blotterad.jpg https://www.truecrime.vip/images/tcheader2.jpg https://www.truecrime.vip/images/headertext.jpg It's better to use ordinary text instead of images with text on. Text on an image can't wrap into multiple lines in narrow windows, also it can't be indexed by search engines. You can use CSS to style text in special ways, so there's almost never any need for images of text. QUOTE ("Click here for weekly crime blotter", blotterad.jpg, last 2 lines) Did you mean the image "blotterad.jpg", or the last two lines of text on the page it links to? Sidenote: QUOTE <center><h1><font color="#da340f">Vintage Detective Magazine Scans Every Week</h1></font> </center></head> The above is invalid HTML, ordinary content like CENTER or H1 should be inside the BODY section, not in HEAD. The image blotterad will not center on mobile browsers. Moved the H1 to BODY section, still won't center on mobile browsers. |
|
|
|
| Christian J |
Sep 15 2022, 03:00 PM
Post
#5
|
|
. Group: WDG Moderators Posts: 9,658 Joined: 10-August 06 Member No.: 7 |
QUOTE(malooka @ Sep 15 2022, 08:42 PM) The image blotterad will not center on mobile browsers. What I think happens is that this image (and the other ones I mentioned) is too wide for some narrow mobile screens, but instead of shrinking to fit it spills out of view to the right. That's why it appears to be uncentered, if an oversized image was truly centered it would have to spill out equally to both left and right... One way to fix it might be to add this to the HEAD section, it basically prevents all images from becoming more than 100% wide: CODE <style> img {max-width: 100%;} </style> The table with thumbnail images is also too wide for the same reasons. If you want to treat it the same as the text images you could do: CODE <style> table, img {max-width: 100%;} </style> |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 26th April 2024 - 02:24 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC