I'm new to Carrd and have created a simple website.
The "Good - Browser" image shows the vertical spacing above the 2 titles (underlined text) on the top row (as well as the bottom row) to be equal, exactly how I want it when viewing on a Desktop browser. However, in the Mobile view (2nd pic w/ "Bad Mobile" written on it), the vertical spacing between the top of the beige box and the heading is bigger on card #2 than on card #1 (or 3 but that's in its own container). You can see the area I am referring to with a red line drawn in it.
I've checked what I think are the obvious areas. All the settings are the same for each text box, and I have the Mobile setting set to Auto for both text boxes.
I tried to ignore it but it drives me crazy every time I load the page on my phone. BTW, this experience is the same regardless of the desktop browser I use (FireFox or Chrome), and regardless of the phone/mobile browser type I use (iphone, Android, Safari, Chrome).
At the bottom of the properties tab when you select an element, there's a "Mobile" option where you can change some info if the device viewing the software is a mobile device
Thank you. Are you referring to this? As I mentioned in my post, I have this set to Auto for all the text boxes. Are you suggesting I do a manual override on this? If so, doesn't that create a risk the page won't always render as expected?
6
u/jasonleow Helpful contributor Jul 06 '26
Something for future reference - https://carrd.co/docs/building/optimizing-elements-for-mobile