How to move button in Image with text Debut theme

Highlighted
Tourist
35 0 2

Hello everyone.

For the About us page I have created a new page with several Image with text sections. 

For the last image with text, I would like to have the button to be centered and placed below the image and text. 

How can I do so?

Any help is highly appreciated

 

button to center.png

0 Likes
Highlighted
Shopify Partner
3163 694 840

@Quondy 

Please provide your website URL for the about us page. I will check and try to provide you solution here.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
35 0 2
Hello there!

The link is this one: https://mastrozavattistore.com/pages/about-us

Thank you so much!
0 Likes
Highlighted
Shopify Partner
3163 694 840

@Quondy 

Please add the following code at the bottom of your assets/theme.scss.liquid file

@media only screen and (min-width: 749px) {
.feature-row a.btn{ margin: 0 auto; position: absolute; width:50%; }
}

 

Hope this helps.

Thanks! 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
35 0 2

@dmwwebartisan the code works and I get the desired result, but it affects all the other Images with text sections that are on the home page.

 

To create the about us page - I have created a page.about-us.liquid and linked it to new sections " About-us; image with text 1- 2-3-4" that have the same code as the custom content and image with text.

How to have the button placed below the image and centered only for Image with text 4? 

0 Likes
Highlighted
Tourist
35 0 2

I have actually solved it.

 

I have renamed the image with text 4 - feature- row-4 

and added this code to the theme.scss 

@media only screen and (min-width: 749px) {
.feature-row-4 a.btn{ margin: 50px auto; position: absolute; width:50%;}
}

with the 50px the button is placed a little bit lower and well balanced!

Thank you very much again @dmwwebartisan 

1 Like