RolandFuseHub

This is a "feature" of the Fluid Engine grid and it is because of the way that the rows must expand to allow the Accordion Block to expand.
One workaround is to adjust the height or position of Blocks. For example, if the Accordion Block is the same height as the Image Block, when the accordion expands, all the grid rows will expand, making the Image Block stretch too.

However, as shown above, if the Accordion Block is expanded one row below the Image Block, when the accordion expands, this otherwise unoccupied row will expand, leaving the Image Block unaffected.
Another workaround is to set the image to Fit instead of Fill.

I hope these workarounds help.
Did this help? Please give feedback by clicking an icon below  ⬇️

Wait till we launch Expand 3.0. ⬅️

Thanks, Roland. I wasn't trying to be an a$$. I'm just frustrated about the constraints and I understand the workarounds have to be developed. I'm grateful we have these plugin options for SS.

I also realize you don't promote single or few-section scrolls... it just isn't obvious, or at least wasn't to me. But I get it. It's in development and that's great news. 

Thanks for your reply. And I'm LOVING Expand 2.0, by the way. 

We are working on it but not that easy….

You are welcome!

As you we all know Google Analytics allows you to exclude visits based on IP addresses so staff visits and/or visits from the offices of the client, or even mine for testing purposes, will not be part of the analytics.
It would be great if Squarespace offers that option as well.
Some smaller clients of mine do not need Google Analytics and are very happy with the analytics offered by Squarespace, but because they are smaller companies, their visits to the site, or even my visits to check something, are skewing the data somewhat.
If I can exclude those visits, the data will be a better representation of ACTUAL visitors.

Shouldn't be that hard I would think?

Anyone any thoughts?

@Chloe_ECD thanks! There’s actually a great plugin now to add custom social icons anywhere that I prefer using. This post has a walkthrough and coupon code: https://christyprice.com/blog/different-social-links-icons-squarespace  

I think you should move right image in separate section. Then you can use WillMyer Split section code & make left side sticky easier.
Or you can set sticky for all blocks, & adjust top value

something like this

If you want them more evenly distributed you could do the following.
.custom-table-block { table-layout: fixed; } Let us know how it goes.

You should be able to hide that first column by setting the width like this:
td.s3.table-cell.table-cell-1 { width: 0; } Widths of columns are generally controlled by setting the width of td or th, although it is slightly different in your case because these are all part of one larger grid.

As you we all know Google Analytics allows you to exclude visits based on IP addresses so staff visits and/or visits from the offices of the client, or even mine for testing purposes, will not be part of the analytics.
It would be great if Squarespace offers that option as well.
Some smaller clients of mine do not need Google Analytics and are very happy with the analytics offered by Squarespace, but because they are smaller companies, their visits to the site, or even my visits to check something, are skewing the data somewhat.
If I can exclude those visits, the data will be a better representation of ACTUAL visitors.

Shouldn't be that hard I would think?

Anyone any thoughts?

As you we all know Google Analytics allows you to exclude visits based on IP addresses so staff visits and/or visits from the offices of the client, or even mine for testing purposes, will not be part of the analytics.
It would be great if Squarespace offers that option as well.
Some smaller clients of mine do not need Google Analytics and are very happy with the analytics offered by Squarespace, but because they are smaller companies, their visits to the site, or even my visits to check something, are skewing the data somewhat.
If I can exclude those visits, the data will be a better representation of ACTUAL visitors.

Shouldn't be that hard I would think?

Anyone any thoughts?

Try this new code
nav.header-nav-list { flex-wrap: nowrap; position: absolute; left: 50%; transform: translateX(-50%); }  

Nice suggestion @paul2009 but I can not give 10-15 staff access. Chances someone screws up something is just too high.
 

As you we all know Google Analytics allows you to exclude visits based on IP addresses so staff visits and/or visits from the offices of the client, or even mine for testing purposes, will not be part of the analytics.
It would be great if Squarespace offers that option as well.
Some smaller clients of mine do not need Google Analytics and are very happy with the analytics offered by Squarespace, but because they are smaller companies, their visits to the site, or even my visits to check something, are skewing the data somewhat.
If I can exclude those visits, the data will be a better representation of ACTUAL visitors.

Shouldn't be that hard I would think?

Anyone any thoughts?

use this CSS
section.wm-split-1 .button-block { visibility: hidden; } section.wm-split-1:hover .button-block { visibility: visible; } section.wm-split-2 .button-block { visibility: hidden; } section.wm-split-2:hover .button-block { visibility: visible; }  

