Jump to content

JasmineFoster

Member
  • Posts

    25
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Hello @LoftyDevs-Website-Designer I'm just following up to see if you noticed anything that would help me with the issue here www.drjrf.com/experience?
  2. Hello, that is the link to my other site for my business. The link to the website that has the mobile issue is www.drjrf.com/experience
  3. Hello, I have a professional portfolio site https://www.drjrf.com/experience. The Experience page crashes on mobile but works perfectly fine on desktop. When visiting the Experience page, either by clicking on the menu link or the the button on my homepage (see video below), the page loads for a few seconds, reloads, and then crashes. This error only seems to happen on the Chrome mobile browser/app. I've tried it via Safari and it works fine (for now). Any ideas on what could be causing the glitch and how to resolve it? drjrf screen recording - mobile glitch.MP4
  4. Glad I could help! Let me know how it works out 🙂
  5. Site/page url: https://www.theenrichededucator.com/workshops/in-person-on-site-training Hello, I offer add-on services to my products (services). One add-on service I provide is "in-person/on-site training". I travel for my consulting services, so I would like to be able to automatically determine the additional cost for potential clients I'd serve outside of the Atlanta, GA area. Ideally, a visitor would be able to enter their zip code and an updated calculated cost of the add-on service would appear and they can add it to their cart (named "registration" on my site). I've looked around for possible solutions and I think I might need to go with some type of API (such as this one). I imagine this would work something like this: Visitor enters zip code The API would calculate the distance between my zip code and theirs, then pass the distance back to my site. Use the distance to calculate the cost based on my table (pictured in screenshot below) Distance displays on the page The new cost updates and displays on the page Client adds service (with the updated/correct cost) to cart/registration I'm not sure where to start or how to get this going and would appreciate any help.
  6. Correct! I think I figured it out for desktop view. On mobile it is still looks horrible, so I've replaced it with a different version. Here is the link to the page (see the "core values" section). https://www.theenrichededucator.com/aboutus If you can help me figure out how to keep the circle images on the left from changing positions when the screen adjusts to a smaller width, that would be really helpful! Ideally, I'd like to keep the images displayed 2X2 regardless of the screen width. Here's my updated code: //Core Values Module - desktop// #block-yui_3_17_2_1_1709813932004_17418 { //description formatting .sqs-gallery-block-slideshow .meta { background-color: transparent!important; pointer-events: none; width:200%!important; overflow: visible !important; display:block!important } .sqs-gallery-block-slideshow .meta-inside { padding: 0px!important; } .sqs-gallery-block-slideshow .meta .meta-description, .sqs-gallery-block-slideshow .meta .meta-description p{ color:black!important; font-size: 18px!important; line-height:1.2em!important } .meta-title { color:#990000!important; font-family: 'Violine'!important; font-size: 30px; line-height:1.2em } //make description non-click .sqs-gallery-block-slideshow { pointer-events: none; } //main image .sqs-gallery-design-stacked-slide img{ opacity:0!important } //gallery container position and style .sqs-gallery-design-stacked { display: flex; height:300px!important; background-color:white!important; } .sqs-gallery-design-stacked-slide { order: 1; width: 100%; height: 100%; margin-left: 40%; } .sqs-wrapper { position:static; overflow:visible!important; display: flex; flex-wrap: wrap; margin-left: 24px; } //thumbnails positioning .sqs-gallery-design-strip { margin-left: 0; max-width: 70%; position: absolute; height: 100%; top: 0 !important; overflow:visible!important; display: flex; flex-wrap: wrap; } .sqs-gallery-design-strip-slide { margin-left: 0; width: 100%; } // thumbnails style .sqs-gallery-design-strip-slide { opacity: 1!important; margin-right: 10px; margin-left: 10px; border: 5px solid white!important; border-radius: 50%; } .sqs-gallery-design-strip-slide:hover { background-color:#e7e6e6!important } .sqs-gallery-design-strip-slide.sqs-active-slide { background-color:#e7e6e6!important; border: 5px solid black!important; border-radius: 50%; padding: 2px!important } }
  7. Hi, I know I am very delayed in my response, but here is the code I am using. Since my original post, I have made some additional updates to my navigation bar. I've pasted my updated code below. I hope this helps! //NAVIGATION BAR// // Hide index link from nav bar // a[href="/sip-the-tee-1"]{pointer-events: none;}; a[href="/about-nav"]{pointer-events: none;} a[href="/what-we-do-1"]{pointer-events: none;} //static floating header// .Header {border-bottom: 2px solid gray;} @media screen and (min-width: 768px) { .Header {position: fixed; z-index: 9999; width: 100%; top: 0px;} .Content-outer {margin-top: 100px;} } //--- Add a border between links: .Header-nav-folder a {border-bottom:1px dotted gray} //--- Increase the space between links: .Header-nav-folder a {padding-bottom:.5rem!important; } //--- give drop down list a shadow: .Header-nav-folder{box-shadow: 5px 5px 15px rgba(0,0,0,0.5)} .Header-nav-folder{background-color:white!important} //--- active link highlight---// .Header-nav-item {margin: 10px!important; padding: 5px!important;} .Header-nav-item:hover {border: 2px solid #990000!important;} .Header-nav-item.Header-nav-item--active {background: #990000!important; color: white!important} .Header-nav-folder-title.Header-nav-folder-title--active{ color: white!important; background-color: #990000; padding-left: 6px; padding-right: 5px; border: 4px solid #990000; margin-left: -5px!important; margin-right: -5px; margin-top: -2px;} //--- grey highlight folder link on hover---// .Header-nav-folder-item:hover {background-color: #e7e6e6!important}
  8. Hello, I am working on designing my gallery slideshow into somewhat of a "module" using some custom CSS. The goal is to have site visitors click on a thumbnail and see the description of the image. I have gotten pretty close to my desired outcome. Here's what I've done so far: Hid the main (big) image so only the thumbnails and image description are visible. Designed the image thumbnails and moved them to the left of the main (big) image. Designed the image description and moved it to the right of the thumbnails. But I am running into a hiccup; see below and attached screencast. When I first click on a thumbnail the description appears at the very top (beyond the margin actually). Then, when I click on that same thumbnail again (after clicking on a different thumbnail first) the description loads in the correct position (vertically centered with the thumbnails). How can I keep the image description from initially loading beyond the top margin? I want to be able to click on a thumbnail for the first time and the description appears vertically centered in the correct position. Here is my code: #block-yui_3_17_2_1_1709700216968_1936 { //hide main image .thumb-image { visibility:hidden; background-color:white!important; } // description .sqs-gallery-design-stacked-slide { z-index:1; padding-top:10px!important; padding-bottom: 10px!important; } .sqs-gallery-block-slideshow .meta { position: inherit!important; top: 0 !important; left: 50% !important; background-color: white!important; overflow: visible!important; min-width: 40% !important; max-width: 80px; margin-left: -75px!important; pointer-events: none; } .sqs-gallery-block-slideshow .meta .meta-description, .sqs-gallery-block-slideshow .meta .meta-description p{ color:black!important; font-size: 24px; line-height:1.2em } .meta-title { color:#990000!important; font-family: 'Violine'!important; font-size: 40px; line-height:2em } .sqs-gallery-block-slideshow { pointer-events: none; } // thumbnails look .sqs-gallery-design-strip-slide { opacity: 1!important; margin-right: 10px; margin-left: 10px; border: 5px solid white!important; border-radius: 50%; } .sqs-gallery-design-strip-slide:hover { background-color:#e7e6e6!important } .sqs-gallery-design-strip-slide.sqs-active-slide { background-color:#e7e6e6!important; border: 5px solid black!important; border-radius: 50%; padding: 2px!important } //thumbnails position .sqs-gallery-design-strip .sqs-wrapper { width: 200% !important; left: 50% !important; top:-75%!important; display: flex; flex-wrap: wrap; } .sqs-block .sqs-gallery-thumbnails .sqs-gallery-design-strip-slide { width: 20% !important; } .sqs-gallery-design-stacked { position: static; text-align: left; height: 100px !important; } .sqs-gallery-design-strip { overflow: visible !important; width:20%!important; z-index:9998!important; margin-bottom: 30px!important } } Here is the link the to screencast: https://www.loom.com/share/2d3037425e414b6db57690f9feb1e2c7?sid=085158a3-8a70-4bf6-839a-cd701598df2b Here is the attachment of the screencast: Screen Recording 2024-03-06 at 11.18.05 AM.mov
  9. Site URL: https://www.theenrichededucator.com/our-services Hi, I'm wondering if it is possible to hide/mask the anchor links url in the address bar ? I have a few anchor links throughout my site and when a visitor clicks on the anchor link to scroll to another page in the index, the url in the address bar changes to the anchor link's url. I'd like the address bar url to remain the same. For example, as seen in the screenshots below, on my services page, a visitor can click the "Coaching & Development" anchor link to scroll to that section. Once clicked, I'd like the url in the address bar to still say "https://www.theenrichededucator.com/our-services" and not "https://www.theenrichededucator.com/our-services#coaching-home" Picture 1. Hovering over the anchor link Picture 2. After clicking the anchor link
  10. Site URL: https://www.theenrichededucator.com/summer-intensive Hello, I have made my own page for a product (service) that I am offering: https://www.theenrichededucator.com/summer-intensive In the programming section, I've added a product block so that the client can register there instead of going to the original product page. The product block only has the price and register button shown -everything else is hidden via CSS or the native settings. Once clicking the "register" button my Custom Product Form pops up to gather registration details. I would like help with figuring out how to redirect the customer to the cart or to the checkout page after completing the Custom Product form and pressing "Register" at the bottom. I do not want to enable "express checkout" because it would be applied site-wide and I do not want this applied to other products I sell on my site. Is this possible to do with a script or some CSS?
  11. Yup! With a little perseverance and trial and error, I think I found out a solution that would look good on most devices (perhaps not landscape mobile or portrait tablets). I add the tags as meta data to the summary blocks and used a bit of code to make the "free" tags say "FREEBIE!" and then played around with the margins to cover the $0.00 price
  12. Hi @tuanphan I have this same wondering. I have a summary block of items but I'd like the items with the tag "free" to hide/replace the "$0.00" with the word "FREEBIE!". I've figure out how to do this on the actual product page but not for the summary block itself. The page is www.theenrichededucator.com/resources
  13. Thank you so much for trying. I also noticed after I applied your code, one of the featured products behaved the way I wanted it and the other did not. I will go through my CSS to see if I have something there affecting that block. I appreciate your help.
×
×
  • 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.