How can i put down text from img? i want text and button under image block, i used influence theme,

Store Design
, , ,

Topic summary

A Shopify store owner using the Influence theme needed help positioning text and buttons below an image block instead of overlaying them.

Initial Solution Attempt:

  • A community helper provided CSS code to reposition elements using absolute positioning
  • This first solution didn’t work on the actual store

Working Solution:

  • After receiving the store’s shareable URL, updated CSS was provided with media queries for responsive design
  • The code targets .justify-self-center.text-center.self-end.inline-block elements
  • Uses absolute positioning with specific bottom and left offsets
  • Includes separate styling for desktop (min-width: 769px) and adjusts height properties

Resolution:

  • The user confirmed the solution works
  • They implemented it by adding the CSS code to the custom CSS field in the section editor
  • The fix successfully moved text and buttons beneath the image as intended
Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

collection.png
collection.png1397Ă—641 68.9 KB

1 Like
2

Hi @0067Ahmed

Try this one, Im only using demo for Influence theme. If this wont work would you mind to share the store URL website? with password if its protected. Thanks!

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
.justify-self-start.text-left.self-end.inline-block {
    position: absolute;
    bottom: -100px;
    left: 30px;
}
.justify-self-start.text-left.self-end.inline-block * {
    color: black;
}
.justify-self-start.text-left.self-end.inline-block a {
    border: 1px solid black;
}
.h-full {
    height: auto;
}

Result:

Ribe_Dagandara_0-1691528713236.png
Ribe_Dagandara_0-1691528713236.png1355Ă—414 405 KB

I hope it help.

3

NOT WORKING, HERE IS MY SHAREABLE URL
https://4g0ay3txx58h0k8k-30946951303.shopifypreview.com/collections/decoracion

4

I already expected that one cause it just a demo. Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
@media only screen and (min-width: 769px) {
.justify-self-center.text-center.self-end.inline-block {
    position: absolute;
    bottom: -100px;
    left: 30px;
}
.h-full {
    height: 95%;
}
}
@media only screen and (max-width: 769px){
.justify-self-center.text-center.self-end.inline-block {
    position: absolute;
    bottom: -89px;
    left: 30px;
}
.h-full {
    height: 91%;
}
}

Result:

Desktop

Ribe_Dagandara_0-1691601543502.png
Ribe_Dagandara_0-1691601543502.png1321Ă—415 33.3 KB

Mobile

Ribe_Dagandara_1-1691601564198.png
Ribe_Dagandara_1-1691601564198.png456Ă—522 9.15 KB

" :glowing_star: Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! :raising_hands: "

1 Like
5

thank you its working now , i put this code in section custom css field in editor,

1 Like