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
Solved! Go to the solution
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
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
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>
User | RANK |
---|---|
221 | |
62 | |
48 | |
27 | |
24 |