Spacing issue difference between break points?

Question
1

Greetings!

First i have to say this app is AMAZING! Why anyone would every wordpress with Sparkle around? No idea! It’s has been awesome to work with - kudos!

Now, my question. I am having spacing issues with the “mobile” size. Here is my present experiment. It is a bit rough around the edges as its still very much under construction.

www.lakelandcarbondale.com/test

the first carosel image points to the page “hard questions” which has ALOT of text, and as a result is quite long. It is presently my only issue. I built it first at the 960 size and then adjusted it for the phone shape (i am assuming this is the correct approach?). However, while everything presents well at 960. When i go to the phone size, the vertical spacing of a lot of the text and images is not what i see in sparkle. To get the present view on the phone, in sparkle the text boxes are actually over lapping by as much as 4 inches (on the screen). What have i done wrong?

Thanks!
Scott

2

@safoster71, yes Sparkle is amazing! :slight_smile:

What you are seeing is what Duncan explained to me as a rounding-off calculation. Apple Safari, after several years still hasn’t corrected the issue!!! :frowning: All the other browsers do not round off the line-height calculation so if you were to view it on say Firefox you wouldn’t see the issue.

There are two ways you can go about this…

  • reduce your text box heights and have several of them on the page instead of 1 long one
  • open Settings / Miscellaneous / Mobile-Auto Scaling and untick it
3

Hello.

It seems that you have been working on the site. I don’t see any text overlaps anymore. Tested with Android and Chrome, and iMac Response Mode.

Suggestion: make the top header logo a little less transparent.

And: who reads this huge amount of text? Maybe you could redo these “Hard Questions” in the style of a FAQ page and use scroll locations. So first all questions and further down the answers.

A blog would also be a good idea. That would improve the structure a lot.

Mr. F.

4

Disabling Mobile-Auto Scaling solved the problem (text overlap).