Mobile view customisation

Site URL: https://lordsuni.squarespace.com/apply-now

site pw: lords

I have added custom CSS to create a floating banner here. I do not wish this to be floated in the mobile view. This is the CSS I am Using for it to not float but it doesn't work - pls help, where am I going wrong?

@siteWidth: 1400px;
@siteMargin: 8vw;

section[data-section-id="621331e3fb7138651a5922a8"] {
  @media screen and (min-width: 641px) {
  padding-bottom: 100px;
  & + section {
    position: absolute!important;
    min-height: 0!important;
    z-index: 30;
    left: 50%;
    max-width: @siteWidth;
    width: ~"calc(100% - @ * 2)";
 transform: translate(-50%,-50%);
  }
  & + section + section {
    padding-top: 100px;
  }
 }
}

12 hours ago, atfirstblink said:

Site URL: https://lordsuni.squarespace.com/apply-now

site pw: lords

I have added custom CSS to create a floating banner here. I do not wish this to be floated in the mobile view. This is the CSS I am Using for it to not float but it doesn't work - pls help, where am I going wrong?

 

@siteWidth: 1400px;
@siteMargin: 8vw;

section[data-section-id="621331e3fb7138651a5922a8"] {
  @media screen and (min-width: 641px) {
  padding-bottom: 100px;
  & + section {
    position: absolute!important;
    min-height: 0!important;
    z-index: 30;
    left: 50%;
    max-width: @siteWidth;
    width: ~"calc(100% - @ * 2)";
 transform: translate(-50%,-50%);
  }
  & + section + section {
    padding-top: 100px;
  }
 }
}

You need to specify that you only want the page section to float on non-mobile screen sizes. Move all of the pasted CSS inside a tag that looks like this (you might need to increase the screen width depending on what screen size you want the section to stop floating):

@media(max-width: 768px) {
   /* PUT CSS HERE */
}

This is what I'm posting but it doesn't seem to work

// No float on mobile

@media(max-width: 768px) {
@siteWidth: 1400px;
@siteMargin: 8vw;

section[data-section-id="621331e3fb7138651a5922a8"] {
  @media screen and (min-width: 641px) {
  padding-bottom: 100px;
  & + section {
    position: absolute!important;
    min-height: 0!important;
    z-index: 30;
    left: 50%;
    max-width: @siteWidth;
    width: ~"calc(100% - @ * 2)";
 transform: translate(-50%,-50%);
  }
  & + section + section {
    padding-top: 100px;
  }
 }
}
}