7.1 - Increase Vertical Padding in Dropdown Menu

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>

21 hours ago, KarrieR said:

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>

You mean increase this vertical padding + increase button text size?

@tuanphan I know your a very giving and experienced expert here on SQSP, hope your getting paid!.  I have a question for the 7.1 sites.  I have tried all your previously mentioned code for desktop, and nothing is working.  I am trying to space out my sub-menus as well I'd like to add in the muted teal blue that is found on my home page.  
Here is my website www.bluebayfund.com

On 6/5/2024 at 2:35 AM, BlueBayCapital said:

@tuanphan I know your a very giving and experienced expert here on SQSP, hope your getting paid!.  I have a question for the 7.1 sites.  I have tried all your previously mentioned code for desktop, and nothing is working.  I am trying to space out my sub-menus as well I'd like to add in the muted teal blue that is found on my home page.  
Here is my website www.bluebayfund.com

All help on forum is free.

You can use this CSS code

.header-nav-folder-content>div {
    margin-top: 40px;
}

@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 */

      }

    }

On 6/11/2024 at 2:02 AM, KarrieR said:

@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 */

      }

    }

Can you share site url? I can check easier.

https://www.spicerhearing.com/hearing-aids

On 6/18/2024 at 3:02 AM, KarrieR said:

https://www.spicerhearing.com/hearing-aids

#1. With Set 1 button on mobile, use this code to Website Tools (under Not Linked) > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1715641044775_17453 button.button {
    font-size: 30px !important;
}
}

#2. Space

You mean space between buttons: Play Audio 1, Play Audio 2,..?

@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").