CODEWITHSUNDEEP
htmlcss
srsxyz
srsxyz

Reputation: 231

Why is the size of my HTML element not changing

I'm trying to change the size of my 'Send' button but it is not responding. I know it should be a simple fix but I'm not sure about the exact reason why this is happening. I was wondering if anyone could help me out. Thanks.

Here is the CSS:

.send{
    border-radius: 20px;
    background-color: #00e699;
    font-weight: bold;
    color: white;
    position:relative;
    width: 80%;
    height: 80%;
    top: 50px; 
    left: 32%;   
}

Here is the HTML containing the 'send' button

<div class="infocard">
      <div class = "col-md-12" >
        <h3 class="theName"></h3>
        <h3 class="theNum"></h3>
        <h3 class="theDate"></h3>

        <input type = "text" name = "Name" size = "30" class = "textBox" ng-model = "input" />
        <a href= "" style = "text-decoration: none; color: white;" class = "send" ng-click="passPrompt()">Send Message</a>
      </div>
    </div>

Upvotes: 1

Views: 333

Answers (2)

Aleksandar Đokić
Aleksandar Đokić

Reputation: 2333

Just add display type as desired 

.send{
    border-radius: 20px;
    background-color: #00e699;
    font-weight: bold;
    color: white;
    position:relative;
    width: 50%;
    height: 80%;
    top: 50px; 
    left: 32%;   
    display:block;
}
<div class="infocard">
      <div class = "col-md-12" >
        <h3 class="theName"></h3>
        <h3 class="theNum"></h3>
        <h3 class="theDate"></h3>

        <input type = "text" name = "Name" size = "30" class = "textBox" ng-model = "input" />
        <a href= "" style = "text-decoration: none; color: white;" class = "send" ng-click="passPrompt()">Send Message</a>
      </div>
    </div>

Upvotes: 3

Joah Gerstenberg
Joah Gerstenberg

Reputation: 441

a tags are display: inline by default. You need to add display: block or display: inline to add width/height styles.

Upvotes: 2

Related Questions