I would like all buttons to have the same size

Solved
youalma
Tourist
5 0 1

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

Accepted Solution (1)

Accepted Solutions
Jhon796
Tourist
4 1 2

This is an 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

View solution in original post

Replies 3 (3)
Jhon796
Tourist
4 1 2

This is an 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

View solution in original post

Natztech
Shopify Partner
2236 565 1373

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
Tourist
5 0 1

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

Yasmina