Several Issues about Responsive Web Pages and HTTPS
1. Texts and images are not aligned to HTML5 animations viewed on phones
They are aligned on computer monitors.
Cause: width of text and images are '100%', but that of the animation is '1140px'.
Solution: After I changed width into '100%' and height into 'auto' in -
(1) 'animation_container' div;
(2) canvas;
(3) 'dom_overlay_container' div,
the text and images have become aligned to the html5 animation now.
(Got help from 'Cypher- Entrepreneur')
2. There is a link on the image banner, but when viewed in browser, there is no link.
Cause: '>' is missing in <div> of <div><a href=""><img ...></a></div>
Solution: Inserted the missing '>', then the link on the image banner works now.
Note: (1) Better use 'Sublime Text' software to edit code files.
(2) Better use https://www.aliciaramirez.com/closing-tags-checker/ to check if any closed tag is missing.
(Got help from 'Cypher- Entrepreneur')
3. Website completely normal visited outside of our company LAN network, but can not open at all in LAN
Cause: IP of CloudFlare has changed.
Handling: The IP on our LAN DNS server which is mapped to our website domain was 104.28.30.95, which is an IP of CloudFlare.
Since we can not open our website at all, I changed IP on our LAN DNS into 64.91.250.231, which is the IP when we ftp and upload our website files. After the change, we can open our website, but (1) it is http, not https, 'not secure' shows. (2) none of our html5 animations show up, and some of the images do not show.
Pinging website domain name from out of LAN, IP addresses are (1) 172.67.133.250 (2) 104.21.25.97. Pinging website domain name from within LAN, IP is 64.91.250.231, of course.
Solution: changed the IP on LAN DSN from 64.91.250.231. The problem is gone. Website becomes normal viewed whether from out of LAN, or in LAN.
(Got help from 'Benjamin Gao)
4. On home page of website, there are two html5 animations. The first animation shows up fine, but the second one does not show.
If I remove the first animation, then the second animation shows.
Cause: </iframe> for the second animation is missing.
Solution: Added </iframe>. The second animation shows.
5. The distance between the two animations is too far away.
Cause: 'vh' in 'min-height:98vh' cause the distance.
Solution: Removed 'min-height:98vh'. The space in vertical direction disappeared. But there is a big blank space horizontally.
Using responsive iframe solved the problem of the problem of big blank space horizontally.
(Got help from 'Cypher Entrepreneur')
