KarrieR
-
Posts
12 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by KarrieR
-
7.1 - Increase Vertical Padding in Dropdown Menu
KarrieR replied to JenIJW's topic in Customize with code
@tuanphan I think we are still talking about two different things. Ignore the buttons--they look the way I want them to look. It's the spacing between items in my drop-down menu that I want to change (i.e. between "Set 1" and "Set 2").
-
7.1 - Increase Vertical Padding in Dropdown Menu
KarrieR replied to JenIJW's topic in Customize with code
https://www.spicerhearing.com/hearing-aids -
7.1 - Increase Vertical Padding in Dropdown Menu
KarrieR replied to JenIJW's topic in Customize with code
@tuanphan I wasn’t sure how to respond to your questions directly (I didn’t see a “reply” option). To clarify, I was trying to: increase the size of the “Set 1” button (my code wasn’t working in the mobile version), and increase the spacing of the menu items (i.e., between “Set 1” and “Set 2”) I resolved the first problem by adding the, “For mobile devices” section of code below. However, I am still unable to change the spacing between items in my dropdown menu (“Set 1” and “Set 2”). I’ve tried adding padding, changing the line height, and changing the margins, but nothing seems to work. Thoughts? Below is the relevant section of my code: <!DOCTYPE html> <html> <head> <style> /* This is for the dropdown menu items */ #setSelect option { background-color: #FFFFFF; color: #020330; text-align: left; letter-spacing: .5px; font-size: 18px; border-radius: 10px; /* Add this line for rounded corners */ font-weight: bold; /* Make the text bold */ } /* This is for the selected dropdown menu item */ #setSelect { background-color: #FFFFFF; border: 4px solid; border-color: #020330; color: #020330; padding: 8px 15px; /* (desktop only) button height, width */ text-align: center; letter-spacing: .5px; font-size: 18px; font-weight: bold; margin: 4px 2px; /* x down, x in from left margin */ margin-bottom: 12px; /* space between drop-down menu and buttons */ border-radius: 10px; /* Corner rounding */ font-weight: bold; /* Make the text bold */ } /* For mobile devices */ @media only screen and (max-width: 600px) { #setSelect { height: 47px; /* Adjust button height for mobile */ } } -
7.1 - Increase Vertical Padding in Dropdown Menu
KarrieR replied to JenIJW's topic in Customize with code
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> -
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.
-
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; }
-
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.
-
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).
-
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?
-
It's on the "About" page.
-
https://caper-amethyst-h642.squarespace.com/config/pages/website-tools/custom-css
-
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?
