Skip to content

Download page content displays poorly on small screen devices

We received this feedback and solution on Download page.

I had noticed that on the download page there are some issues with content displaying inappropriately on smaller screen sizes. The circular download logo button sections for Windows, OS X, Linux, and Android are overlapping each other for various reasons, on various screen sizes. I have reworked the code to make this section display appropriately for all mobile screen sizes.

Here is my solution (NOTE: I will refer to the page source code lines (view-source:https://www.torproject.org/download/) for your reference.):

  • 1. Space the circular download button sections evenly widthwise by adding the Class "mx-auto" to

    on the following lines: 120, 141, 162.

  • 2. Remove the "py-3" Class from class="col-sm-6 col-md-3 py-3" on the following lines: 119, 140, 161, 182

    • The reason for removing the Class "py-3" is because if the padding values associated with this class are edited it changes the padding on the download link text section which uses the same Class below the circular download buttons section. Removing this Class from the mentioned lines doesn't remove any "needed" CSS.

    • 3. For fixing the spacing issues between the 4 circular download buttons add {padding: 2em 1em 5em 1em;} as an inline style to the divs on the following lines: 119, 140, 161, 182

    • 4. For styling the space around the download text links section remove the Class p-5 from

      and add {padding: 1em 3em 0 3em !important;} as an inline style to the
      on line 192.

      feedback-download-page-before

      feedback-download-page-after

      • 5. For fixing the overlapping rectangular buttons (Download for Windows, Download for OS X, etc...) in the circular downloads buttons section, an easy fix, I found is removing the word "for" from the button which will shorten the width of the button so that it doesn't overlap the button next to it. To make the text read nicer, reverse the word "Download" with the manufacture name (Windows). - For example instead of using the existing text "Download for Windows" do, "Windows Download".

      before

      after