It looks like the issue with the CSS menu is caused by Javascript that does not properly detect touch on some Android devices using Chrome instead of scroll with a mouse. At least that’s what someone with more knowledge told me.
Another thing I can not get my head around is is that in my Freeway document in the smallest media size my div’s left and right padding are 5px.
But when I check online on a mobile, in the browser it actually is 20px. When I check in the inspector, this also says 20px.
Octodriple checked this in Freeway but this really is 5px so this I need to work on a bit more.
ps the image on he front page is served by a cms that is in testing so it is correct this breaks out of the div.
Hi Dave. Code indeed says this, but when you check in the browser and change the size of the browser to the smallest possible, you see otherwise.
I just checked, but what I see I do not know if this is true or how to change.
When I look with the inspector, I see that the 5px padding correctly is applied to the main-content-div when the size is 600px or less.
But when I check the head of the html code, I see the stylesheet with 5px padding is applied before the 20px. Because of cascading, the 20px overrules the 5px instead the other way around.
Did I do something wrong here? Can I make changes so the order of stylesheets applied is changed?
Glad you got the gist and thanks for your warm comments (should borrow them for advertising purposes).
Whatsoever - I had a look into it this morning and didn’t found any issue. At smallest breakpoint, padding is 5px in both - browser and devices (unfortunately I haven’t got a real one so Xcode Simulation):
Allow me a footnote:
Go into your Font-Set dialogue and remove the semicolon after the ‘Lato’ font-family. Freeway is adding it automatically and you end up in double-semicolon.
Hi Dave. Code indeed says this, but when you check in the browser and change the size of the browser to the smallest possible, you see otherwise.
I just checked, but what I see I do not know if this is true or how to change.
When I look with the inspector, I see that the 5px padding correctly is applied to the main-content-div when the size is 600px or less.
But when I check the head of the html code, I see the stylesheet with 5px padding is applied before the 20px. Because of cascading, the 20px overrules the 5px instead the other way around.
Did I do something wrong here? Can I make changes so the order of stylesheets applied is changed?
Hm - what browser do you use? Or do I miss something fundamental here? The “top” rules, such as here:
First of all, thanks for checking out. It looks like I’m having difficulties explaining correctly.
But when I check on my Mac with Chrome or Safari and on my iPhone using Chrome or Safari there is an issue. The same on Android. Please see screenshot below.
In Freeway on the three breaking points, I have different padding applied (20, 10 and 5px).
In my browser, when I resize the screen, the padding on my main-content div remains 20px.
Can’t help myself, but I tend to say it has something to do with Master/Child relation. The #content-main is a master-object but as well part of the index.css - so a child object, too.
I’m so unsure to recommend, but make it either - or.
For me, only “exactly the same content”-items are worth placing them onto the master - header (navigation) or a footer (disclaimer, legal stuff …) e.g.
All content-related stuff is (starting by #TheSection) individual, placed as child-items (even if they differ in just one word) into the child-page (for some good reasons).
I took this to the max and applied Master items until the before last item. The content-div had Master settings, the WebYep action item in the div did not have Master settings applied to it because, in my opinion, this is the actual item that is different.
But apparently this is one level too far.
So now the padding is honored and the semicolon in the font set is gone.
I wasn’t happy before, but now I know that at least 80% was due to the lack of knowledge. Now I’m happy again
My advise to everyone struggling is to follow Thomas’s paid screencasts. They are the best!
and thanks for your warm comments (should borrow them for advertising purposes).