Some CSS Class/ID for Squarespace 7.1
Announcement Bar
Announcement bar: .sqs-announcement-bar-dropzone Announcement bar text: .sqs-announcement-bar-dropzone p Announcement bar link: .sqs-announcement-bar-dropzone a Announcement Bar Close Icon: .sqs-announcement-bar-close OR .sqs-announcement-bar-close:after Header
Header: header#header Sticky Header: header.shrink Header (not include sticky header): header#header:not(.shrink) Header (when burger menu is open): body.header--menu-open header#header Header (when burger menu is close): body:not(.header--menu-open) header#header Site Title: a#site-title Site Title (when overlay menu open): .header--menu-open a#site-title Site Title (when overlay menu close) body:not(.header--menu-open) a#site-title Navigation: .header-nav Navigation Items: .header-nav-item a Navigation First Item: .header-nav-item:nth-child(1) a Navigation Second Item: .header-nav-item:nth-child(2) a Navigation Dropdown: .header-nav-folder-content Navigation Dropdown Items: .header-nav-folder-item a Navigation Folder Title: a.header-nav-folder-title Mobile Navigation Items: .header-menu-nav-item a Mobile Navigation First Item: .header-menu-nav-folder[data-folder="root"]>div>div:first-child Mobile Navigation First Item (text): .header-menu-nav-folder[data-folder="root"]>div>div:first-child a Mobile Navigation Second Item: .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(2) Mobile Navigation Second Item (text): .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(2) a Mobile Menu Icon: .header-burger Mobile Burger 3 lines: .burger-inner>div Mobile Menu X icon: body.header--menu-open .burger-inner>div Header Social Icons: .header-actions .icon Cart Icon: header#header span.Cart-inner Cart quantity: header#header .icon-cart-quantity Header Button: header#header a.btn Header Desktop Button: .header-display-desktop a.btn Header Mobile Button: .header-menu-cta a a Footer
Footer: footer#footer-sections Footer Social Icons:  footer#footer-sections  .sqs-svg-icon–outer Footer Links: footer#footer-sections a Product List
Product List: .collection-type-products.view-list Product Name: .grid-title Product Price: .grid-prices Product Image: figure.grid-image Product Currency: body.native-currency-code-usd .sqs-money-native:before Sold Out Text: .product-mark.sold-out Product Detail
Product Detail: .collection-type-products.view-item Product Breadcrumb: .ProductItem-nav-breadcrumb Product Pagination (Previous/Next): .ProductItem-nav-pagination Gallery: figure.ProductItem-gallery Thumbnails: .ProductItem-gallery-thumbnails Big Image: .ProductItem-gallery-slides Product Name: h1.ProductItem-details-title Price: .ProductItem-product-price Currency: body.native-currency-code-usd .sqs-money-native:before Excerpt: .ProductItem-details-excerpt Add to Cart Button: .sqs-add-to-cart-button-wrapper Add to Cart Text: .sqs-add-to-cart-button-inner Variant Dropdown: .variant-option Variant Title: .variant-option-title Variant Options: .variant-select-wrapper option Quantity Text: .quantity-label Quantity Input: .product-quantity-input Cart Page
Cart Page: body#cart Cart Page Title: .cart-title Product Name: a.cart-row-title Product Thumbnail: div.cart-row-img Qty minus: .cart-row-qty-dec Qty plus: button.cart-row-qty-inc Qty number: input.cart-row-qty-input Price: .cart-row-price X icon: .cart-row-remove or .cart-row-remove svg Sub total text: .cart-subtotal-label span Sub total price: .cart-subtotal-price Checkout Button: button.cart-checkout-button   Item: .CartTable-itemLabel-3zzV1 QTY. .CartTable-itemLabel-3zzV1 span Price Name: .CartTable-itemPrice-XgjsO span X icon: .item-remove div Blog List
Blog List: [class*="type-blog"].view-list Thumbnails: article.blog-item img Date: time.blog-date Category: span.blog-categories-list Title: h1.blog-title Excerpt: .blog-excerpt Read more: a.blog-more-link Blog Posts
Blog Posts Page: [class*="type-blog"].view-item Blog Items: .blog-item-entry Categories: .blog-meta-item–categories Date: time.dt-published.blog-meta-item.blog-meta-item–date Author: .blog-meta-item.blog-meta-item–author.p-author.author Title: .blog-item-title Content: .blog-item-content-wrapper Pagination: .item-pagination Pagination Arrows: .item-pagination-link .item-pagination-icon Pagination Title: h2.item-pagination-title Author Box: .blog-item-author-profile-wrapper Author Image: a.author-avatar.content-fill Author Name: .author-name Author Site: a.author-website Post Comment: .squarespace-comments Post Comment Button: .comment.btn Comment Input: .squarespace-comments .new-comment-area Preview: span.btn-text.preview-comment.top-level-preview-btn Subscribe via email text: span.subscribe.subscribe-control Blog Grid
updating
Blog Masonry
updating
Event List Page
Event List Page: .collection-type-events.view-list Event Thumbnail: a.eventlist-column-thumbnail.content-fill Event Time: .eventlist-datetag Event Date: .eventlist-datetag-startdate.eventlist-datetag-startdate–day Event Month: .eventlist-datetag-startdate.eventlist-datetag-startdate–month Event Title: h1.eventlist-title Event Hour: li.eventlist-meta-item.eventlist-meta-time.event-meta-item Event Description: .eventlist-description Event Detail Page
Event Detail Page: .collection-type-events.view-item Event Title: h1.eventitem-title Event Date: time.event-date Event Hour: li.eventitem-meta-item.eventitem-meta-time.event-meta-item Event Description: .eventitem-column-content Event Pagination: section.item-pagination.item-pagination–prev-next Previous/Next: .item-pagination-link .item-pagination-prev-next Event Pagination Title: h2.item-pagination-title Portfolio
title: h3.portfolio-title item: .portfolio-grid-basic portfolio image: .portfolio-grid-basic .grid-image pagination: [data-collection-type=“portfolio-grid-basic”].item-pagination pagination text: h2.item-pagination-title pre text: .item-pagination-link–prev .item-pagination-prev-next next text: .item-pagination-link–next .item-pagination-prev-next List Simple
List Simple: .user-items-list-simple Image: .user-items-list-simple img First Item: .user-items-list-simple li:nth-child(1) Second Item: .user-items-list-simple li:nth-child(2) List Content: .user-items-list-simple .list-item-content Title: .user-items-list-simple h2.list-item-content__title Description:  .user-items-list-simple list-item-content__description OR .user-items-list-simple p List Slideshow
List Slideshow: .user-items-list-banner-slideshow Image: .user-items-list-banner-slideshow img First Item: .user-items-list-banner-slideshow li:nth-child(1) Second Item: .user-items-list-banner-slideshow li:nth-child(2) List Content: .user-items-list-banner-slideshow .slide-content Title: .user-items-list-banner-slideshow h2.list-item-content__title Description:  .user-items-list-banner-slideshow list-item-content__description OR .user-items-list-banner-slideshow p Arrow Circles: .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-button Arrow Icons: .user-items-list-banner-slideshow .user-items-list-banner-slideshow__arrow-button svg Button: .user-items-list-banner-slideshow .list-item-content__button List Carousel
List Carousel: .user-items-list-carousel__slides Image: .user-items-list-carousel__slides img First Item: .user-items-list-carousel__slides li:nth-child(1) Second Item: .user-items-list-carousel__slides li:nth-child(2) List Content: .user-items-list-carousel__slides .list-item-content Title: .user-items-list-carousel__slides h2.list-item-content__title Description:  .user-items-list-carousel__slides list-item-content__description OR .user-items-list-carousel__slides p Arrow Circles: .user-items-list-carousel__arrow-button Arrow Icons: .user-items-list-carousel__arrow-button svg Button: .user-items-list-carousel__slides .list-item-content__button Fluid Engine
Fluid Block (text block, image...): Each block is wrapped by the same class name .fe-block and a unique id. And All .fe-blocks will be wrapped by a parent tag with a class name of .fluid-engine
 
