Jump to content

Nondys

Circle Member
  • Posts

    76
  • Joined

  • Last visited

Posts posted by Nondys

  1.  

    How do I create double borders for this image shape on Desktop and Mobile? See mockup image example attached for reference.

    https://hawaiiadventureportraits.squarespace.com/
    Password: hawaii

     

    Here is the CSS I have so far but I can't figure it out. If someone could help me that would be wonderful! 🙏🏻

     

    section[data-section-id="659cedc2f4549d78dea30dda"] {
      .fluid-image-container.sqs-image-content  {
        border: 2px solid @gold !important;
        overflow:visible!imporant;
      padding: 0% !important;
      }
    }

    MOCKUP - Image Border Offset for Images CSS.png

  2. Site URL: https://kismetphotographybyloryn.squarespace.com

     

    Hello,

    I was wondering how I can use any image on a website to create a 'back to top' effect. I don't want the image to be fixed on the page. I just want to be able to click on the image and have it scroll to the top of the page.

    Here is my example.

    https://kismetphotographybyloryn.squarespace.com

    password: kismet

     

    I have a To Top image on my footer, and I want to make it scroll to the top of my website. How do I do that? I found a ton of 'floating back to top button' tutorials, and I know how to do that, I want this particular image to stay on the bottom of my footer and NOT be fixed/sticky.

    Thanks so much in advanced! 🙂

     

  3. @brandon This worked really well as well! Although I have a question... I added a custom color to the background of my mobile information bar, but I see that there is a bit of space underneath of the mobile information bar that I'd like to get rid of. 

    I added an Image of my mobile information bar below for reference, and circled the white space I'm talking about. That white space is a bit annoying and it only appears when scrolling up the page, when you scroll down the page it's not there.

    Here is my client's website for reference: moffittsmermaids.com

    IMG_FA7764B21DC9-1.jpeg

  4. Site URL: https://www.moffittsmermaids.com/packages

     

    Hello! I was hoping someone would be able to help me disable the time on an event calendar on hover? I was able to hide the time on the calendar but when you hover over the date it still shows up.

    I'm not sure how to find the right code when I inspect the page since when I hover over the event day the inspect tool doesn't really work... not on hover anyway.

    Here is an image of my calendar now. 

    How do I hide the time of ALL events on Hover?

     

    You can view this page at moffittsmermaids.com/packages

     

    Thank you so much!

    Screen Shot 2021-07-23 at 10.25.15 PM.png

  5. This is so awesome! @tuanphan I would so appriecate your help here! I've been trying to figure this our for the life of me! let's say I wanted a Summary Block to consist of 2 rows of 2 photos on mobile, and still have the ability to use the arrow to scroll to see more images.

    So it will basically display 4 images at a time on Mobile.

    I found a code that allows my Summary block to stack in two columns and show all images on mobile, but it'd like it to stack two columns and show only 4 images at a time, with the option to scroll through to see the next set of 4 images. So scrolling by 4 at a time.

     

    Code I am using found at: https://www.rebeccagracedesigns.com/blog/summary-two-columns-mobile

    SEE IMAGE ATTACHED FOR EXMAMPLE

    @media only screen and (max-width: 640px) {
    .summary-item-list {
    display: flex;
    flex-wrap: wrap;
    }
    .summary-item {
    width: 45% !important;
    margin: 4vw 2vw !important;
    }
    }

    Screen Shot 2021-06-25 at 2.15.29 PM.png

  6. Site URL: https://fulltimeinfluencer.squarespace.com/fti/

    Hello,

     

    How do I create a Dotted Border, with only 3 Dots and move them to the Upper Left corner?

     

    I really want to step away from using images on Squarespace and start using CSS more. With that being said I created an image show below (the first image) that has 3 gray DOTS on the upper left hand corner, but that is an image and I'd like to do the exact same using CSS.

    I was able to CSS a text box with the exact same design (second image), but I don't know how to add these dots with CSS.

     

    Here is the code I used to achieve the same style as the image.

     

    #block-yui_3_17_2_1_1624577531411_181125
    {
    border: solid 1px black;
    padding: 10vh;
    margin: 0 auto;
    border-radius: 20px;
    background-color: white;
    filter: drop-shadow(-10px 0px 0px #B97C78)
    }

     

     

    Screen Shot 2021-06-24 at 2.34.40 PM.png

  7. Site URL: https://lindyglow.squarespace.com/

     

    Hello,

    I'm hoping someone can help me figure out how to change the color of the collage block. I know you can change it in the style editor, but I would like to change it through CSS.

    I have two collage blocks on my client's site and I'd like one of them to have a different colored background.

    I'm trying to find the code to target it. Here's what I was able to find and come up with: I can't seem to figure out how to put them in order and target that collage block to change its text box color.

    .image-card-wrapper
    .image-card sqs-dynamic-text-container
    .image-title-wrapper
    .image-title .sqs-dynamic-text

     

    See collage block towards the bottom, I'd like the color to be white so that it doesn't blend in with the pink background.
    https://lindyglow.squarespace.com/services 
    Password: glow

  8. Site URL: http://aretiartseed.com

     

    Hello. I am having issues with a client's website in how to get rid of negative white space on the right side on Mobile view.

    I coded graphics on overlapping sections and have it displayed on desktop but hidden on mobile, however when you view the site on mobile you had scroll to the right and see all the extra white space.

    Is there a way to disable or hide all the white space?

    See picture for reference.

    Thank you so much for your help in advanced!

    Screen Shot 2020-07-19 at 11.43.58 AM.png

  9.  

    I have a question about this code. So after breaking it down I came up with this code below, but I want to change the color of the background and text of the calendar ON HOVER. As you can see in my photo below, when my mouse is on hover the background is grey and the text is white. It's really hard to see. What code can I add to target those two areas.

     

    CODE I USED FOR THIS IMAGE:


    //background color//
    .yui3-squarespacecalendar .yui3-calendar-pane { padding-top: 10px;  padding-bottom: 10px; background: white !important;
      filter: opacity(80%);
      border: 0px solid #ffffff;
    }

    //today calendar color//
    .yui3-squarespacecalendar .today{ color: #ff3333 !important; }


    //event date colors//
    .yui3-squarespacecalendar .compact-layout .yui3-calendar-day.has-event{ background: #171828 !important; 
    }

    ///change all date text color//
    td.has-event * {
        color: white !important;
    }

    //calendar dates and border square//
    .yui3-squarespacecalendar .compact-layout .yui3-calendar-day.has-event, .yui3-squarespacecalendar  { color: #000000 !important; }     

    // Calendar Month Year Styling //
    .yui3-calendar-header-label {
      font-size:16px;
      color:#E2AC3F;
      letter-spacing:0.2em;
      }

    Calendar.png

  10. Site URL: https://www.nondysdesigns.com/

     

    Hey guys... I've been trying to find articles on How to embed or upload a video to Squarespace as a Video Block (not banner image) but to disable auto loop/autoplay and also take away the play, pause, hover, etc,. functions.

    Basically, I want it to be like a gif, but not using a gif file because gifs are large files that I don't want on the website. I want to use Links from Youtube or Vimeo to create these autoplaying type gifs.

    I found what it seems to be a great blog post on how to do it here https://www.justinwyne.com/thoughts/2018/5/15/how-to-embed-borderless-autoplaying-looping-videos-on-squarespace

    But the only thing is that I don't think there's enough steps for me to follow along. I have to download a third party application and host my URL somewhere... It all seems supppperrrrr complicated and I'm wondering if there's another way to do this?

     

    I found another post here https://www.rebeccagracedesigns.com/blog/youtube-autoplay-and-loop that is really helpful and is an autoplay video, but the video has the play and pause type of functions that I don't want, also the sound isn't automatically playing either, you have to click on the sound to hear it.

     

     

    Also something to keep in mind, i'd like to have the end result to be a portrait photo and not in landscape.

     

    Thank you in advanced!

     

×
×
  • 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.