Jump to content

KarrieR

Member
  • Posts

    9
  • Joined

  • Last visited

KarrieR's Achievements

  1. I don’t know if anyone is still monitoring this, but I’m running into two issues: 1) I have a dropdown menu on one of my pages (https://www.spicerhearing.com/hearing-aids), and I am able to resize the menu button using “padding”; however, this only works on the desktop version. How do I resize it for mobile too? 2) For both desktop and mobile, I want to increase the vertical spacing between items. I’ve tried increasing the line height, the padding, using transform: scale(2), and even adding “!important” after my code, and nothing seems to work. Thoughts? Here is a snippet of my code (note, to make this more concise, I’ve removed some lines of code below (e.g., font color), if I know they’re not the source of the problem): <style> /* This is for the dropdown menu items */ #setSelect option { transform: scale(2); text-align: left; font-size: 18px; border-radius: 8px; /* Add this line for rounded corners */ font-weight: bold; /* Make the text bold */ } </style> <select id="setSelect" onchange="changeSet()"> <option value="set1">Set 1</option> <option value="set2">Set 2</option> </select> <style> /* This is for the selected dropdown menu item */ #setSelect { border: 4px solid; padding: 10px 15px; /* (only works for desktop) button height, width */ text-align: center; display: inline-block; font-size: 18px; font-weight: bold; margin: 4px 2px; /* x down, x in from left margin */ margin-bottom: 14px; /* space between drop-down menu and buttons */ border-radius: 8px; /* Corner rounding */ font-weight: bold; /* Make the text bold */ } </style>
  2. OK, I figured that out too. If I remove the code for the color in CSS, I can edit the color of this section normally within Squarespace. Although, I'm not sure why the code above didn't work.
  3. Solve one problem, find another. So, I was able to get the font to update in this section, and I could change the font size, but the color is not updating. It looks like my code is right? @font-face { font-family: 'Caveat'; src: url(https://static1.squarespace.com/static/65d7ec114e68913073bb3de2/t/6644fc016beeaf1f4521b372/1715796993537/Caveat-SemiBold.ttf); } #block-yui_3_17_2_1_1715742598093_7611 { font-family: 'Caveat' !important; font-size: 30px; color: #0097b2; }
  4. However, I'm still not sure why I can't use any of the fonts that are native to Squarespace. Let me know if you have any thoughts on that.
  5. OK, I figured it out. The file wasn't loading when I dragged and dropped it into Squarespace, but when I navigated to it directly, it was able to load it. I also needed to extract it from the zipped file before Squarespace could find it (even though I was able to see the font in my folder structure and install it on my computer without unzipping it).
  6. I should just be able to drag and drop, correct? I tried again with the semi-bold version, and it didn't work either. Actually, the only reason all versions of this font are installed is because when one didn't work, I tried installing another. This font is showing up in my drop-down list in Word, so I assume that means these files are OK? Are none of them showing up on your end? Related, since this font is native to Squarespace, shouldn't I be able to remove the first section of the code (@face-font) and have the code still work?
  7. https://caper-amethyst-h642.squarespace.com/config/pages/website-tools/custom-css
  8. I feel like I've tried everything I can think of to get my font to change, but it's not working. Specifically, I initially tried to change all Paragraph 2s to the font 'Caveat'; however, when that didn't work, I tried changing a specific section of my code to the new font. This font exists within Squarespace, so I'm not sure why it isn't working; however, because it's not working, I installed it as a custom font, to see if that would resolve the issue, but it's still not working. My code is listed below: @font-face { font-family: 'Caveat'; src: url(https://static1.squarespace.com/static/65d7ec114e68913073bb3de2/t/6644cef58fe34e63d033e45e/1715785461708/Caveat-VariableFont_wght.ttf); } #block-yui_3_17_2_1_1715742598093_7611 { font-family: 'Caveat' !important; } Interestingly, if I replace 'Caveat' with another font that I installed 'Smooth Fantasy', it works. However, no other font that I've installed or that is native to Squarespace is working with this code. Thoughts?
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.