JayVanDyke

@alifelessordinary Try this.
@media only screen and (max-width: 767px) { .ProductItem-gallery { .ProductItem-gallery-slides { pointer-events: none !important; //stops the interaction that moves the slides } .ProductItem-gallery-slides-item { transform: translate(0,0) !important; //makes sure they don't move over } } } It does seem to only show the ones that are upcoming since it's setup for that sliding gallery so if you want to fix that for mobile add this like to the slides item element too or just copy and paste this below the current code.
 
@media only screen and (max-width: 767px) { .ProductItem-gallery { .ProductItem-gallery-slides-item { display: block !important; } } }  

@chrisyost21 a popup contact form isn't native in squarespace from a header button. To achieve this you would need a paid plugin like this one https://bergendesign.co/lightbox-anything (affiliate link). This will allow you to make a page with only a contact form on it and then use the plugin to have it popup that other page inside a Lightbox when you click the button.

@Styledent not really a native way but there is a great paid plugin that does this. It's pretty well documented and used across SS pretty frequently.
affiliate link - https://bergendesign.co/universal-filter

can you share a link?

@Chlobot after the padding stuff but right before the .grid-item add this
 
max-width: none !important;  

@kkf_magi Try this, when editing switch to your mobile view and make sure your containers are not overlapping each other. First screenshot is with the container over the other box and the next shows where the boxes should be ending. If you make the box bigger than the content then it will allow the text to wrap into that empty space. If you end the box before the next text box it will just bump it down on the page. Sometimes you still need to overlap to achieve a specific design but typically unless you're really careful and know how to make it work it makes sense to have them not be on top of each other.

 

@Ramon-east try this article. It's the javascript thats adding that weird little extra box that breaks the editor.

https://www.beatrizcaraballo.com/blog/code-block-space-squarespace-fluid-engine

@ashgirl2000 try this 
.product-details .ProductItem-product-price { display: none !important; }  

@WebShark I would honestly rebuild this in a classic engine section instead of the fluid engine. When you go to add sections on the left side scroll to the bottom and and a blank classic one. That will not end up with all that extra space and will shrink and grow in height based on the visible content. The grid layout system might be whats causing this.

No that’s a css thing. There may be some code for that in the installation page though at the bottom, there’s a section for styling. It just depends on what buttons and whether he’s provided that code there. 

First, even with this library I don't think you can target things inside the iframe with JS directly like you're trying to do but secondly, this line here 
document.querySelector("#content") {padding: 0px !important;} is javascript and won't do anything inside of style tags. I wonder if it's loading the library and trying to attach to your iframe before it's even on the page since it's loading in a lightbox after you click. On the plugin settings page you could try their code injection or maybe try preloading the popups, that one is just a checkbox in the setup page. If none of that works I'm not sure what else to do without really getting into the site. Feel free to dm me if youd like to chat about it!

@TomJuice try this one from @WillMyers https://www.will-myers.com/articles/auto-scroll-for-carousel-banner-slideshows-for-auto-layout-sections-in-squarespace-71

@El1z4b3th i would try 3 things possibly to get the spacing right. 
1. change the content alignment on the top section to the last one to align to the bottom and then the our core values section aligned to the top.
2. try changing the section height of one or the other section to be smaller than the "small" option by clicking the three dots and using that scroller.
3. Try with some css
//trusted by thousands section section[data-section-id="6596bba3c7ad441ead1e0008"] { .content-wrapper { padding-bottom: 0 !important; //original value was 3.3vmax, adjust as needed } } //our core values section section[data-section-id="6580bc4e649f4453b77f4e3f"] { .content-wrapper { padding-top: 0 !important; //original value was 3.3vmax, adjust as needed } }  

@GregR ah i think i missed one selector and i added a few other things to try to make sure it works. Try this.
@media only screen and (max-width: 640px) { .collection-images .image-container img { left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain; object-position: center; } }  

@helpmepls This looks like it has to do with how you have the blocks arranged. I think they are set up so that this one highlighted is the whole screen and then the other one is "floating" on top. This is mainly for letting text wrap around an element but in your case I think you want them side by side. Grab the block on the right and pull it all the way over to the right side until you get the vertical blue line. if theres a blue box then it will do exactly what you have here again. See if that helps!

@hello_studiofrey This should do it
section[data-section-id="655e25547b021336a79e6019"] .user-items-list-simple .list-item[data-is-card-enabled="true"]:first-child .list-item-content__title { color: #cf2f26; }  

@MiguelFerrao I think this wraps everything up together. See if it still works after you replace all that with this. Are you putting this into the header code injection instead of the custom css panel? 
 
<style> body { background-color: #E6E6E6; } #canvas { background-color: #E6E6E6; } #header { display: none; } div#page-section-65798fa962771a6b7f4a6a5a * { background-color: transparent !important; } .sqs-block-audio { text-align: center; .sqs-audio-embed { display: inline-block; } .sqs-widgets-audio-player { background: white !important; .action:hover { background-color: transparent !important; } .action { position: fixed !important; top: 50% !important; left: 49% !important; transform: translate(-50%, -50%) !important; border-right: none !important; .play-button { box-sizing: border-box; height: 40px; border-style: solid; border-width: 25px 0 25px 40px; border-color: transparent transparent transparent white; } .pause { box-sizing: border-box; height: 50px; border-style: double; border-width: 0px 0px 0px 40px; border-color: transparent transparent transparent white; } .play, .pause { left: 50% !important; transform: translateX(-50%) !important; } } .progress, .time, .progress-bar, .track, .labels, .secondary-controls { display: none !important; } .track .icon { background-color: none !important; display: none !important; } } } </style>  

@niteshifte it looks like you're using regular product blocks so you just need to go into mobile view and drag the elements into the space you want them and create a different layout. 

No but you can make edits to the font sizes using CSS. Paste this into your custom CSS area.
//keep adding new selectors and delete //what i have here if you need and copy //and paste with different max-width //for different screen sizes. @media only screen and (max-width: 640px) { h1 { font-size: 28px; //change to your size } h2 { font-size: 24px;//change to your size } p { font-size: 16px;//change to your size } } Are there other mobile specific changes you are trying to do besides fonts or is this a completely different page layout basically? One strategy could be to hide and show certain sections on mobile but that's not usually great for SEO because you'll have some identical content on the same page.

try changing
padding: 10px !important; to this
padding: 10px 0 !important; in your .gallery-strips-item code

It's working fine for me, it just reloads the content within the iframe as I'm assuming you're wanting it to do. The navbar and footer stays the same. Are you trying this inside the SS editor possibly? I wonder if that's why it's not working right, sometimes things get a little weird in the editor so I usually try a live page. You could also have an old version of something cached so maybe trying an incognito or private window will help see what it's really doing. As far as actually doing anything to whats in that widget, the only people who can really affect it will be Mindbody. Their code places this whole thing inside an iframe and that can't really be touched by custom code we would write.

.header-menu .header-menu-cta, .header-actions-action { a.btn { background-color: transparent !important; background-image: url(https://images.squarespace-cdn.com/content/655760ca5ce91354ff938b5a/71a5c7bc-6aac-454f-979c-b857c95f03f1/Discover+CLUB.png) !important; background-size: contain !important; background-position: center; background-repeat: no-repeat !important } } Try and replace with this. Added some more specificity and there was something overriding your background-image part so added !important to that.

@mrpowerSee this thread, im pretty sure this solves your issue too.
 
 

It looks to me like it's a margin that is blowing up those links and making them so tall. You can try something like this. I just put some numbers in that I eyeballed using the browser but you might have better numbers that will look better. Also if you need adjustments at other screen sizes for the same things, smaller laptop, tablet, etc just copy and paste it again and change the numbers for the new one.
@media only screen and (min-width: 641px) { //change to adjust for a different screen width .header-menu { .header-menu-nav-folder { &:before { left: -9vw; //adjust this for left to right spacing for the star } .header-menu-nav-item a { //adjust these for the vertical spacing. margin-top: 1vw; margin-bottom: 1vw; } } }  

It's working just fine for me. Maybe try incognito or private browser?