I'm just suggesting what you should do, not actually saying do it this way. I realize that sometimes it doesn't come across as an opinion or suggestion.
You could leave it as it is, I just believe that I think it's better coding if it were to have cleaner coding.
Find the DIV with the class="intro" select it and then look at the Overview pane and the selected element is a DIV with the label Intro, which is why I stated in the Overview pane for my example. :)
The way the TAB's and other components work is based on an element triggering another element to do something. The app uses a numbering system for example.
<a href="#tab-1">First Tab</a> <-- triggers the div with id="tab-1"
<a href="#tab-2">Second Tab</a> <-- triggers the div with id="tab-2"
<a href="#tab-3">Third Tab</a> <-- triggers the div with id="tab-3"
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="tab-1"> <-- triggered by href="#tab-1"
...
</div>
<div class="tab-pane" role="tabpanel" id="tab-2"> <-- triggered by href="#tab-2"
...
</div>
<div class="tab-pane" role="tabpanel" id="tab-3"> <-- triggered by href="#tab-3"
...
</div>
</div>
If you want to change a tab's link href="#tab-x" you also have to correct the corresponding <div class="tab-pane" role="tabpanel" id="tab-x"> to be the same number (x=number)
Probably easiest is in the HTML pane to do a find for tab-9 and change it to tab-6 then find the next instance of tab-9 and change it to tab-6 etc.. etc.. Does it matter, no, it's just an aesthetic thing really. It probably got out of order if you had deleted a tab or something like that.
Regarding "In your item #6 and #7 are you just asking us to “drag” those into the new DIV with class=”photo-gallery”, but not to change the class? Correct?", Correct, just dragging and dropping the element in place.
You want a couple more things to work on :) Your using the headings in the .main-header improperly. Also, hehe stop replicating stuff to hide and show based on screen sizes, your over doing it there. It's much cleaner to understand the media query usage properly rather then replicate content over and over and then hide/showing the same thing.
For example, based on what you have, I think it would be better like this.
HTML
<div class="main-header">
<h1 class="text-center text-muted hidden-xs">Historic Seaport Home & Garden Rental</h1>
<h2 class="text-center text-info">1853 Captain Wheeler House</h2>
<h3 class="text-center text-muted">Mystic Connecticut Vacation Rental</h3>
</div>
CSS
@media (max-width:767px) {
.main-header h2 {
margin-top:10px;
margin-bottom:10px;
font-size:18px;
}
}
@media (max-width:767px) {
.main-header h3 {
margin-top:10px;
margin-bottom:10px;
font-size:14px;
}
}
@media (max-width:991px) and (min-width: 768px) {
.main-header h1 {
margin-top:10px;
margin-bottom:10px;
font-size:18px;
}
}
@media (max-width:991px) and (min-width: 768px) {
.main-header h2 {
margin-top:20px;
margin-bottom:10px;
font-size:24px;
}
}
@media (max-width:991px) and (min-width: 768px) {
.main-header h3 {
margin-top:10px;
margin-bottom:10px;
font-size:18px;
}
}
@media (min-width:992px) {
.main-header h1 {
margin-top:10px;
margin-bottom:10px;
font-size:18px;
}
}
@media (min-width:992px) {
.main-header h2 {
margin-top:20px;
margin-bottom:10px;
font-size:30px;
}
}
@media (min-width:992px) {
.main-header h3 {
margin-top:10px;
margin-bottom:10px;
font-size:18px;
}
}
Based on what you have, you should be able to copy/paste the entire CSS block as is and then update your HTML accordingly, if you want. :)
Saj
P.S. I goofed and forgot the .main-header on the media queries so I updated that so you wouldn't effect all headings :)