Rebecca_Grace_Designs

This has to do with how you have added the blocks in the section. Drag all your images to be next to each other. Then make sure to drag the html blocks underneath each photo. If you drag all the html block next to each other, it will look lined up but they won't be in the right order on mobile.

I would add the html in a code block underneath each image, rather than adding the text as a caption.

No problem! You probably need to adjust the line height for this font.

You have some errors in this code which is probably why the media query isn't working. Try // Homepage - Laundry Sheet Mobile Version Only // @media only screen and (max-width:640px) { section[data-section-id="6115d829f0e9896832def4c2"] .sqs-row { display: flex!important; flex-direction: column-reverse!important; } }

This is because your dark grey theme is set as your default theme. You can change which theme is the default in the Squarespace App. This will also change the background colour of your search page and shopping cart page.

I have written a blog post about this... check it out here https://www.rebeccagracedesigns.com/blog/custom-font-on-your-squarespace-website

It looks like it sets the section to have a flex direction of column which is why they are all stacking. I would use different code here altogether to help combat the flexbox code. Try this... .ProductItem-details .ProductItem-details-checkout { display: flex; flex-wrap: wrap; flex-direction: row; } .ProductItem-product-price, .ProductItem-details-excerpt { flex-basis:100%; } .sqs-add-to-cart-button-wrapper { margin-bottom: 0 !important; position: relative; bottom: -28px; } .product-quantity-input { flex-basis:30%; } .ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button { padding-top: 1.5em; padding-bottom: 1.5em; } @media screen and (min-width:767px) { .sqs-add-to-cart-button-wrapper { flex-basis:70%; } } @media screen and (max-width:767px) { .sqs-add-to-cart-button-wrapper { flex-basis:60%; margin-left: 5vw; } }

Here you go... https://www.rebeccagracedesigns.com/blog/change-width-of-mobile-menu

@DevonHarris I will make a blog post on this but here is some code that I think will create the effect you are looking for. This code is written for Squarespace 7.1. .header-menu { width: 60vw; /*width of the header menu */ } #page { transition: opacity 1s; /* transparency animation */ } .header--menu-open #page { opacity: 30%; /* makes page transparent when mobile menu is open */ } .header-menu-nav-folder-content { justify-content: flex-start; /* vertical alignment of navigation */ text-align: left; /* navigation text alignment */ } .header-menu-cta { width: 60vw; /* width of button */ } .header-menu-cta a { min-width: unset !important; }

Yep!! Add a block id before the .summary-carousel-pager-next.. So... (" #BLOCKID .summary-carousel-pager-next ")

It's possible it was clashing with another Jquery Library on your site. Try the update as it doesn't use Jquery.

The 3000 in the code makes it change every 3 seconds. Make this number higher to slow it down.

**UPDATED*** For anyone still looking, I found a workaround for autoplaying a Summary Carousel Block. It autoclicks the next button every three seconds. Inject this is Settings > Advanced > Code Injection > Footer <script> window.onload = function() { var nextArrow = document.querySelector(".summary-carousel-pager-next"); function clickNext() { nextArrow.click(); } setInterval(clickNext, 3000); }; </script> I updated this code to remove the use of JQuery (for page speed reasons) as well as to help with the refresh timeframe.