Centering buttons on Debut -theme (customs HTML -section)

Highlighted
Explorer
60 2 6

I faced a challenge when centering buttons on my Shopify store.

This is the code so far:

 

<a class="button" href="https://ewayfi.myshopify.com/collections/kaikki-tuotteet" target="_blank" rel="noopener noreferrer">Shop now</a> <style>
.button {
   background-color: #96bf48;
   color: #FFFFFF;
   font-size: 19px;
   padding: 10px 30px;
   text-align: center;
   display: block;
   text-decoration: none;
   margin: 0px auto;
   width: 40%;
}
</style>

 

 

My question: The button looks good on the desktop now, but on mobile, it doesn't. 

1. The text in mobile view needs to be on one line - now it's on two line

Näyttökuva 2020-08-20 kello 9.42.06.png

 

 

 

 

2. The button needs to look the same on desktop and mobile

How I should modify the code?

 

Thanks,

-KJ

0 Likes
Highlighted

The button width declaration at 40% is 40% of its container; if that's the screen width then the button is only 40% of the screen width so you'd need to increase its width on mobile; try adding this to your style:

@media (max-width: 480px){
  .button{
    width: 70%;
  }
}

 

You may have to play around with the width to get it looking as you'd like. 

Let everyone know if this works for you!

1 Like
Highlighted
Explorer
60 2 6

It works! Looks good on mobile view in Shopify - need to check out again with iPhone when publishing the store.

The code looks like this:

<a class="button" href="https://eway.myshopify.com" target="_blank" rel="noopener noreferrer">Shop now</a> <style>
.button {
   background-color: #96bf48;
   color: #FFFFFF;
   font-size: 18px;
   padding: 10px 30px;
   font-weight: 300;
   text-align: center;
   display: block;
   text-decoration: none;
   margin: 0px auto;
   width: 40%;
   cursor: pointer;
   text-transform: uppercase;
}
.button:hover {
  background-color: #86A746;
}
@media (max-width: 480px){
  .button{
    width: 70%;
  }
}
</style>

 

Question:

If I want the color of the "Shop now" doesn't change when it's Hovered - what should be added to code? I want the Font is white (#FFFFFF).

 

Thank you so far @Verdant-Spark!

-KJ

0 Likes