Custom Liquid: custom coded buttons different size

ahana1605 · ‎09-03-2022

Hi all,

I custom coded the blue buttons (code and screenshot attached below), but they are all not aligned and the shorts and skirts button is bigger and also ends at a lower position.

What is a way to make all the buttons the same size with editing the text?

<!DOCTYPE html>
  <html>
  
  <style>
  .button {
    width: 10%;
    border: none;
    border-radius: 12px;
    color: white;
    padding: 20px 22px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    font-weight: 510;
    margin: 20px 55px;
    cursor: pointer;
    }
  
  .button1 {
background: rgb(150,151,254);
background: -moz-radial-gradient(circle, rgba(150,151,254,1) 73%, rgba(255,255,255,1) 170%);
background: -webkit-radial-gradient(circle, rgba(150,151,254,1) 73%, rgba(255,255,255,1) 170%);
background: radial-gradient(circle, rgba(150,151,254,1) 73%, rgba(255,255,255,1) 170%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9697fe",endColorstr="#ffffff",GradientType=1);
}

  
  </style>

<body>

  <div class="center">
  
    <button class = "button button1"> Dresses
    </button>

    <button class = "button button1"> Tops
    </button>

    <button class = "button button1"> Pants
    </button>

    <button class = "button button1"> Shorts
    &
    Skirts 
    </button>
  
  </div>
  
</body>
</html>

made4Uo · ‎09-03-2022

Hi @ahana1605,

Do you mean without editing the text? If so, please follow the instructions below

1. From your Admin store, go to Online store > Themes > Click Actions > Edit code
2. Open the Asset folder, and find the base.css file.
3. Add the code below.

button.button.button1 {
    white-space: nowrap;
    width: 12%;
}

If this fixed your issue Likes and Accept as Solution is highly appreciated.☕ Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

KetanKumar · ‎09-03-2022

@ahana1605

can you please send store url?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing