Jump to content

Image alignment - New Issue Custom CSS

Recommended Posts

Site URL: https://www.myskycoach.com/

Hi there - Originally (for over 2 years) the image on top of the background (hands holding iPad) was always flush bottom, and flush right. I am not sure when this issue started, but I can't seem to figure out what's going on. If anyone could take a look at the CSS I currently have and help with a fix, I'd greatly appreciate it. The goal is to get that image flush bottom, flush right to that section again. URL is above or https://www.myskycoach.com/. Thanks in advance.

// Image Alignment - Home iPad
// ------------------------------------
body:not(.sqs-editing) [data-section-id="5de97c8f6e597454f4f83027"] {
  .content-wrapper {
    position: static;
  }
  .sqs-col-5 {
    position: relative;
    z-index: 2;
  }
  .sqs-row {
    position: static;
  }
  #block-yui_3_17_2_1_1575931918121_9965 {
  position: absolute;
  bottom: 0;
  padding: 0!important;
  //right: 0;
  .image-block-wrapper {
    padding: 0!important;
  }
  img {
    display: block;
    position: relative!important;
    width: 100%!important;
    height: auto!important;
    bottom: 0!important;
    top: auto!important;
    left: 0!important;
    }
  }
}
// -----------------------------------

 

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

On 10/21/2021 at 6:17 AM, mycreativecondition said:

Site URL: https://www.myskycoach.com/

Hi there - Originally (for over 2 years) the image on top of the background (hands holding iPad) was always flush bottom, and flush right. I am not sure when this issue started, but I can't seem to figure out what's going on. If anyone could take a look at the CSS I currently have and help with a fix, I'd greatly appreciate it. The goal is to get that image flush bottom, flush right to that section again. URL is above or https://www.myskycoach.com/. Thanks in advance.

// Image Alignment - Home iPad
// ------------------------------------
body:not(.sqs-editing) [data-section-id="5de97c8f6e597454f4f83027"] {
  .content-wrapper {
    position: static;
  }
  .sqs-col-5 {
    position: relative;
    z-index: 2;
  }
  .sqs-row {
    position: static;
  }
  #block-yui_3_17_2_1_1575931918121_9965 {
  position: absolute;
  bottom: 0;
  padding: 0!important;
  //right: 0;
  .image-block-wrapper {
    padding: 0!important;
  }
  img {
    display: block;
    position: relative!important;
    width: 100%!important;
    height: auto!important;
    bottom: 0!important;
    top: auto!important;
    left: 0!important;
    }
  }
}
// -----------------------------------

 

Can you share a screenshot of your issue that can help us to figure out the problem and solution more easily?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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.