Jump to content

KwameAndCo

Circle Member
  • Posts

    1,571
  • Joined

  • Last visited

  • Days Won

    19

Posts posted by KwameAndCo

  1. Seems like you've solved it using an ::after element?

    You may wish to consider automating the numbering fo make it a bit more future proof. Saves you CSS and doesn't break if you change the link like you curently have it - so much less maintenance.

    I think I wrote a snippet for it previously that I was going to put up for free on my plugin store. Shall I tag you if I find it?

  2. 17 hours ago, ThisWayToFabulous said:

    @KwameAndCo also - to clarify i do NOT want it to look like this on desktop, ONLY on mobile. 

     

    Ah I thought you'd have a media query already.

    /*Squareskills - Mobile Slideshow Caption*/
    
    @media (min-width: YOURBREAKPOINT) {
      
      #YourSectionID {
        li.slide.list-item {
          flex-direction: column;
        }
        .slide-media-container {
          position: relative!important;
          height: auto!important;
          aspect-ratio: 3 / 2; //select your own Aspect Ratio here
        }
        .slide-content.list-item-card-background.list-item-rich-animation {
          margin: 0!important;
          position: relative;
          width: 100%!important;
          flex: 1; //remove if you don't want full-height captions
        }
        .list-item-content__description p {
          font-size: YOURSIZE; //set your font size
        }
      }
    }

    I can't see the page anymore but you can just target the text with that last selector. You might need to use !important.

  3. You're going to struggle a bit due to the very different lengths of the testimonials, so you'll need to consider tweaking based on that.

    Anyway, this will create a layout where the image is stacked on 

    /*Squareskills - Mobile Slideshow Caption*/
    #YourSectionID {
      li.slide.list-item {
        flex-direction: column;
    }
      .slide-media-container {
        position: relative!important;
        height: auto!important;
        aspect-ratio: 3 / 2; //select your own Aspect Ratio here
      }
      .slide-content.list-item-card-background.list-item-rich-animation {
        margin: 0!important;
        position: relative;
        width: 100%!important;
        flex: 1; //remove if you don't want full-height captions
      }
    }

    However, if you try to ensure all images have the same aspect ratio you'll get this (excuse the poor cropping) where there is empty space. You can use the "flex: 1" to turn that section blue (in your case) but it'll still be empty space to consider.

    image.thumb.png.b8605549ebc859ce0f413e558dd537cb.pngimage.thumb.png.30eb7a9fa8a41d55f539fe2e1c471761.png

  4. Here

    /*Squareskills - Summay Block Hover Titles*/
    //target page
    #collection-5cbc83a4419202c35e7506e7 {
    
    .summary-title {
        position: absolute;
        inset: 0;
        z-index: 999;
        display: flex;
        justify-content: center;
        align-items: center;
    	opacity: 1;	
    	transition: opacity .3s ease; //adjust timing to your liking
    	}
    summary-item:hover .summary-title {
        opacity: 1;
    
    	}
    }

    I included a transition to fade the text in/out to avoid jerkiness.

    Note: To avoid this being site wide I've targeted only the page you would like.

    You can alternatively target other pages via their collection ID or target specific summary blocks with their block ID.

  5. On 9/23/2021 at 2:01 PM, Brent_Dickens said:

    I find it particularly challenging in New Zealand as most stock images are American and you easily tell, we just don't look like that here. I often find Unsplash has a wider international range of photos photos that often feel less stock, the downside is I often see an image and recognise it from Unsplash.

     

    Lack of diversity is really bad. I use Pexels a lot too.

  6. Not a dropdown but SQSPThemes has a plugin called AccoTabs that allows you to change sections with the click of a button (tabs). 

    I believe SQSMods also has sometihng similar too via their "Magic Drop" plugin which might be more what you want?

    You'd just need 3 separate sections with different forms and it'd handle this.

    Alternatively, I did a custom plugin for a client here that works more as a switcher. Haven't packaged it for sale yet but it's another approach.

     

    But Magic Drop is probably the best choice for a dropdown.

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