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

How to get my images to be the full width of the screen in Brine Template

Recommended Posts

I am trying to get my square images to be 3 in a row and be the full width of the entire site. I am using Brine template. See the example below. Is this done in the site styles? I feel it's pretty simple but I can't figure it out please help!

index.png

Share this post


Link to post

Hi Aracely,

There are two separate problems here:

1. Make 3 images in a row without padding

You can't do this with an image block.
You must use gallery Block.
Use the 'grid' design.
In gallery block design tab, set 'Padding around the gridded images' to 0.

Done!

2. Make the gallery full-width. 
Full-width blocks is hard so I hope you don't mind a little self-promotion:
We've made a Full-width blocks plugin for Squarespace.
Easiest way to create full-width blocks.

Pros: 
+ Super easy, fast solution. 
+ If issues, you get 1-on-1 support.
+ Easiest to make quick changes in site content by yourself. 
+ Refund if it doesn't work.

Cons
- it's not free 😞
- doesn't work with Skye template family
- ajax loading must be disabled

Other solutions:

A) Using index page in Brine -template family. 
You can create an index page on Brine family.
Then add your gallery block to a child-page of that index page.
Add your other content above and below this child-page to different child pages. 
Then use custom CSS to make this child page full-width. 
You'll need to use developer tools to find out the ID of the index page section you have the gallery block in. 

Example Custom CSS:

section#ingredients .Index-page-content {
  max-width: 100%;
  padding:0 !important;
}

This will make the child-page and gallery block full-width. It needs some coding so the plugin is definitely easier and more versatile. 

Pros
+ Free

Cons
- need custom coding or hiring a developer
- not easy to manage or edit what's full-width and what's not
- only specific templates and index pages

B) Using Developer Mode

You can enable developer mode and create a reusable Open Block field that is full-width. Details would depend on the template, but the idea would be like this:

1. Enable Developer mode
2. Edit the entire template to be full-width. Restrict the width of header and navigation with CSS.
3. Create a 2 classes of Open Block fields, 1 full-width and 1 restricted width.
4. Create separate Open Blocks Fields for sections you want to have full-width blocks or regular, narrower blocks. 

Pros
+ Full freedom to create any design for any page. 
+ Any template, any page, ajax-loading ok, ajax loaded gallery pages are ok.

Cons
- Expensive and complex
- needs hiring a developer
- hard to manage or edit what's full-width and what's not.
- Developer needed for content changes. 

Hope these help.

PS. You can get in touch with us for all your Fullwidth block, Custom CSS and design problems. 
 

Edited by voxpopagency
styles

Vox Pop - Pro Squarespace designers & Developers

We're the best of the best 💕
Custom code, strategy, analytics, design and CSS edits. 

Get in touch via voxpopagency.com

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...