sstory Posted June 10 Share Posted June 10 (edited) Hello! I have 2 form fields that I would like to have side-by-side and make them different widths. Can anyone help me accomplish this? Thank you kindly! Susanne Edited June 10 by sstory Added screenshot Link to comment
Lesum Posted June 10 Share Posted June 10 @sstory Hi! Can you share your site URL? If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
sstory Posted June 10 Author Share Posted June 10 Hi! I haven't published it yet - does this link work for you? https://smilodon-marigold-p748.squarespace.com/splash?p Thank you SO much in advance! Link to comment
Lesum Posted June 10 Share Posted June 10 @sstory It's showing the site is private. You can publish the site site with a password under Settings > Website > Site Availability > Password Protected. If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Solution Lesum Posted June 10 Solution Share Posted June 10 (edited) @sstory Add the code under Website > Pages > Website Tools > Custom CSS @media only screen and (min-width: 768px) { #collection-6664a1e54d31851300010987 { .field-list { display: flex !important; flex-wrap: wrap !important; } .form-item.field.email { width: 60% !important; } .form-item.field.number { width: 36% !important; } .form-item.field.email { margin-right: 4% !important; } } } Edited June 10 by Lesum If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Lesum Posted June 10 Share Posted June 10 11 minutes ago, sstory said: Were you able to see it? Yes, I just posted a solution. Let me know if it works. Thanks! sstory 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
sstory Posted June 11 Author Share Posted June 11 Hi again! May I ask another question about background images? Link to comment
Lesum Posted June 11 Share Posted June 11 @sstory Sure! If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
sstory Posted June 11 Author Share Posted June 11 Thank you! On that same page: https://www.jackiekellogg.com/ Password is muffin Is it possible to change out the image on mobile? Thank you! Link to comment
Lesum Posted June 11 Share Posted June 11 @sstory Yes, it can be done with some custom code. You can add this code under Custom CSS panel: @media screen and (max-width:767px) { section[data-section-id="6664a1e54d3185130001098a"] .section-background img { visibility: hidden !important; } section[data-section-id="6664a1e54d3185130001098a"] .section-background { background-image: url("replace-with-your-image-url") !important; background-size: cover; background-repeat: no-repeat; background-position: center center; } } You've to add your image URL in the code where I wrote 'replace-with-your-image-url'. If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
sstory Posted June 11 Author Share Posted June 11 You're awesome, thank you! I will be working on this site for a few days and will likely need more help. Would it be ok if on the days you help me, I buy you a cup (or several cups) of coffee at the end of the day instead of one at a time for each help? Link to comment
sstory Posted June 11 Author Share Posted June 11 @Lesum thank you! I'll make a list so I am not sending them one at a time 🙂 Thank you! Link to comment
sstory Posted June 11 Author Share Posted June 11 @Lesum For the mobile version of /splash, I'd like to show the header but not on the desktop version. Is that possible? For /home is it possible to move the navigation below the hero image but keep it at the top for the rest of the site? Link to comment
Lesum Posted June 11 Share Posted June 11 @sstory Yes, both can be done. Have you already created the splash page? I can share the solutions later in the evening today. If you have anything else to add, please feel free to do so. Thank you! If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
sstory Posted June 11 Author Share Posted June 11 Wonderful, thank you! Yes, the splash page is set as the home page: https://www.jackiekellogg.com/splash Link to comment
Lesum Posted June 11 Share Posted June 11 (edited) @sstory Here's the code to display the header on the splash page only on mobile: @media screen and (min-width: 768px) { #collection-6664a1e54d31851300010987 #header { display: none !important; } } Edited June 11 by Lesum If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Lesum Posted June 11 Share Posted June 11 @sstory Could you please add a header to your site? I need it for testing my code. If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
sstory Posted June 11 Author Share Posted June 11 Sure thing! I added it to the /home page Link to comment
sstory Posted June 11 Author Share Posted June 11 Regarding forms, is it possible to add and validate a zip code field? Link to comment
Lesum Posted June 11 Share Posted June 11 10 minutes ago, sstory said: Regarding forms, is it possible to add and validate a zip code field? @sstory I think it's possible. However, it would take some time and a lot of code to come up with a solution. I worked on something similar a while ago, validating user input for zip codes, but it was not for a form. If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Lesum Posted June 11 Share Posted June 11 @sstory To move the navigation below the hero section only on homepage, first add this code under Website > Pages > Website Tools > Custom CSS: @media only screen and (min-width: 768px) { #collection-6664a29b17640c6f65ee7f1f:not(.sqs-edit-mode,.is-expanded) #header { position: sticky !important; z-index: 10000; top: 0; display: none; } #collection-6664a29b17640c6f65ee7f1f:not(.sqs-edit-mode) main .page-section:first-child { min-height: calc(100vh - 68px)!important; } #collection-6664a29b17640c6f65ee7f1f:not(.sqs-edit-mode) main .page-section:first-child + #header { display: block; } } Then the next block of code under Website > Pages > Website Tools > Code Injection > Header: <script> document.addEventListener("DOMContentLoaded",function() { if (window.self === window.top) { const header = document.getElementById('header'); const firstSection = document.querySelector('.page-section:first-child'); firstSection.after(header); } }); </script> If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? 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