Multi Columns text on image

[lauhug]

Hi!

I added some code a the bottom of my section.multicolumn.css in my asset folder to put the text on my images in my multi-columns.

I just want it to apply to my home page and not every page on the website.

What could I add to the code to apply it to one page only?

This is the link to my store: https://52263b-b3.myshopify.com/?_ab=0&_fd=0&_sc=1

And this is the code I added at the bottom:

}
@media screen and (min-width: 767px) {
.multicolumn-card__info {
position: absolute;
bottom: 3%;
text-align: left;
margin-left: 20px;
margin-right: 200px;
color:black !important;

}
.multicolumn-card__info h3 {
color: black !important;
font-size: 25px;
font-weight: light;
line-height: 25px;

}
.multicolumn-card__info p {
font-size: 16px;
text-align: left;
font-weight: 600;
margin-left: 20px;
margin-right: 200px;

}
.multicolumn-card__image-wrapper img {
position: relative;
}
}

Thanks!

[Made4uo-Ribe · Accepted solution]

Hi @lauhug 

There is 2 ways, add the if template or use the section template i.d. If you use the I.D it will call only on the multicolumn section. Even you add another multi column on the homepage. Check this one,. 

@media screen and (min-width: 767px) {
.section-template--23195023278374__multicolumn_WQz7RE-padding .multicolumn-card__info {
position: absolute;
bottom: 3%;
text-align: left;
margin-left: 20px;
margin-right: 200px;
color:black !important;

}
.section-template--23195023278374__multicolumn_WQz7RE-padding .multicolumn-card__info h3 {
color: black !important;
font-size: 25px;
font-weight: light;
line-height: 25px;

}
.section-template--23195023278374__multicolumn_WQz7RE-padding .multicolumn-card__info p {
font-size: 16px;
text-align: left;
font-weight: 600;
margin-left: 20px;
margin-right: 200px;

}
.section-template--23195023278374__multicolumn_WQz7RE-padding .multicolumn-card__image-wrapper img {
position: relative;
}
}

And save. 

Also, i edit some of your code so it wont be horrible on tablet screen and unecessary code. Let me know if im missing something. 

@media screen and (min-width: 767px) {
  .section-template--23195023278374__multicolumn_WQz7RE-padding .multicolumn-card__info {
    position: absolute;
    bottom: 3%;
    text-align: left;
    left: 20px;
    width: 80%;
  }

  .section-template--23195023278374__multicolumn_WQz7RE-padding .multicolumn-card__info h3 {
    font-size: 25px;
    font-weight: 300;
    line-height: 25px;
  }

  .section-template--23195023278374__multicolumn_WQz7RE-padding .multicolumn-card__info .rte {
    text-align: left;
    font-weight: 600;
  }

  .section-template--23195023278374__multicolumn_WQz7RE-padding .multicolumn-card__image-wrapper img {
    position: relative;
  }
}

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[lauhug]

It worked! Thank you so much 😀

[BSSCommerce-B2B]

HI @lauhug , 

You can use JavaScript to apply the CSS only on the homepage, you need to add a script that checks the URL of the page. Then, apply the CSS changes when the page only is the homepage.

Here's how to do it: 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file theme.liquid. And add this code snippet before tag </head> or </body>: 

<script>
document.addEventListener("DOMContentLoaded", function() {
  if (window.location.pathname === "/") {
    var style = document.createElement('style');
    style.innerHTML = `
      @media screen and (min-width: 767px) {
        .multicolumn-card__info {
          position: absolute;
          bottom: 3%;
          text-align: left;
          margin-left: 20px;
          margin-right: 200px;
          color: black !important;
        }
        .multicolumn-card__info h3 {
          color: black !important;
          font-size: 25px;
          font-weight: light;
          line-height: 25px;
        }
        .multicolumn-card__info p {
          font-size: 16px;
          text-align: left;
          font-weight: 600;
          margin-left: 20px;
          margin-right: 200px;
        }
        .multicolumn-card__image-wrapper img {
          position: relative;
        }
      }
    `;
    document.head.appendChild(style);
  }
});
</script>

Step 3: Save and reload home page.

This script will check if the user is on the homepage (by checking the URL /). If true, it will inject the CSS rules only for the homepage

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[Bells1]

This works great on desktop, but it doesn't transfer to mobile. Is there a way to have the button in the photo to have a background because at the moment it is transparent. Also is there a way to make the title and the body text closer together? What would I add to the code?