Jump to content

How to change content-width on grid section (Masonry)

Recommended Posts

Site URL: http://www.andrewforseth.com

How can you change the width on a grid section, specifically masonry if it matters. On layout-engine-sections you can just select S/M/L or specify. On a grid section you can only select full width/full/inset. The rest of my page is content-width--medium and I would like this to align with that. I would love to be able to just go into the code it is showing me in inspect, but squarespace doesn't allow. 

Here is the code for the section:

<section data-test="page-section" data-section-theme="" class="page-section
    
      gallery-section
      full-bleed-section
    
    background-width--full-bleed
    
      section-height--medium
    
    
      content-width--wide
    
    horizontal-alignment--center
    vertical-alignment--middle
    
    
    " data-section-id="60e4c0e46ee5d321c4199529" data-controller="SectionWrapperController" data-current-styles="{
      &quot;backgroundWidth&quot;: &quot;background-width--full-bleed&quot;,
      &quot;sectionHeight&quot;: &quot;section-height--medium&quot;,
      &quot;horizontalAlignment&quot;: &quot;horizontal-alignment--center&quot;,
      &quot;verticalAlignment&quot;: &quot;vertical-alignment--middle&quot;,
      &quot;contentWidth&quot;: &quot;content-width--wide&quot;,
      &quot;sectionAnimation&quot;: &quot;none&quot;,
      &quot;backgroundMode&quot;: &quot;image&quot;,
      &quot;backgroundImage&quot;: null
    }" data-animation="none" data-json-schema-section="" data-controllers-bound="SectionWrapperController" data-active="true">
  <div class="section-background">
  
    
  
  </div>
  <div class="content-wrapper" style="
      
        
      
    ">
    <div class="content">
      
      
      
        <div class="gallery gallery-section-wrapper" style="min-height: 100px;">
          <div class="gallery" style="min-height: 100px;">
  

  
    <!-- Gallery Masonry -->

<div class="gallery-masonry" data-controller="GalleryMasonry" data-section-id="60e4c0e46ee5d321c4199529" data-animation="site-default" data-lightbox="false" data-width="full" data-props="{
      &quot;scrollAnimation&quot;: &quot;site-default&quot;,
      &quot;gutter&quot;: 67,
      &quot;numColumns&quot;: 2,
      &quot;width&quot;: &quot;full&quot;,
      &quot;lightboxEnabled&quot;: false
    }" data-show-captions="false" data-controllers-bound="GalleryMasonry">
  <div class="gallery-masonry-wrapper gallery-masonry-list--ready" style="height: 2200px;">
    
    <figure class="gallery-masonry-item" style="position: absolute; width: 502px; transform: translate3d(0px, 0px, 0px);" data-show="true" data-loaded="true">
      <div class="gallery-masonry-item-wrapper" data-animation-role="image" style="height: 2200px; overflow: hidden;">
        
        
        

        
          
          
            
          <img data-src="https://images.squarespace-cdn.com/content/v1/608ad96b685bbe60278f2524/14956a2a-d990-480d-94a5-fc316987952e/Desktop-Product_AERO_glow.jpg" data-image="https://images.squarespace-cdn.com/content/v1/608ad96b685bbe60278f2524/14956a2a-d990-480d-94a5-fc316987952e/Desktop-Product_AERO_glow.jpg" data-image-dimensions="1630x7147" data-image-focal-point="0.5,0.5" alt="Desktop-Product_AERO_glow.jpg" data-load="false" style="width: 502px; height: 2200px; object-position: 50% 50%; object-fit: cover;" data-parent-ratio="0.2" class="" data-image-resolution="2500w" src="https://images.squarespace-cdn.com/content/v1/608ad96b685bbe60278f2524/14956a2a-d990-480d-94a5-fc316987952e/Desktop-Product_AERO_glow.jpg?format=2500w">
          
        
          
          
        
      </div>
      
    </figure>
    
    <figure class="gallery-masonry-item" style="position: absolute; width: 502px; transform: translate3d(536px, 0px, 0px);" data-show="true" data-loaded="true">
      <div class="gallery-masonry-item-wrapper" data-animation-role="image" style="height: 843px; overflow: hidden;">
        
        
        

        
          
          
            
          <img data-src="https://images.squarespace-cdn.com/content/v1/608ad96b685bbe60278f2524/0e5bf618-d816-4b1b-a597-dba083e29f93/Desktop-Purchase_AERO_glow.png" data-image="https://images.squarespace-cdn.com/content/v1/608ad96b685bbe60278f2524/0e5bf618-d816-4b1b-a597-dba083e29f93/Desktop-Purchase_AERO_glow.png" data-image-dimensions="1630x2737" data-image-focal-point="0.5,0.5" alt="Desktop-Purchase_AERO_glow.png" data-load="false" style="width: 502px; height: 843px; object-position: 50% 50%; object-fit: cover;" data-parent-ratio="0.6" class="" data-image-resolution="2500w" src="https://images.squarespace-cdn.com/content/v1/608ad96b685bbe60278f2524/0e5bf618-d816-4b1b-a597-dba083e29f93/Desktop-Purchase_AERO_glow.png?format=2500w">
          
        
          
          
        
      </div>
      
    </figure>
    
    <figure class="gallery-masonry-item" style="position: absolute; width: 502px; transform: translate3d(536px, 878px, 0px);" data-show="true" data-loaded="true">
      <div class="gallery-masonry-item-wrapper" data-animation-role="image" style="height: 1199px; overflow: hidden;">
        
        
        

        
          
          
            
          <img data-src="https://images.squarespace-cdn.com/content/v1/608ad96b685bbe60278f2524/5335e12a-8535-4b43-8862-3566ae1f6a5d/Desktop-Purchase_AERO_Ex_glow.jpg" data-image="https://images.squarespace-cdn.com/content/v1/608ad96b685bbe60278f2524/5335e12a-8535-4b43-8862-3566ae1f6a5d/Desktop-Purchase_AERO_Ex_glow.jpg" data-image-dimensions="1630x3896" data-image-focal-point="0.5,0.5" alt="Desktop-Purchase_AERO_Ex_glow.jpg" data-load="false" style="width: 100%; height: 1199px; object-position: 50% 50%; object-fit: cover;" data-parent-ratio="0.4" class="" data-image-resolution="2500w" src="https://images.squarespace-cdn.com/content/v1/608ad96b685bbe60278f2524/5335e12a-8535-4b43-8862-3566ae1f6a5d/Desktop-Purchase_AERO_Ex_glow.jpg?format=2500w">
          
        
          
          
        
      </div>
      
    </figure>
    
  </div>
  
</div>

  

  

  

  

  
</div>
        </div>
      
      
      
    </div>
  </div>
</section>

 

Link to comment
  • Replies 1
  • Views 684
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

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