Debut - moving button in text columns with images

Msfit
New Member
1 0 0

Hello all.  Using a clean install of Debut.  In the section, text columns with images,  I would like to relocate the button to be the center of the image.   Any direction is appreciated.  Updated view to computer rather than mobile for clarity.  And would like the button to remain editable in the theme editor so the name could be edited as needed.  

C667E0BF-B4DD-444B-91DA-8788BAF23C59.png

0 Likes
squadkin
Excursionist
11 4 3

Hello @Msfit ,

 

You can do this with CSS absolute property. For that you have to apply position relative to the wrapper of that image and text card and center the button/text between that wrapper.

Check the below code for reference.

 

 

/* this is a demo html code */
<div class="card-wrapper">
    <div class="img-wrapper">
        <img src="the_image.jpg" alt="the image" />
    </div>
    <div class="text-wrapper">
        <p>lorem ipsum</p>
    </div>
</div>

 

 

and the CSS for the above demo HTML code for reference.

 

 

/* this is the parent wrapper of the card*/
.card-wrapper{  
    position:relative;
}

/* find the text class and apply below css on that class */
.card-wrapper .text-wrapper{
   position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
}

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on support@squadkin.com regarding any help
Shopify Expert | Whatsapp : +91 6356 882 809

0 Likes