screenshot of mobile
We are currently using a website platform that is very limited so we resorted to using an HTML button which was working great until we realized how it was displaying on mobile.
How to fix this?
screenshot of desktop
<div style="text-align: center;" >
<br>
</div>
<a href="https://www.beaconfest.com/about"
class="button button1"
>
Learn More
</a>
.button {
border : none;
color : white;
padding : 16px 32px;
text-align : center;
text-decoration : none;
display : inline-block;
font-size : 20px;
font-weight : bold;
margin : 2%px 2%;
transition-duration : 0.4s;
cursor : pointer;
font-family : Arial, Helvetica, sans-serif;
width : 25%;
margin-left : 37.5%;
margin-right : 37.5% text-shadow:none;
}
@media (min-width: 768px) {
.responsive-btn {
display : inline-block; /* Change to inline-block on desktop */
width : auto; /* Width adapts to content on desktop */
max-width : 300px; /* Optional max-width */
padding : 0.75rem 2rem; /* Slightly different padding */
}
}
.button1:hover {
background-color : #0074BC;
color : White;
border : 2px solid #FFCB05;
}
.button1 {
background-color : #FFCB05;
color : Black;
border : 2px solid #0074BC;
text-shadow : none;
}
