How to make them the same width? for shop now & find out more
I wanted to make "shop now" and "find out more" of the equal size and width. Have tried tweaking the html code, css but to no avail.
Code snippet:
<tr id="section-6465178" >
<th style="mso-line-height-rule: exactly; padding: 0 36px 9px;" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
<!-- Button : BEGIN -->
<tr>
<th style="mso-line-height-rule: exactly; Margin: 0; padding: 9px 0;" align="center" bgcolor="#ffffff" valign="top">
<table cellspacing="0" cellpadding="0" border="0" role="presentation" style="text-align: center; Margin: 0 auto;" bgcolor="transparent">
<tr>
<th style="mso-line-height-rule: exactly; border-radius: 1px; padding-bottom: 0px;” align="center" bgcolor="#8c734b" valign="top">
<a href="https://byndartisan.com/" target="_blank" style="color: #ffffff !important; text-decoration: none !important; text-underline: none; word-wrap: break-word; line-height: 12px; font-family: 'Baskerville'; font-size: 12px; font-weight: 900; text-transform: uppercase; text-align: center; display: block; background-color: #8c734b; border-radius: 1px; padding: 1px 20px; border: 15px solid #8c734b;"><span style="line-height: 12px; color: #ffffff; font-weight: 900; text-decoration: none; text-underline: none; letter-spacing: 0.5px;"><!--[if mso]> <![endif]--><span data-key="6465178_text_on_button" style="line-height: 12px; color: #ffffff; font-weight: 900; text-decoration: none; text-underline: none; letter-spacing: 0.5px;">Shop Now</span><!--[if mso]> <![endif]--></span></a>
</th>
</tr>
</table>
</th>
<hr>
<tr id="section-6465178" > <table cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; table-layout:fixed width="80%" role="presentation" <td padding-left:120px; padding-right:120px"; font-weight: "normal">
<div style><div style="font-family: Baskerville; font-weight: normal; font-size:15px; color: #8c734b; padding-top:40px; padding-bottom: 0px;">More on the Friends of Bynd (FOB) Loyalty Programme</div><section > <tr> <td ><img src="https://cdn.shopify.com/s/files/1/0275/3318/0970/files/Earn-points.png?v=1662005202"/> <p >Earn Points</p> <p> Collect 1 point for every S$1 spent online or in-store and when you complete the
accumulated FOB points.</p> </td> </section> <td ><img src="https://cdn.shopify.com/s/files/1/0275/3318/0970/files/get-rewarded.png?v=1662005202"/> <p >Get Rewarded</p> <p> Enjoy special rewards by redeeming your
accumulated FOB points.</p> </td> </tr> <section > <tr> <td ><img src="https://cdn.shopify.com/s/files/1/0275/3318/0970/files/early-access.png?v=1662005202"/> <p >Early Access</p> <p>Get early access to new product launches
and sales promotions.</p> </td> </section> <section > <td ><img src="https://cdn.shopify.com/s/files/1/0275/3318/0970/files/Tier-Benefits.png?v=1662005202"/> <p >Tier Benefits</p> <p>Advance to next tier for more benefits
and discounts.</p> </td> </tr> </section> </table> </th> </tr>
</tr>
<tr id="section-6465178" >
<th style="mso-line-height-rule: exactly; padding: 0 36px 9px;" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
<!-- Button : BEGIN -->
<tr>
<th style="mso-line-height-rule: exactly; border-radius: 1px; padding-bottom: 0px;” align="center" bgcolor="#8c734b" valign="top">
<a href="https://byndartisan.com/" target="_blank" style="color: #ffffff !important; text-decoration: none !important; text-underline: none; word-wrap: break-word; line-height: 12px; font-family: 'Baskerville'; font-size: 12px; font-weight: 900; text-transform: uppercase; text-align: center; display: block; background-color: #8c734b; border-radius: 1px; padding: 1px 20px; border: 15px solid #8c734b;"><span style="line-height: 12px; color: #ffffff; font-weight: 900; text-decoration: none; text-underline: none; letter-spacing: 0.5px;"><!--[if mso]> <![endif]--><span data-key="6465178_text_on_button" style="line-height: 12px; color: #ffffff; font-weight: 900; text-decoration: none; text-underline: none; letter-spacing: 0.5px;">Find Out More</span><!--[if mso]> <![endif]--></span></a>CodePudding user response：
You can wrap element into div/section ect. and set buttons width with percents.
You can set a concrete dimensions, e.g. button width: 170px.
Here is the snippet with percents. You can change width to concrete, pixels dimension.
I'd suggest you to set also min-width to a wrapper component:)
body {
display: flex;
justify-content: center;
background-color: rgb(233,233,233);
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
background-color: rgb(244,244,244);
}
button {
background-color: transparent;
border: 2px solid black;
text-transform: uppercase;
padding: .75em 1.5em;
margin: 2em 0;
width: 50%;
cursor: pointer;
}
.desc {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.desc h2 {
flex-basis: 40%;
}<div >
<button>shop now</button>
<h1>More on the friends...</h1>
<div >
<h2>Earn Points</h2>
<h2>Get Rewarded</h2>
<h2>Early Access</h2>
<h2>Tier Beneftis</h2>
</div>
<button>find out more</button>
</div>