Jump to content

bryanb11

Member
  • Posts

    17
  • Joined

  • Last visited

Posts posted by bryanb11

  1. I have video thumbnails on my site for desktop but am trying to make the mobile fallback image display only for mobile devices. Right now the video loads on mobile and it looks low quality, so would prefer to only have the fallback static image show for mobile screens. And keep the video for desktop. Any help would be appreciated! 

    https://www.bryanbarnes.me/

     

  2. 5 hours ago, tuanphan said:

    Add to Design > Custom CSS

    
    /* Main links hover */
    .portfolio-hover-items-list:hover span.portfolio-hover-item-content {
        color: rgba(255,255,255,0.3);
    }
    .portfolio-hover-items-list:hover span.portfolio-hover-item-content:hover {
        color: rgba(255,255,255,1);
    }

     

    Thank you!! This works perfectly 

  3. 55 minutes ago, creedon said:

    This is pretty easily done.

    This can be done by playing with several parameters. The size of the image itself and/or the margins/padding around the images. Here I try the padding.

    Add the following to Design > Custom CSS.

    
    #collection-5fd3ef13c11a957e7ef68e4d .portfolio-grid-overlay {
    
      -ms-grid-columns: auto;
      grid-template-columns: auto;
      grid-column-gap: unset;
      
      }
    
    @media only screen and ( pointer: coarse ) and ( min-width: 1025px ), screen and ( min-width: 800px ) {
    
      #collection-5fd3ef13c11a957e7ef68e4d.tweak-portfolio-grid-overlay-width-inset .portfolio-grid-overlay {
      
        padding-left: 25vw;
        padding-right: 25vw;
        
        }
      }

    Let us know how it goes.

    Thomas! Your'e amazing, thank you for this! Works perfectly 

  4. On 1/6/2021 at 2:28 PM, creedon said:

    Please post the URL to the page where you are trying to achieve this effect.

    If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

    We can then take a look at your issue.

     Thanks! This is the site. https://www.bryanbarnes.me/

    What I am trying to achieve is a single column grid instead of the two column. Also, I am trying to control the width of the images once they are in a single column. When I tried it before, the width was too large and didn't look great. Thanks for your help! 

  5. On 9/5/2020 at 4:40 PM, creedon said:

     

    Assuming you are using one of the Grid (Overlay or Simple) Layouts for your Others Page, put the following in Design > Custom CSS. If you use a Layout other than one of the grids then this code won't work.

    
    /* 100% (auto) */
    
    /*insert Page collection id here]*/ [class^="portfolio-grid-"] {
    
      grid-template-columns: auto;
      
      }

    Replace /*insert Page collection id here*/ with the collection id for your Others Page.

    Do you know how to find the collection id for a Page? If not, let us know and we can help you.

    If you don't want the column to take up the whole page following are some variations.

    
    /* 75% */
    
    /*insert Page collection id here]*/ [class^="portfolio-grid-"] {
    
      grid-template-columns: repeat(8,auto);
      
      }
    
    /*insert Page collection id here]*/ [class^="portfolio-grid-"] .grid-item {
    
      grid-column: 2 / 8;
      
      }

     

    
    /* 50% */
    
    /*insert Page collection id here]*/ [class^="portfolio-grid-"] {
    
      grid-template-columns: repeat(4, auto);
      
      }
    
    /*insert Page collection id here]*/ [class^="portfolio-grid-"] .grid-item {
    
      grid-column: 2 / 4;
      
      }

    If you have the business plan then you can put the CSS in Page Settings > Advanced > PAGE HEADER CODE INJECTION.
     

    
    <style>
    
      /* 100% (auto) */
      
      [class^="portfolio-grid-"] {
      
        grid-template-columns: auto;
        
        }
        
      </style>

    It is basically the same as above just wrapped in a style tag and minus the collection id.

    The CSS uses CSS3 substring matching attribute selectors.

    Let us know how it goes.

    Hi Thomas, this code is exactly what I was looking for, thank you! Is there any way to adjust the width of the image images in the column once it is a single column? I'd like to make it more narrow. Thanks for 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.