Jump to content

Mobile view customisation

Recommended Posts

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

Screen Shot 2022-02-23 at 4.57.05 PM.png

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

Screen Shot 2022-02-23 at 4.57.05 PM.png

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 */
}

 

Link to comment

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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.