For the past few months, I've been diligently working on a project that suddenly hit a snag today. Upon inspecting my website, I noticed that all my button sizes appear to be uniform. I typically use Chrome's developer tools to troubleshoot my websites, but upon investigating, everything seemed normal. Can someone please assist me in identifying the issue and providing guidance on how to rectify it?
Below is the snippet of .aspx code:
<div class="row section text-center">
<h2><%: Page.Title %> Page</h2><br />
<asp:Button ID="stReturnButton" runat="server" CssClass="stButton-lg" Text="Back to Training Portal" PostBackUrl="~/SST/SafetyTrainingPortal.aspx" />
<hr />
</div>
<div class="row col-xs-12 text-center">
<div class="col-xs-6 text-center">
<asp:Button ID="btnEditUpdate" runat="server" Text="Update Employee Certificates" CssClass="stButton-lg" PostBackUrl="~/SST/SUPERVISOR/UpdateCertificates.aspx"/>
</div>
<div class="col-xs-6 text-center">
<asp:Button ID="btnAddCerts" runat="server" Text="Update Employee Profile" CssClass="stButton-lg" PostBackUrl="~/SST/SUPERVISOR/UpdateEmployeeProfile.aspx" />
</div>
Here is the current appearance of the page:
This is the CSS styling for the buttons:
.stButton {
width: 190px;
opacity: 1.0;
color: #0e4676;
background-color: #9FCF6E;
border-color: #357ebd;
padding: 5px;
margin-bottom: 5px;
border-radius: 10px;
box-shadow: #063156 3px 3px;
cursor: pointer;
user-select: none;
text-align:center;
}
.stButton-lg {
width: 325px !important;
opacity: 1.0;
color: #0e4676;
background-color: #9FCF6E;
border-color: #357ebd;
padding: 5px;
margin-bottom: 5px;
border-radius: 10px;
box-shadow: #063156 3px 3px;
cursor: pointer;
user-select: none;
text-align: center;
}
You can observe that there are styles defined for regular buttons as well as larger buttons in the provided CSS. The larger button styling is specifically targeted within the .aspx code. I have even used "!important" at the end of the width declaration, but unfortunately, the issue persists. I have also attempted inline styling without success. Additionally, I have checked the page on IE, Chrome, and Edge browsers.
Furthermore, here are the links featured in the Master Page along with an overview of the project folder structure: I have disabled the Script.Render placeholder since I prefer declaring the links directly above it. Despite trying different configurations, the uncommented Script.Render did not provide a solution either.
I believe I've covered all aspects of the problem, but if I overlooked something crucial, kindly point it out, and I will include it promptly. Your assistance and insights are greatly appreciated.