Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'css-grid'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location

Found 1 result

  1. I am creating a custom code section on my home page and want to use css-grid to style it. Everything works fine except when I try to use the minmax function with fr units. This is a common way of having elements stretch evenly across a container but then stack when the window is resized and the min width (250) is reached. However this isn't working for me in Squarespace. Any thoughts on why? I'm using Chrome, so fr units and css-grid is compatible. grid-template-columns: reapeat(auto-fit, minmax(250px, 1fr); This seems to work, but it's obviously not what I want: grid-template-columns: reapeat(auto-fit, minmax(250px, 300px); Here is my full code: <div class="home-services-container"> <div class="service-card service1"> <h3> Creative<br /> Engagement </h3> </div> <div class="service-card service2"> <h3> Ideation + <br />Innovation </h3> </div> <div class="service-card service3"> <h3> Career <br/> Coaching </h3> </div> </div> CSS: .home-services-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 16px; } .service-card { display: flex; flex-direction: column; justify-content: flex-end; color: #401025; height: 200px; width: 1fr; padding: 32px; border-radius: 8px; box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.1); background-repeat: no-repeat; background-position: -150px -80px }
×
×
  • Create New...