Jump to content

jack0657

Member
  • Posts

    4
  • Joined

  • Last visited

jack0657's Achievements

  1. Thank you!!!!! Seems to have solved the problem. Do you know how I might create more of a space/gap between the image and the heading on mobile? https://www.itsalllegalbaby.com/alb-library
  2. Hi. Thanks for your help. The specific page is https://www.itsalllegalbaby.com/alb-library - but you need to view it via mobile to see the issue.
  3. Hi, I have to refresh my website on a mobile to display images on summary squarespace - they don't show on first load, any advice to solve this would be great 🙏 (works fine on desktop). I have used CSS to make the image in summary block of a blog larger on mobile display, here is all my summary block code: .summary-header-text { font-size: 25px; font-weight: bold; } .summary-metadata-item--cats a { background-color: black; color: white; text-decoration: none; padding: 5px 10px; margin-right: 5px; border-radius: 0px; display: inline-block; margin-bottom: 5px; } .blog-meta-item--categories a { background-color: black; color: white !important; text-decoration: none; padding: 5px 10px; margin-right: 5px; border-radius: 0px; display: inline-block; margin-bottom: 5px; } @media screen and (max-width:767px) { body#collection-65b0437eb6958532f041c98f .summary-item, body.alb-library .summary-item { display: flex !important; flex-direction: column; justify-content: center !important; align-items: center !important; } body#collection-65b0437eb6958532f041c98f .summary-v2-block .summary-thumbnail-outer-container, body.alb-library .summary-v2-block .summary-thumbnail-outer-container { float: none !important; width: 108% !important; margin: 0 auto; padding: 0; } body#collection-65b0437eb6958532f041c98f .summary-thumbnail-outer-container img, body.alb-library .summary-thumbnail-outer-container img { width: 100% !important; height: auto !important; display: block; margin: 0 auto; } body#collection-65b0437eb6958532f041c98f .sqs-gallery-design-list .sqs-gallery-design-list-slide:not(.no-image) .sqs-gallery-meta-container, body.alb-library .sqs-gallery-design-list .sqs-gallery-design-list-slide:not(.no-image) .sqs-gallery-meta-container { float: none !important; width: 100% !important; } } Thanks in advance.
  4. Hi, Can anyone tell me why this custom code isnt working? It is meant to say either open or closed depending on the time of day (business opening hours) but it permantly says closed: <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body { font-family: Arial, sans-serif; } h3 { color: #636363; } .pill-box { display: inline-block; background-color: #ffaa00; color: white; padding: 4px 8px; margin-left: 10px; border-radius: 20px; font-weight: bold; } .day { color: #ffaa00; } .time { color: #979797; } </style> </head> <body> <p>&nbsp;</p> <h3 style="text-align: center;">Opening Hours<span class="pill-box" id="opening-status">Open</span></h3> <p style="text-align: center;"><strong><span class="day">Monday:</span></strong> <span class="time" id="monday-time">4:00 PM - 12:00 AM</span></p> <p style="text-align: center;"><strong><span class="day">Tuesday:</span></strong> <span class="time" id="tuesday-time">9:00 AM - 7:00 PM</span></p> <p style="text-align: center;"><strong><span class="day">Wednesday:</span></strong> <span class="time" id="wednesday-time">9:00 AM - 11:00 AM</span></p> <p style="text-align: center;"><strong><span class="day">Thursday:</span></strong> <span class="time" id="thursday-time">4:00 PM - 12:00 AM</span></p> <p style="text-align: center;"><strong><span class="day">Friday:</span></strong> <span class="time" id="friday-time">12:00 PM - 12:00 AM</span></p> <p style="text-align: center;"><strong><span class="day">Saturday:</span></strong> <span class="time" id="saturday-time">6:00 PM - 11:00 PM</span></p> <p style="text-align: center;"><strong><span class="day">Sunday:</span></strong> <span class="time" id="sunday-time">12:00 PM - 11:00 PM</span></p> <script type="text/javascript"> // Function to check if the business is open based on the current time function isOpenNow() { const currentTime = new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' }); const openingHours = { monday: '16:00 - 00:00', tuesday: '9:00 - 19:00', wednesday: '9:00 - 11:00', thursday: '16:00 - 00:00', friday: '12:00 - 00:00', saturday: '18:00 - 23:00', sunday: '12:00 - 23:00', }; const currentDay = new Date().toLocaleDateString('en-US', { weekday: 'long' }).toLowerCase(); const openingTime = openingHours[currentDay].split(' - ')[0]; const closingTime = openingHours[currentDay].split(' - ')[1]; return currentTime >= openingTime && currentTime <= closingTime; } // Function to update the opening status pill based on whether the business isopen or closed function updateOpeningStatus() { const pill = document.getElementById('opening-status'); const isOpen = isOpenNow(); pill.textContent = isOpen ? 'Open' : 'Closed'; pill.style.backgroundColor = isOpen ? '#ffaa00' : '#636363'; } // Call the updateOpeningStatus function initially to set the initial opening status updateOpeningStatus(); // Update the opening status every minute setInterval(updateOpeningStatus, 60000); </script> <p>&nbsp;</p> </body> </html>
×
×
  • 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.