I just recently published a website that uses the Foundry Stack. It is awesome, but there is one kink that I can’t figure out how to fix… The text in the paragraphs show up very narrow - showing like 1 or 2 words per line even though there is space for maybe 10 words or so. It displays the way it should on a computer, but something is not working for the cellphone display.
BTW, the responsive design is working great when displayed on cel phones for the column stacks that I used.
Here is the URL in case anyone is curious to take a peek.
Thank you for the help.
Adam will know better but … it seems to me that you have applied margin or padding that is then applied no matter the size of the screen. So, e.g., margins of 60px right and left look fine on bigger screens but seriously impact viewing experience on a phone. In these cases you don’t want to set margin/padding via the Container stack, but instead put a dedicated Margin stack inside your container. You can then set specific responsive margins. For a phone the margins or padding might be 0, on a desktop might be set to 60.
I hope this helps a bit. There might be better advice out there but this seems a reasonable first step.
@tveliz: Put differently the Container stack only applies generic margin/padding. The Margin stack is much more sensitive and versatile: different margin/padding settings possible for each of 3 different viewing experiences (desktop, tablet, phone).
Thank you mitchellm, this gives me something to explore. I’ll do some playing around and see if that takes care of things. Thank you for the quick response! Cheers, Ted
I haven’t looked in depth at your page, but it is very likely that the cause is just as @mitchellm has outlined.
Thank you very much for the guidance. I think I have enough insight to make it “good enough”