Checked & Wrote by tuanphan

Works for limited use case, but doesn't cover when you are doing UAT and you do not want to add every tester to SP as a users, think Mobile devices much less grant access to change things.  SP is solution is handy (thanks), but a better and advanced solution seems easy enough to simply exclude IP address/range.

@RolandFuseHub
The code you cited is not for v7.1 but I believe there were some examples that were provided for v7.1 above.

Thanks for clarifying Paul. This being Job Descriptions, it might be better to create a page for it vs a PDF.

Hi bsull,
I'm using SS 7.1 and I had a hard time figuring out how to switch blocks on mobile too! For 7.1, the two blocks I needed to switch had to be in their own section. On my website's desktop view I have a "Well hello there" text section introducing me and my company on the left, and a photo of me on the right. Meaning, on mobile, the intro text came before the image; but I wanted my picture to display before the text – essentially swapping the block positions.
Here's what worked for me:
@media only screen and (max-width: 640px) { section[data-section-id="insertsectionIDnumberhere"] .sqs-row { display: -webkit-flex !important; -webkit-flex-direction: column-reverse; display: flex; flex-direction: column-reverse; } } The section ID # should be a section solely dedicated to the elements you want switched. I hope this is helpful!

Saved your site. Thank you!

Maybe not an instant answer, but we just released this plugin for 7.1: https://www.sqsmods.com/menu

@RolandFuseHub
For a Javascript solution please see the following.
Let us know how it goes.

If you would like the Summary Block tiles to link to other areas of the site, you can set the URLs as required so that another page loads instead of the blog post. To do this:
Edit the Blog Post that you've used for the tile. Click the Options tab. Type the URL in the Source URL box. Check the Post Title should link to Source URL checkbox. Save the Post.