Search code examples
htmlcssbuttonresponsive-designalignment

Text not aligning with buttons when page size is small (phone width). Top of text aligning with center of button, not top

I have a simple setup with buttons and a description of what they do. It looks great when displayed on a full computer screen or a tablet, but gets misaligned once the screen becomes as small as a phone screen. It seems the top of the description paragraph is aligned with the center of the button, as opposed to the top of each element being aligned.

I have tried setting it up first as a table (tr/td) and then as divs/spans to act like a table, but have the same issue with each set up.

A picture of the problem is below, as displayed on chrome set to minimum size. Similar issues arise in other browsers.

I have also included a jsfiddle. You can recreate the issue by decreasing the bottom-right window to a small size (2-3 inches wide, like on a phone): https://jsfiddle.net/f6fbkrg0/4/

HTML:

<div class="css-table">
  <div class="css-tr">
    <span class="css-td"><button class="admin-table-button" id="set-time-button" style="width:100%;height:100%">Set Time</button></span>
    <p class="button-description">Syncs the time on the machine to the system time of this device</p>
  </div>
  <div class="css-tr">
    <span class="css-td"><button class="admin-table-button" id="night-mode-button" style="width:100%;height:100%">Night Mode</button></span>
    <p class="button-description">Toggle alternate color shceme for easy viewing in low-light conditions</p>
  </div>
</div>

CSS:

.css-td {
  display: table-cell;
  padding: .5em 5px;
}

.css-table {
  display: table
}

.css-tr {
  display: table-row
}

.button-description {
  padding-left: 25px;
  vertical-align: middle
  text-align:
}

.admin-table-button {
  margin-top 0px;
}

HERE

Solution

  • Two things to watch:

    1. Look at adding vertical-align: top; on your .css-td class
    2. The <p> tag has default browser margins if you don't specify those yourself.

    Try setting the top margin to 0 and see if that or a combination of both of these things does the trick for you.