Increase the spacing on the tour. Use col-md, Alternate which side the image appears on for each step, make sure they are still aligned properly when collapsed. Use responsive images.

This commit is contained in:
yackob03 2013-10-05 14:33:31 -04:00
parent 5b99586ffc
commit 0af85e4751
2 changed files with 11 additions and 11 deletions

View file

@ -163,7 +163,7 @@
}
.product-tour .tour-section {
margin-bottom: 20px;
margin-bottom: 60px;
}
.product-tour .tour-section .tour-section-title {

View file

@ -91,37 +91,37 @@
</div>
<div class="tour-section row">
<div class="col-lg-7"><img src="http://1.bp.blogspot.com/-HieEyF9wvVQ/Uk3epFZc6QI/AAAAAAAAADU/-Ov_3v2JkHQ/s640/Screenshot+from+2013-10-03+17%253A12%253A21.png"></div>
<div class="col-lg-5">
<div class="col-md-7"><img src="http://1.bp.blogspot.com/-HieEyF9wvVQ/Uk3epFZc6QI/AAAAAAAAADU/-Ov_3v2JkHQ/s640/Screenshot+from+2013-10-03+17%253A12%253A21.png" class="img-responsive"></div>
<div class="col-md-5">
<div class="tour-section-title">Customized for you</div>
<div class="tour-section-description">
Your personal home screen shows those repositories most important to you, ordered by recent activity.
Your personal home screen shows those repositories most important to you, ordered by recent activity.
</div>
<div class="tour-section-description">Keep up to date on the status of those repositories you deem important.</div>
</div>
</div>
<div class="tour-section row">
<div class="col-lg-7"><img src="http://4.bp.blogspot.com/-0uJZWmoTuaU/Uk3eo8BHAjI/AAAAAAAAADM/PhY-ZNNj0tw/s640/Screenshot+from+2013-10-03+17%253A12%253A41.png"></div>
<div class="col-lg-5">
<div class="col-md-7 col-md-push-5"><img src="http://4.bp.blogspot.com/-0uJZWmoTuaU/Uk3eo8BHAjI/AAAAAAAAADM/PhY-ZNNj0tw/s640/Screenshot+from+2013-10-03+17%253A12%253A41.png" class="img-responsive"></div>
<div class="col-md-5 col-md-pull-7">
<div class="tour-section-title">Useful views of respositories</div>
<div class="tour-section-description">
Each repository is presented with the maximum amount of useful information, including its image history, <b>markdown</b>-based description, and tags.
Each repository is presented with the maximum amount of useful information, including its image history, <b>markdown</b>-based description, and tags.
</div>
</div>
</div>
<div class="tour-section row">
<div class="col-lg-7"><img src="http://4.bp.blogspot.com/-aF-RMMxhKmw/Uk3eoys3wsI/AAAAAAAAADc/1uxE8BJ-QHY/s640/Screenshot+from+2013-10-03+17%253A13%253A07.png"></div>
<div class="col-lg-5">
<div class="col-md-7"><img src="http://4.bp.blogspot.com/-aF-RMMxhKmw/Uk3eoys3wsI/AAAAAAAAADc/1uxE8BJ-QHY/s640/Screenshot+from+2013-10-03+17%253A13%253A07.png" class="img-responsive"></div>
<div class="col-md-5">
<div class="tour-section-title">Share at your control</div>
<div class="tour-section-description">
Share any repository with as many (or as few) users as you choose.
Share any repository with as many (or as few) users as you choose.
</div>
<div class="tour-section-description">Want to share with the world? Make your repository public.</div>
<div class="tour-section-description">Need a repository only for your team? Share with your team members.</div>
<div class="tour-section-description">Need finer grain control? Mark a user as read-only or read/write.</div>
</div>
</div>
</div>
</div>