I would like all buttons to have the same size

[youalma]

Hi,

I managed creating a link page through a different code I found on the shopify community, however I'm having difficulties to find a way to make the turqoise background of the different 'buttons' to have the same width.

https://uniquetasbihs.com/nl/pages/follow-us

This is the code I used 

<div class="text-center">
<p>
<p>
<a href="https://www.instagram.com/uniquetasbihs" class="btn" width="100" vertical-align: middle;>
Instagram
</a>
</p>
</p>
</div>

<div class="text-center">
<p>
<p>
<a href="https://www.facebook.com/uniquetasbihs" class="btn" vertical-align: middle;>
Facebook
</a>
</p>
</p>
</div>

<div class="text-center">
<p>
<p>
<a href="https://www.tiktok.com/@uniquetasbihs" class="btn" vertical-align: middle; width:100%>
Tiktok
</a>
</p>
</p>
</div>

<div class="text-center">
<p>
<p>
<a href="https://wa.me/32490582246" class="btn" vertical-align: middle;>
Whatsapp
</a>
</p>
</p>
</div>

<div class="text-center">
<p>
<p>
<a href="/" class="btn" vertical-align: middle;>
Shop now
</a>
</p>
</p>
</div>

I appreciate any help!

Kind regards,

Yasmina

[Jhon796 · Accepted solution]

Hello, the code has several errors, I took the liberty of fixing it: here is the fixed code in addition to putting all the rectangles equal in size:

<div class="text-center">
  <p>
    <a href="https://www.instagram.com/uniquetasbihs" class="btn" style="min-width: 8rem;vertical-align: middle">
      Instagram
    </a>
  </p>
</div>

<div class="text-center">
  <p>
    <a href="https://www.facebook.com/uniquetasbihs" class="btn" style="min-width: 8rem;vertical-align: middle">
      Facebook
    </a>
  </p>
</div>

<div class="text-center">
  <p>
    <a href="https://www.tiktok.com/@uniquetasbihs" class="btn" style="min-width: 8rem;vertical-align: middle"
      Tiktok
    </a>
  </p>
</div>

<div class="text-center">
  <p>
    <a href="https://wa.me/32490582246" class="btn" style="min-width: 8rem;vertical-align: middle">
      Whatsapp
    </a>
  </p>
</div>

<div class="text-center">
  <p>
    <a href="/" class="btn" style="min-width: 8rem;vertical-align: middle">
      Shop now
    </a>
  </p>
</div>

Here's how to change the size:

/ * Changing the value "8rem" will modify the size of the rectangle * /

style="min-width: 8rem;vertical-align: middle">

If you need to make further adjustments, I recommend hiring an expert

[Kinjalbuha]

hello @Jhon796 

update your code with the below code for all button in same size

<div class="text-center">
  <p>
    <a href="https://www.instagram.com/uniquetasbihs" class="btn" style="min-width: 130px;vertical-align: middle">
      Instagram
    </a>
  </p>
</div>

<div class="text-center">
  <p>
    <a href="https://www.facebook.com/uniquetasbihs" class="btn" style="min-width: 130px;vertical-align: middle">
      Facebook
    </a>
  </p>
</div>

<div class="text-center">
  <p>
    <a href="https://www.tiktok.com/@uniquetasbihs" class="btn" style="min-width: 130px;vertical-align: middle"
      Tiktok">
    </a>
  </p>
</div>

<div class="text-center">
  <p>
    <a href="https://wa.me/32490582246" class="btn" style="min-width: 130px;vertical-align: middle">
      Whatsapp
    </a>
  </p>
</div>

<div class="text-center">
  <p>
    <a href="/" class="btn" style="min-width: 130px;vertical-align: middle">
      Shop now
    </a>
  </p>
</div>

[youalma]

@Jhon796 @Kinjalbuha Thank you so much! You're amazing! 

Yasmina