Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Arturo Espinoza
Arturo Espinoza
9,181 Points

Please help review my site and help me center things.

I need help checking my code and also would appreciate any suggestions on making the site better. http://hoteltraining.co/

Yall can see he html direct from the website and I have posted css below so everyone can see my codes.

Some of the issues I need help with are:

1

SOLVED

2

When viewed on mobile the nav is suppose to stack one page on top of another I believe its inline block but it doesn't seem to change. Also when you change the page size (layout) the nav should fit to screen but it also stacks in an ugly way.

/********************************
Body
*********************************/
body { 
  background: #9E6B05;

}

/********************************
Nav
*********************************/
nav:after {
  content: "";
  display: table;
  clear: both;
}
ul{
  padding: 0;
  list-style: none;
  text-align: right; 
  max-width: 100%; 
  background: #7C7062;

}
ul li{
  float: right;
  width: 100px;
  text-align: center;
  line-height: 5px;
}

ul li a{
  display: block;
  padding: 20px 10px 23px 10px;
  color: #003366;
  background: #7C7062;
  text-decoration: none;
}

ul li a:hover{
  color: red;
  background: #E0EAF4;
}

ul li ul{
  display: none;
}

ul li:hover ul{
  display: block; /* display the dropdown */
}


/********************************
Title
*********************************/

h1 { 
   text-align:center;
   padding: 30px 20px;
   background: #7C7062;
   text-shadow:3px 3px 2px #38595E;
}

.heading,
.footer-name,
div {
  max-width: 100%;

}

/********************************
Image
*********************************/

div {
    margin:0 auto;
    width:1220px;
}

img { 
      width:300px; 
      height:325px; 
      background:steelblue; 
      border-radius:15px; 
      cursor:pointer; 
      -webkit-duration: .3s; 
      -moz-duration: .3s; 
      -o-duration: .3s; 
      transition-duration:.3s; }

img:hover { 
  background:lightcoral; 
  border-radius:50%; 
}

/********************************
flashContent
*********************************/
#panov {
    text-align: center;
} 

/********************************
Tablets and Mobile 
*********************************/
@media screen and (max-width:938px) {

 .column {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    margin:0 auto;
    width:650px;}

}

@media screen and (max-width:340px) {
   #panov,
    .column {
     display: none;} 
}


/********************************
Panoramic View
*********************************/

body, div, h1, h2, h3, span, p {
  font-family: Verdana,Arial,Helvetica,sans-serif;
  color: #003366;
}

body {
  font-size: 10pt;
  background : #F7F6F4;
}

table,tr,td {
  font-size: 10pt;
  border-color : #9E6B05;
  background : #dddddd; 
  color: #005099; 
  border-style : solid;
  border-width : 1px;
}

h1 {
  font-size: 18pt;
}

h2 {
  font-size: 14pt;
}

.warning {
  font-weight: bold;
}

1 Answer

Mika Kujapelto
Mika Kujapelto
6,261 Points
Mika Kujapelto
Mika Kujapelto
6,261 Points

When I checked the site the panoramic videos were centered? Not responsive thought.

This will center the navigation and the nav stack on top of each other on the mobile menu.

ul{ list-style: none; max-width: 50%; margin: auto;
}

Not sure if it's the ideal way thought. Why not use a framework like Bootstrap of Foundation to make things a bit easier? There should be tutorials from both at Treehouse.

Arturo Espinoza
Arturo Espinoza
9,181 Points

Thank you, I was able to fix the issue with the videos. Im just working on the nav now. What do you think of the site. What would you change?