Skip to main content
martinv44029552
martinv44029552
Inspiring
October 27, 2018
Question

Website erratic on iPhones

  • October 27, 2018
  • 3 replies
  • 1730 views

Hello

I've posted a couple of times before but perhaps never properly introduced myself. By the way it's not a current pic of me, I'm sadly way older than that, still missing my youth;)

I'm trying to learn HTML and CSS but finding it a slow process. I've completed a very basic course and have been plowing through the W3Schools and adobe tutorials and while I'm getting a better understanding of the theory, practise is very much a different matter. I'm currently using the latest version of Dreamweaver. I only wish to attain skills for my own personal use, I have no intention of trying to set myself up in any shape or form as a web designer.

I've currently copied and pasted a w3schools template (am I allowed to say that, there weren't any appropriate free adobe ones) into my Dreamweaver application to get some practise and adapted it to suit my needs.

I've uploaded it to a remote server and it appears to work fine on Desktop and iPad but is erratic on iPhones, I have an iPhone 6s but I've tried it on other models and it's the same issue on them all.

It loads and resizes perfectly to fit the screen and initially it'll work for a bit but if I open and close the images repeatedly they eventually start to overlap, this happens on all the pages.

The only errors that appear on my HTML sheet are below

and the only errors on my CSS sheet are below

Would these errors be likely to cause the overlapping of images, see below, on mobile devices?

My web address: martinvallis.com

Any thoughts and feedback would be much appreciated.

Thanks in anticipation.

Martin

    This topic has been closed for replies.

    3 replies

    ALsp
    ALsp
    Legend
    October 28, 2018

    Absolute positioning can be a little sometimes with phones and small screens. So can  transforms and transitions. Also problematic are fixed background images and the background size property. I would say that relying on free templates is usually a very bad idea. But, as Ben said, the only real way to get some help here is going to require that you post a link to your actual page.

    And a word to the wise - there is no such thing as a free lunch. You get what you pay for, either in tools or in the investment of your time in learning.

    martinv44029552
    martinv44029552Author
    Inspiring
    October 28, 2018

    Thanks for getting back to me ALsp​ I appreciate your time.

    I totally agree with you 'you get what you pay for' but as I said in my original post, I'm basically a beginner, though I have done a course and have been reading tutorials, however I think it's fairly understandable that I choose to experiment with a free template to improve my understanding of the process.

    When I feel in a better position to make an informed judgement on the best way for me to proceed based on my skill level, then I have no problem with paying for a responsive template if I feel that may be my best option, while I try to build something from scratch which will obviously take me a lot longer.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    October 28, 2018

    On the web, folder and file names must not contain spaces or special characters.   Where you have this file name:

    the dream of life (a.k.a. in the steps of jackson pollock) copy.jpg,

    you will need to use F2 in your Files Panel to rename it.  And repeat for other file names.

    the_dream_of_life_copy.jpg

    You can ignore the warnings about browser prefixes.  Although they are technically not valid CSS code, they are nevertheless necessary for things to work in all browsers.

    Nancy O'Shea— Product User & Community Expert
    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    October 28, 2018

    None of the code include errors, only warnings. The HTML code shows a warning for <img> not containing an 'alt' attribute (see An img element must have an alt attribute · cfjedimaster/brackets-w3cvalidation Wiki · GitHub ), the CSS shows non--compliant prefixes when using '-ms-transform'.

    None of these warnings will cause the problem that you are having. The best way for us to help you, is to upload the site and supply the URL to the site.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    martinv44029552
    martinv44029552Author
    Inspiring
    October 28, 2018

    Thanks for your reply BenPleysier​ I appreciate your time. Link below.

    http://martinvallis.com/

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    October 27, 2018

    98% of browser rendering problems are code related.  An orphaned or missing curly brace will kill all CSS styles below it. 

    Check CSS

    The W3C CSS Validation Service

    Check HTML

    The W3C Markup Validation Service

    Nancy O'Shea— Product User & Community Expert
    martinv44029552
    martinv44029552Author
    Inspiring
    October 28, 2018

    Many thanks for your response and for the validation links Nancy OShea​

    A number of issues occur in HTML all relate to images, see below. While I comprehend the message, as hard as I look I cannot see where the space it refers to is located within the code?

    Also in the CSS validation this appears but seems to be a warning rather than an error?

    The trouble of course that I'm having along with the website performance on mobiles is my lack of experience in interpreting the process.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices