Infinity Pro ul list error on mobile

[bdpardue]

An image added just before an unordered list displays with a li bullet even though the image is not part of the code. This only happens on mobile vertical, it doesn't do it with the mobile horizontal. Here's the code:

<strong>Social / Emotional Development</strong>
<a href="//new.adlerianchildcare.net/wp-content/uploads/2018/07/3s-block-center.jpg&quot;"><img src="//new.adlerianchildcare.net/wp-content/uploads/2018/07/3s-block-center-300x225.jpg&quot;" alt="&quot;&quot;" width="&quot;300&quot;" height="&quot;225&quot;" /></a>
&amp;lt;div class=&quot;clear&quot;&amp;gt;&amp;lt;/div&amp;gt;
<ul>
 	<li>Plays independently and in small group</li>
 	<li>Willing to share</li>
 	<li>Shows self confidence</li>
 	<li>Shows concern for classmates</li>
 	<li>Follows social rules</li>
 	<li>Waits turn briefly</li>
 	<li>Solves problems with classmates</li>
</ul>

https://new.adlerianchildcare.net/programs/threes-program/

[bdpardue]

Using Blisk to test mobile devices, I discovered this:
it displays properly in android phones and on Apple 5, 6, and 7 but not 6s, 6plus, 7plus, etc.
The bug also shows up in Chrome on an iPhone (which has the bug in Safari)

[Victor Font]

I tested this on my iPhone X, with Safari's dev tools. This allows you see the source code in real time on a Mac.

The issue is with the alignright you have on the images. The WordPress alignright class uses float:right to align your images. On a wide screen, the images are so far away from the text that they don't even appear to be part of the content. On a mobile device, the float compresses the images into the text. You have to change the alignment method. As soon as I removed the float:right, the images align correctly.

I would use the Genesis column classes, or CSS grid, or flex box to align the images rather than the float. You'll have greater control over the image placement.

You also don't have the viewport set correctly to display on an iPhone X. See this: https://victorfont.com/preparing-genesis-sites-iphone-x/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[bdpardue]

Victor, you are always amazing. Thank you.

[Author]

Posts