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
Alan Steffens
2,558 PointsA handful of specific questions on responsive design
I'm an old school designer ... designed a few websites a year for 15 years and have been away for the last 6 years. The change with regards to responsive design and CSS in that time has forced me to do some massive re-training on Team Treehouse!
I think I'm starting to understand the base idea of responsive definition of dimensions in percentages. Right now I'm playing around with background images that push into the footer, so the footer is a part of the base background image. I have some hyperlinked menu text and a transparent GIF I want to show up in the footer. I've been taking the size of the background image and subtracting off the space needed at the bottom for the footer and defining that "content" space as that percentage.
I define that whole background image space as a block and the "content" and footer space as inline-blocks. This tells me roughly where the footer menu text and transparent GIF should go, but it is always a couple of pixels off from where I want it.
First round of questions. Am I going about this all wrong? Should I make my footer menu text a part of the graphic and wrap image mapped hyperlinks around them? That's my old school technique. That would prevent me from caring about the precise footer menu text placement, but image maps are fixed dimensions instead of percentages so won't that hose up the responsiveness, besides the obvious issue of having to regenerate another graphic if there are changes to the footer menu?
Second round of questions. There appears to come a point of diminishing return on max-width of a site, where it just looks like total crap from a content layout perspective. Is there a typical max-width that I should design for? For my current site, that appears to be around 1200 to 1400 pixels. Should I be designing my graphics for that max-width so that they only have to condense and not expand? Haven't played around with expanding a graphic in a browser window, but doesn't that make the image lose resolution?
Last set of questions. When I tried setting a max-width for the site using .content CSS and set the background size to cover, it shoves the content over to the left and no longer centers the website in the browser as I expand beyond the max width. I have background-position set to center top. Am I missing something with regards to using cover with a max-width and keeping it centered in the browser window?
5 Answers
Kathryn Notson
25,941 PointsAlan Steffens:
I don't know which track you are enrolled in, but responsive design means designing with a mobile phone viewport first approach toward desktop viewport (screen sizes).
Percentages, ems, & rems are relative length units relative to the parent element's length & are fluid & scalable, making the element's sizing relative to their container. Pixel units are absolute & are fixed units in relation to each other, not the container element. They precisely position elements on a page.
The CSS box model is content, padding, border, & margins from inside out. Content, padding, & border are inside the container box, margins are outside the box.
You might be experiencing a collapsed margin. It's hard to imagine without seeing your code.
If you are enrolled in the Web Design track, you may find the answer to your problems there. The track covers the subjects I mentioned here. I hope this helps you.
Kathryn Notson
25,941 PointsAlan Steffens:
Post your index.html & main.css code from Workspaces here. Typing a URL link to it won't allow anyone on the community page to view it. See the Markdown Cheatsheet link below. Then we can help you more accurately.
Or try this: https://teamtreehouse.com/community/new-forum-feature-available-attach-your-code-from-code-challenges
Alan Steffens
2,558 PointsI have never used Workspaces, I have my own HTML editor that I use for development. This isn't from a code challenge, it's for a website I'm working on locally on my PC. Regarding my last question (see below) the code is simple. I'll post it below the question. The blue-cropped image is 1200px width in actual width. With background position set to center top, I would expect the browser to center the image as the browser window is expanded, not left-align it. I apologize how long this took me to reply, been away from the treehouse site for several days.
"When I tried setting a max-width for the site using .content CSS and set the background size to cover, it shoves the content over to the left and no longer centers the website in the browser as I expand beyond the max width. I have background-position set to center top. Am I missing something with regards to using cover with a max-width and keeping it centered in the browser window?"
CSS
content {
margin: 0 auto;
max-width: 1200px;
box-sizing: border-box;
position: relative; /
}
.homebackground {
background-image: url('../img/blue-cropped.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
max-width: 1200px; / -- with cover specified this aligns website with left side of browser window (bad) */
height: 100%;
}
HTML <!DOCTYPE html> ... link to CSS file ... <body> <div class="wrapper"> <div class="content, homebackground"> <header> <div class="logo"><img src="img/logo.gif" alt=""></div> <!-- overlaying logo on background-image --> </header> </div> </body> </html>
Kathryn Notson
25,941 PointsAlan Steffens:
Are you using main.css, styles.css, normalize.css, or responsive.css files, or are you just using one CSS file? If you don't use normalize.css, then the browser is interpreting & rendering your web site with it's own code. You can download normailize.css code & adjust it to fit your specific needs. Don't forget to test your code using different browsers, too (Google Chrome, Firefox, Internet Explorer, etc.).
The other problem I see is your <div class="content, homebackground">. The problem is the comma between the two words. I don't know if you need the word "homebackground" unless you identify it as a class="homebackground" in your div in your index.html. You can then use the ".homebackground" as a class in your CSS file. (If you have a class in your HTML, then you would use it in your CSS. They are a pair.) Your entire div code would be <div class="content" class="homebackground">. You could try id="homebackground" & then in your CSS file, identify it with #homebackground. You can have more than one class in an HTML element, but be sure it has a purpose & it will be used. Remember, DRY -"Don't Repeat Yourself."
Hope this helps you fix the problem.
Alan Steffens
2,558 PointsKathryn ...
Thanks so much! I have a handful of CSS files linked into the index.html file that handle embedded fonts and an overlayed accordion menu that I pulled off the Internet, however I had forgot to include normalize.css. I added the link to normalize.css and fixed the inadvertent comma between my classes that you pointed out and now everything works as expected. I'll try and pay it forward to the next person posting issues in the community that I think I can answer. Appreciate all your help ... and patience on my slow replies!
Kathryn Notson
25,941 PointsAlan Steffens:
You're very welcome. Glad that you were able to resolve your problems.
Syntax is very important, & I've made a least 6 humorous syntax errors, & they really did something strange with my web page lessons. (Just try using a hyphen when you should use an underline. It makes a big difference.) Wish I could have made a video out of them to demonstrate them. Everyone would have laughed! Don't let such small errors irritate you. They're difficult to find if you reread your code for hours on end, & unless you have someone else look at your code & find them, you could end up frustrated & feel like giving up, but don't give up. Sometimes, just putting it aside overnight helps. Your brain will sometimes figure things out on its own when you aren't looking at your code. Then you will have something to rejoice about!
Happy coding!
Alan Steffens
2,558 PointsAlan Steffens
2,558 PointsI took the HTML and CSS courses so far which touch on responsive design, but don't really get into specifics. I understand the box model and the base idea of responsive design (percentages instead of pixels on element sizing, em instead of pt on font sizing). All but the last question were conceptual in nature. I'm not sure which question you were attempting to help me with.