KarrieR Posted May 22 Share Posted May 22 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> Link to comment
tuanphan Posted May 23 Share Posted May 23 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
BlueBayCapital Posted June 4 Share Posted June 4 @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 Link to comment
tuanphan Posted June 6 Share Posted June 6 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; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
KarrieR Posted June 10 Share Posted June 10 @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 */ } } Link to comment
tuanphan Posted June 12 Share Posted June 12 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. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
KarrieR Posted June 17 Share Posted June 17 https://www.spicerhearing.com/hearing-aids Link to comment
tuanphan Posted June 19 Share Posted June 19 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,..? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
KarrieR Posted June 20 Share Posted June 20 (edited) @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"). Edited June 20 by KarrieR I missed a ")". Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment