Jump to content

Fixing CSS color block behind image

Recommended Posts

Site URL: https://alpaca-salamander-4jsa.squarespace.com/

Hi! I have what I'm hoping is a simple question, just out of my league. If you go to the homepage (site password is kEn), halfway down the page I used CSS to customize a block of color to appear behind an image block. However, on mobile the proportions become uneven. Is there a way to fix it on mobile so it looks similar to desktop?

Thanks!

Link to comment
  • Replies 2
  • Views 350
  • Created
  • Last Reply

I am seeing the issue that @katiebostedt described.

I suggest you take out the previous CSS you entered. Save a copy somewhere in case there are issues with the following.

Add the following in Page Settings > Advanced > PAGE HEADER CODE INJECTION for the page in question. That is assuming you are going to have a store. If not then put in Design > Custom CSS minus <style> and </style>.

<style>

  @media screen and (max-width: 640px) {
  
    #block-yui_3_17_2_1_1599776681553_11479.sqs-block-image {
    
      margin-bottom: 2vw;
      margin-left: 2vw;
      padding-top: 50px !important;
      
      }
      
    }
    
  #block-yui_3_17_2_1_1599776681553_11479.sqs-block-image {
  
    background: -webkit-gradient(linear,right top, left top,color-stop(40%, rgba(0,0,0,0)),color-stop(40%, pink));
    background: -o-linear-gradient(right,rgba(0,0,0,0) 40%,pink 40%);
    background: linear-gradient(270deg,rgba(0,0,0,0) 40%,pink 40%);
    
    padding: 50px;
    
    }
    
  </style>

This is for a v7 site.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.