Skip to content

GitLab

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
T
tpo
  • Project overview
    • Project overview
    • Details
    • Activity
    • Releases
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 53
    • Issues 53
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
  • Merge Requests 0
    • Merge Requests 0
  • CI / CD
    • CI / CD
    • Pipelines
    • Jobs
    • Schedules
  • Operations
    • Operations
    • Incidents
    • Environments
  • Analytics
    • Analytics
    • CI / CD
    • Repository
    • Value Stream
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Members
    • Members
  • Collapse sidebar
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards

GitLab is used only for code review, issue tracking and project management. Canonical locations for source code are still https://gitweb.torproject.org/ https://git.torproject.org/ and git-rw.torproject.org.

  • The Tor Project
  • Web
  • tpo
  • Issues
  • #68

Closed
Open
Opened Apr 10, 2020 by Gus@gus🍕Owner0 of 5 tasks completed0/5 tasks

Tor Download page content issues on smaller screen sizes

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

Assignee
Assign to
None
Milestone
None
Assign milestone
Time tracking
None
Due date
None
Reference: tpo/web/tpo#68