Andrew: Sorry for the trouble, but I’m stuck. I’m using “old” Foundation. (Here is the page: https://yankee-lake.org) Near the top of the page, contained in a Grummage 2Col stack, is a two-column blurb: left side is an html stack for the donation “thermometer”, and the right side has a Flexi Font stack, which contains a Header stack and Scribe stack. At desktop sizes and tablet landscape, all is well. But tablet portrait and mobile in all orientations either has overlapping content, loss of margins, or the column contents are skewed left or right.
Other than the html stack, I am using the same stacks lower down on the page and have great responsiveness to device size and orientation changes. The custom code in the html stack may be to blame here, but I can’t figure out what to do.
The html rendering is shoved all the way to the right (see pic below) , and I think that is part of the problem. (Although, that would not explain the lack of margins in the text of the 2nd column.)
There seemed to be a related issue in Feb 2019. I think I implemented your suggested custom CSS code from that topic, for Row 1, but it seemed to have no effect at all in all preview modes, so I probably didn’t get it right. (I have taken the CSS code out in my published version.)
I appreciate any insights you can give on how to solve this. Thank you in advance!
It it the “thermometer” that is not responsive. It has a fixed with of 400px and so once the column that it is inside becomes narrower than 400px (+ padding / margins) then it just overflows and gets covered by the contents of the second column.
All you need to do is to ensure that your column does not go below 400px plus the padding / margins that you have applied (which is quite a lot) and then it will not overflow.
In other words, I think you just need to stack the columns a lot earlier. With the padding etc that you have at the moment, that means stacking the columns below ~925px.
The alternative is that you re-write the thermometer so that it is responsive.
@tav: Thank you! I played around with this for a while. I squoze the white space out of the code and, while it fit all the screen sizes at that point, I didn’t like the look. Then, I eliminated the visibility of all the container elements so that the gauge and its elements just floated on the page. Perfect! I am using the item on two sites (one for the lake community, the other for the non-profit working to buy the land): yankee-lake.org and RidgetopLakesConservancy.org – the element works very well on both. EXCEPT in landscape mode for the iPhone SE model, the 2nd column (text only) overflows into the follow-on text, like this:
I don’t own an iPhone SE, so I cannot test this on the real device – The anomalous behavior may not happen IRL. I don’t think this issue is related to the html code for the donation thermometer, and might be settings for column 2 in the Grummage 2Col stack. I do have V-Center turned on generally, but removed for the small (480px) screen. And, since the SE model works in portrait (narrowest), I don’t think it is that. Do you have any suggestions for me to try?
