Multi Columns text on image

Store Design
, ,

Topic summary

A user applied custom CSS to overlay text on multi-column images but needed it to affect only the homepage, not site-wide.

Two solutions were provided:

  1. Section-specific targeting: Use the unique section template ID (e.g., .section-template--23195023278374__multicolumn_WQz7RE-padding) as a CSS selector to limit styling to that specific multi-column section. This approach also included code optimization for better tablet responsiveness.

  2. JavaScript URL detection: Add a script to theme.liquid that checks if the current page is the homepage (/) and dynamically injects the CSS only when true.

Current status: The original poster confirmed the solution worked. A follow-up question emerged about mobile responsiveness—specifically requesting a background for buttons (currently transparent) and tighter spacing between title and body text on mobile devices. This mobile styling issue remains unresolved.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

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!

1 Like
2

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!

1 Like
3

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:

BSSCommerceB2B_0-1728093110524.png
BSSCommerceB2B_0-1728093110524.png400Ă—195 26.3 KB

Step 2: Search for the file theme.liquid. And add this code snippet before tag or :

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!

1 Like
4

It worked! Thank you so much :grinning_face:

5

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?