1

I am a total newb to coding and have been tasked with redesigning my school's website.

I use buttons for navigation on some of the pages and while they look good on desktop, they look like garbage on mobile. How do I make them look better? At the very least some padding between them so they don't look like a run-on of one another?

Desktop

Mobile

I'm using this template: https://colorlib.com/wp/template/appetizer/

This is my code:

<div class="container-fluid">   
    <div class="col-md-12 col-sm-12 text-center ftco-animate">
        <h1 class="mb-4 mt-5"></h1>
        <p>
            <a href="#history" class="btn btn-primary p-3 px-xl-4 py-xl-3">History</a> 
            <a href="#almamater" class="btn btn-primary p-3 px-xl-4 py-xl-3">Alma Mater</a>
            <a href="#fightsong" class="btn btn-primary p-3 px-xl-4 py-xl-3">Fight Song</a>
            <a href="#missionstatement" class="btn btn-primary p-3 px-xl-4 py-xl-3">Statements</a>
            <a href="#admin" class="btn btn-primary p-3 px-xl-4 py-xl-3">Meet Our Administration</a>
            <a href="index.html#principalsmessage" class="btn btn-primary p-3 px-xl-4 py-xl-3">Message From the Principal</a>

        <p>
            <a href="academics/faculty.html#facultydirectory" class="btn btn-primary p-3 px-xl-4 py-xl-3">Faculty and Staff Directory</a> 
            <a href="resources/NHS_Student_Handbook_revision20192020.pdf" target=_blank class="btn btn-primary p-3 px-xl-4 py-xl-3">Student/Parent Handbook&nbsp; <img src="images/downloadarrow.png"></a> 
            <a href="resources/NorthshoreHigh17-18SIP.pdf" target=_blank class="btn btn-primary p-3 px-xl-4 py-xl-3">School Improvement Plan&nbsp;<img src="images/downloadarrow.png"></a> 
            <a href="resources/Traffic Map and Instructions.pdf" target=_blank class="btn btn-primary p-3 px-xl-4 py-xl-3">Traffic Map&nbsp;<img src="images/downloadarrow.png"></a> 
            <a href="resources/Campus_Map.pdf" target=_blank class="btn btn-primary p-3 px-xl-4 py-xl-3">Campus Map&nbsp;<img src="images/downloadarrow.png"></a>  



        <p>
            <a href="resources/Campus_Tour.pdf" target=_blank class="btn btn-primary p-3 px-xl-4 py-xl-3">Campus Tour &nbsp;<img src="images/downloadarrow.png"></a> 
            <a href="resources/Map to SLU.pdf" target=_blank class="btn btn-primary p-3 px-xl-4 py-xl-3">Map to SLU for Graduation&nbsp; <img src="images/downloadarrow.png"></a> 
        </p>

    </div>
</div>
rackfocus
  • 11
  • 2

1 Answers1

0

These button size are great for desktop but they are not great for mobile view. I will suggest you to make your button size responsive along with the alignment in different viewport. Here is the example you can apply to your layout - https://www.codeply.com/go/FoEUO7XCDU

Saurav Kumar Singh
  • 1,352
  • 7
  • 18
  • Hi Saurav, Thanks for getting back so quickly. So, to clarify, what steps should I take exactly? I tried just adding the css from the codeply to my style.css file and it didn't work. I just started learning to code in June so you kind of have to explain it like I'm five. – rackfocus Jan 02 '20 at 04:23
  • Oh wait, I think I got it after looking at this: https://stackoverflow.com/questions/19934647/resize-buttons-responsively-in-bootstrap I added the media queries to my css and then btn-responsive to my buttons and it looks like it is working? Is that good or are there any problems you can foresee? – rackfocus Jan 02 '20 at 04:26
  • Ah man. I spoke too soon. I only applied it to like...three buttons and it was working so I got excited. Applied it to the rest and it made them smaller but still smushed them together. – rackfocus Jan 02 '20 at 04:31
  • try providing top-margin to the buttons. As a temporary css you can try `.btn-primary {margin-top: 10px;}` – Saurav Kumar Singh Jan 02 '20 at 07:48
  • That works beautifully. Thank you! Why temporary, though? – rackfocus Jan 04 '20 at 00:37
  • Because you should create your own class that and write this css with that class, use that class along with btn btn-primary. The reason behind this is changing btn-primary css will add to margin to any button across all over ui which uses btn-primary class – Saurav Kumar Singh Jan 04 '20 at 03:54