leighb

@tuanphan, thank you, that works nicely.

https://www.ancientcedarsreiki.ca/healing-services Unfortunately no, that function center aligns the cards, but on smaller displays they are still different sizes. The buttons and text on the cards is still too big on small screens as well. In the section below, some of the text ("contraindications") in the accordion becomes so large it gets cut off. I'm wondering if there is a way to limit how large the these elements become on smaller displays. Thanks for your advice @tuanphan.

Thanks for helping me @tuanphan! Is there CSS to keep the cards all the same size? So the top edge and bottom edges of each card aligns so that each card is the same size? I assume the padding around the responsive text in each card determines the card size. Because the text in each card is different, could we create a code that forces each card to expand to match the largest one? Or perhaps there's a way to control how big the responsive text gets? The buttons on each card also become strangely large to fit the responsive text, is there a way limit how large the text size can get for smaller screens? Thank you!

Oops! https://www.ancientcedarsreiki.ca/ Thank you!

I used a Squarespace standard list item section on my services page (and applied some CSS code to make it clickable). When I resize the display (for example on an ipad vertical), the cards appear different sizes and the buttons become massive. See attached image. Is there a way to have the cards align (or vertically stack like you would see on a cell phone) for tablet displays? I've looked through so many similar questions, but haven't found a piece of code that works for my site. On this same page, the accordion appears funny as well for the larger word "contraindications". The text all seems huge. What can I do to get it to fit the column? Thanks in advance for any help!

Thank you @tuanphan! That did the trick. Very much appreciated. 🙂

Hi @tuanphan thank you for pointing this out - do you have CSS to fix this image/text issue? As you mentioned there is a problem in tablet view. Thanks for your help.

Oh whoa! No it doesn't look good there. Yes, if there's some code for that - thank you for your help and keen eye @tuanphan! I didn't realize it looks different on a tablet vs. mobile.

Thank you - I'm on the right track now. Much appreciated. This is what I ended up with: //HEADER BUTTON// header#header a.btn { background: transparent; border: 2px solid #001510; color: #001510; font-size: 14px; }

I also want to make just the header navigation button to and "outline" style without changing the rest of the buttons. It would be nice to know the option for the pill-shaped outline style in case I like the look of that better. Thank you for your help! Here is my website: https://www.ancientcedarsreiki.ca/