JayVanDyke

@TomKnowsNoCSS I would do this with some media queries at different breakpoints, most likely just 640px and under. Change your CSS to this and adjust those font sizes below. You can copy and paste the media query and change the size to something else 767px 500px 320px etc.

a#site-title {
  &:after {
    content: "bespoke wedding stationery";
    display: block;
    font-size: 1.3rem;
    font-family: 'Garamond';
    letter-spacing: 3px;
    line-height: 1.3rem;
  }

  //change these font sizes or add different pixel widths as needed
  @media only screen and (max-width: 640px) {
    font-size: 20px !important;
    &:after {
      font-size: 1rem;
    }

  }
}

@mbockmaster There are definitely some code snippets around the internet that can be adjusted to fit SS but I'm not sure there's a 100% finished solution out there to find easily. I did this for another client here https://www.cardtopiabeta.com. Happy to help you get this going as well! DM me if you're interested.

Edit to add this one too https://www.slatecommunications.com. This one is a little more generic and based on a codepen i found a long time ago but adjusted to fit the way SS works.

Hmm yea, im not sure this is exactly going to do it. This looks like it'll just keep trying to duplicate content as you scroll. This other site moves you back to the top after you see the duplicated top section it just replaces it with the original one and moves you up to start at 0 again so you're not constantly duplicating, you just need one extra copy of your top section to do it like your example.

@hilary Yea this is a cool setup. It looks like they have the first section on the site duplicated at the bottom. Then when the user gets there and scrolls that into view it moves them back up to the top and slips the original top section into place. Lots of javascript to do this, i dont think there's a simple free solution out there.

@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
  }
}

@El1z4b3th I'm sorry, i dont see that on your site. Is it on a different page?

Edit: nevermind i found it

@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;
  }
}

Try looking in your site styles for Ajax and turn it off. That sometimes messes things up in these older templates. 

There isn't a simple free version of this but one of the best plugins for popups is the Lightbox Anything plugin. This will do exactly what you need. I've installed this on hundreds of websites at this point. Works great!

Affiliate link - https://www.bergendesign.co/lightboxanything

Is the code still in there? If not can you put it back?

@Trentwann I think this is totally doable. I would probably do it using code injection and make a button and another container for the spotify popout. Then using some js just like this one above you would just have it toggle open or closed on click. Happy to help figure it out! I'll send you a DM.

@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!

@El1z4b3th can you share your url?

@Bella12345Bella can you share your url?

@GregR You could try this in custom css. It should center them right in the middle and make the whole thing show on mobile. This doesn't shorten the section though so it keeps your navigation at the bottom and fills the screen.

@media only screen and (max-width: 640px) {
  .collection-images .image-container {
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
  }
}

@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;
}

@MichaelBach try Airtable. It hooks up with zapier I believe but also has some automations built in. 

@MiguelFerrao great! If it’s solved mark it as the solution. Happy to help!

The built in schema can't be removed.... even in dev mode I don't believe it's a thing that you can make changes to.

@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>

@hello_studiofrey just needs to be more specific, see if this does it.

section[data-section-id="655e25547b021336a79e6019"] .user-items-list-simple .list-item[data-is-card-enabled="true"] .list-item-content__title {
  color: #cf2f26;
}

See if this works, it seems to work in the browser for me.

.sqs-widgets-audio-player .action {
  .play, .pause {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

@Aepclark this would require a pretty significant amount of CSS to get it right, I haven't used this before but heres a thread that talks about it and includes a link to a plugin that does it.

@MichaelBach this isnt doable with a google form. They would have to have a setting on their end to be responsive to height and width and they don't have anything like that. Since it's inside an iframe the sizing needs to come from the form itself and can't be touched by code on the SS side of things.

What page is this on with this code? It looks centered to me but also doesn't seem to have this code applied.