Skip to content

Commit fcda699

Browse files
committed
Merge pull request astropy#13 from kayleanelson/master
added additional comments to css for tweaking mobile experience
2 parents 941e6bb + feb81a1 commit fcda699

File tree

2 files changed

+14
-2
lines changed

2 files changed

+14
-2
lines changed

css/style.css

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,9 @@ hubblesite.org. */
6767

6868
#wrapper{
6969
margin:0 auto;
70-
max-width:960px;
70+
max-width:960px;
7171
padding:0 10px;
72-
min-width: 320px;
72+
min-width: 320px; /* min-width of whole site */
7373
}
7474

7575
a{
@@ -439,6 +439,8 @@ section.install ul li a.right{
439439
float: right;
440440
}
441441

442+
443+
/* Make tweaks here to accomodate additional tabs */
442444
@media all and (max-width: 630px) {
443445
section.install ul li a{
444446
padding:10px 2px;
@@ -456,6 +458,7 @@ section.install ul li a.right{
456458
display: none;
457459
}
458460
}
461+
/* end changes */
459462

460463

461464
section.install ul li:first-child a{

editing_tips.txt

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
Editing the installation instructions tabs:
2+
3+
1) To add additional tabs, copy the format used by existing tabs, including wrapping the text title in the table in a span tag.
4+
5+
2) When the window width becomes less than a specified value, the css of span tag will switch to display:none and the padding on the tab will be adjusted slightly. If adding additional tabs, the values for this transition will be have to be tweaked in css/style.css. I've marked this area (l:439-456 in this commit) with the comment: "/* Make tweaks here to accommodate additional tabs */". Change the max-width parameter on both @media styles to allow the tabs to shrink gracefully when resizing the window.
6+
7+
The first style shrinks the font size and padding to allow the full text to appear on tablets. The second style hides the text for optimal viewing on phones. Feel free to further adjust font-sizes and padding in these styles to produce the optimal experience.
8+
9+
3) If the number of tabs increases, it may be necessary to adjust the min-width of the whole site. This can be done by tweaking the min-width style under #wrapper (l:61 in this commit). Try to avoid increasing this value too much and instead adjust padding, font size or image sizes as in step (2) or else you will get a horizontal scrollbar on phones which is less than ideal.

0 commit comments

Comments
 (0)