How can I adjust button alignment and text spacing in my code?

Store Design
1

Hello community,
I making a site for someone and need a hand, on the section i already done some coding but I need some help

  1. How do I do center the button I have done it but the button container is the full page I don’t want that.
  2. how do I change the vertical spacing so it not all compacted in the center of the image
#shopify-section-1664188247f1162ab4{
.h2,h3{
font-family:futura-bold;
text-align: center;
font-size:1.875em;

}
.p{
font-family:futura-pt-book;
line-height: 1.6;
top-padding:70px;

}
a.btn{
background-color:#FCF0E4;
font-family:futura-bold;
text-aling: center;
display: flex;
align-items: center;
justify-content: center;

}

  }

here my code it look like the image below

RhysAsmara_1-1664962713312.png
RhysAsmara_1-1664962713312.png1156×549 167 KB

I want the image above to look like the image below

RhysAsmara_2-1664962734286.png
RhysAsmara_2-1664962734286.png570×405 120 KB

If Any could help me it be much apricated thank you.

2

@RhysAsmara

My pleasure to help you.
Welcome to the Shopify community!
Please share your store URL!
I will check out the issue and provide the correct solution to you!

Thanks!

3

sent you a DM But please post the solution on here thanks,

4

@RhysAsmara

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

#shopify-section-1664188247f1162ab4 .page-width {*zoom: 1; max-width: 1100px !important; margin: 0 auto !important;}
#shopify-section-1664188247f1162ab4 a.btn{width: max-content !important; margin: 0 auto !important;}

Thanks!

5

AWSOME IT WORKED.
for the button but didn’t make page head ,text and button full height of the image. Are you also abel to help with that ?

6

@RhysAsmara

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

@media only screen and (min-width: 750px){
#shopify-section-1664188247f1162ab4 .feature-row__text--right { height: 500px;}
#shopify-section-1664188247f1162ab4 .h3 {min-height: 8rem !important;}
#shopify-section-1664188247f1162ab4 .featured-row__subtext {margin-bottom: 85.44444px !important;}
}

Thanks!

7

looking much better thank you so much for you help.

RhysAsmara_0-1665049887868.png
RhysAsmara_0-1665049887868.png939×547 164 KB

8

hey @dmwwebartisan just wonder what the about the image and moving to right a bit more from the text i try using a few code but couldn’t find any thing that work