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
Nas Jones
7,849 PointsProject help
https://w.trhou.se/9hc3w0y5qm This is a snapshot of my workspace. Below both my specs classes there's a bottom border i applied, I also want to do that below the info class however there's an issue. When i do apply the bottom border it applies to the picture on it and not below it in the empty white space how do i fix this?. I also tried applying it below the ".top" class and it does the same thing it applies the border to the picture and not below it. It also takes up the whole width of it also which i had a previous issue with specs class. Why do i keep encountering these issues? Am i not understanding the flexbox?. Also on a side note, I only know basic html and css so advanced code talk i will not understand so try and keep it as simple as possible please thank you.
Nas Jones
7,849 PointsYes I did that to create space, But i just lowered it to 300px and the issue i have is still there. The bottom border takes up the whole width of the page and its at the bottom of the picture instead of the whitespace. I want it to emulate the bottom border at the end of my lists right before the footer
17 Answers
Reggie Williams
Treehouse TeacherHey Haki Asllani were you able to figure this out? the Workspace link is no longer working
Nas Jones
7,849 PointsHello, no i haven't figured it out yet, Thank you for trying to help though I appreciate it. It's getting a little frustrating at this point. https://w.trhou.se/wwu8w6wrwe This is my workspace snapshot.
Reggie Williams
Treehouse TeacherHey Haki Asllani looking at your original question, the border-bottom is applied to div with images as backgrounds not the pictures themselves. The backgrounds are set to cover and take up the whole div.The border will always take up the full width of the element it is applied to. You can try wrapping the div in another div and apply separate styling to each.
Nas Jones
7,849 PointsHello I tried wrapping a div around it and it fixed the issue of applying the bottom border in the whitespace instead of the bottom of the picture but the border still takes up the whole width of the page. https://w.trhou.se/oj29fstt12 This is guils example project that i'm trying to emulate if you look at after every section almost, he applies a bottom border but it doesn't take up the whole width of the page. That's what i'm trying to achieve.
Reggie Williams
Treehouse TeacherHaki Asllani where Guil is applying border bottom here, those sections have widths that are less than 100%. You can set width's like 75% for your sections so that their borders don't take up the whole width of the page
Nas Jones
7,849 PointsI tried that and it didn't work, The picture that's covered didn't take up the whole page like how i want it to. I don't know if you're able to see guil's webpage or mine but we both have one of our pictures take up the whole page but the difference is below his picture he can apply a bottom border that doesn't take up the whole width of the page but when i do it, problems occur, i dont understand
Reggie Williams
Treehouse TeacherHaki Asllani In Guil's project the image that takes up the page doesn't have a border at all. The div below it with a width of 75% has a top border
Nas Jones
7,849 PointsThank you for pointing that out, I fixed the issue and all borders are working fine. https://w.trhou.se/1wxqmqqkay This is a snapshot of my updated workspace, If you compare mine to guils what can i do better so i wont encounter these issues again?. Not only those border issues but issues in general what can i do better period?. I noticed margin: auto made differences whenever i removed that for example in my info section the picture would get messed up, what does that do and what is the importance of that?. I want to become be at this what can i do to improve as far as you can see?.
Reggie Williams
Treehouse TeacherHey Haki Asllani great work! This is looking awesome. One thing that may help to give the layout more symmetry is giving the two columns at the bottom background colors and equal width. I think the site looks great but it might help if those sections appear more similar in size. The Red text at the top can also be difficult to read so you could increase the size and contrast there. Margin auto is often used to center as it will give an element equal margin on both sides. You're on your way to improving already, keep up all the practice and learning!
Nas Jones
7,849 PointsThank you I appreciate it, As far as the list section what can I do to make them the same size and width I ask that because if you notice all the way at the bottom of my CSS I have a clear fix because I floated each list If I apply the same width and try to make them the same size I'm afraid it will ruin the positioning. So what do you recommend?
Reggie Williams
Treehouse TeacherHaki Asllani float is lesser used these days but flexbox is amazing for layouts as well as grid. Try this flexbox course next. You can replace your float styling and have more control over your layout https://teamtreehouse.com/library/css-flexbox-layout. Grid is also very useful for layouts https://teamtreehouse.com/library/css-grid-layout
Nas Jones
7,849 PointsThose are a little later on in my track. If i build my next project after i go through those courses i will use what i've learned from there as well as what you've helped me with. I'm going to keep my project as such but i'm going to add font styles and the media queries. Looking at my project what should do as far as the media queries? Also what is the purpose of the media queries just to be sure
Reggie Williams
Treehouse TeacherHaki Asllani, great plan. Media queries help to adjust layouts for different screen sizes. It may help to review the course and practice them there. One thing you could do with your layout is to go from two columns to one column when the page is smaller.
Nas Jones
7,849 PointsBefore i apply the media queries i will do what you said go back in my course and make sure i know what i'm doing. https://w.trhou.se/ls4vimyp0c This is my workspace updated, I have some questions. I applied the font families and i understand the concept of font stacking if that's the correct way of saying it. What i don't understand is at the top of my css sheet as well as guils too they were imported from another folder with fonts in them. I don't understand that portion of code what is the purpose of it? What if i remove it and just apply regular fonts?. Also in my footer i have the "here" word wrapped but if you look closely there's a little space before that also wrapped how can i fix that so i can just leave the word here wrapped?
Reggie Williams
Treehouse TeacherHey Haki Asllani. The import statements allow you to access the fonts in the file they are imported to. You can remove it if you are using fonts you already have and don't need to import. The space appears because there is a space inside of your <a></a> which you can remove
Nas Jones
7,849 PointsHey reggie, I tried backspacing the word "here" in the <a> tag and what happens is the word click and here are right next to each other with not space which is why i added it originally. But then if i do add the space there's an empty space that's also underlined and wrapped. Another issue im having is with my media queries. I'm trying to have one list on top of the other when it reaches a certain width not side by side like it originally is. It does appear vertically which is what i want but the bottom list the ".rspecs" isn't horizontally positioned exactly like the list above it i tried adjusting the margin and padding and nothing seems to work. https://w.trhou.se/wd1ydvfbap This is my workspace. https://teamtreehouse.com/workspaces/41629461 That's guils project which im trying to emulate if you notice his lists appear on top of each other which im trying to do.
Reggie Williams
Treehouse TeacherHey Haki Asllani if the space is inside the tag it will be underlined as you have tried, try adding the space outside of the <a> tag. The horizontal alignment is because you're giving both sections different padding values in the base styles and media queries
Nas Jones
7,849 PointsI fixed the <a> tag thank you. I noticed at the media query width the top header was too close so i added line height which fixed it. I don't understand the list issue though. I understand what you're saying but isn't that what's supposed to happen? the smaller or larger the width certain things change. To compensate or fix it padding can be added, I tried adding equal padding to both lists and they still ended up not exactly lined up correctly on top of each other like guils. What do you suppose i do?
Reggie Williams
Treehouse TeacherHaki Asllani your .rspec column has a padding of 150px while .hspec has a padding of only 100px. If you want them both indented the same distance or aligned you'll need the left padding values to be equal. Have you practiced using chrome developer tools to inspect your page?
Nas Jones
7,849 PointsHey thank you for pointing that out I fixed it and to answer your question i have taken that course already I used it to help me with the media queries. I noticed when i shrink the width of my page to smallest amount there are still issues when i do it with guils page it doesn't have issues at the smallest width. I noticed he only applied two media widths just like me, what am i doing wrong? https://w.trhou.se/yxtzyg8s5o This is my updated workspace. Also bear with me because html and css is something new to me when i was in college i was just taught backend stuff, so i'm still learning.
Reggie Williams
Treehouse TeacherHaki Asllani when I took a look it seems like at smaller screen sizes the sections don't scale down in size. One way to solve this could be to set the width property for these elements in percentages or viewport widths so that they are never wider than the screen. Try setting different values in chrome dev tools so you can test out changes. You're doing great so far! Getting practice with projects is one of the best ways to learn html/css.
Nas Jones
7,849 PointsThank you, I fixed the columns the width's were already in percentages. I noticed the lists lined up completely with each other but the "hrtitle" title didn't so it clicked I remember i created classes for both titles. However i noticed something else, at 728px which is the second media query the "info" class is fine but at 531px and lower it takes up too much width should i create a new media query? I don't know what to do. If i target it in the 728px media query the info class will get smaller when it doesn't have to
Reggie Williams
Treehouse TeacherHaki Asllani have you made changes to your workspace? I'm not seeing the info tab take up the full space in your last link. In the flexbox unit you'll learn more tools to make your elements responsive as it sounds like you're trying to do here
Nas Jones
7,849 Pointshttps://teamtreehouse.com/workspaces/41635965# This is my updated workspace. If you shrink the screen to a width of 533px and below you'll see the right side of the info box not have any more white space. I can add a media query targeting that but i'm asking you is that the correct solution?. Because my other media query is for 728px and lower but i don't want the info box to shrink at 728px because there's no need at 728px. At 533px and smaller is where the info box starts looking off
Reggie Williams
Treehouse TeacherHey Haki Asllani this link won't work for me or others can you share a snapshot like you previously have?
Nas Jones
7,849 PointsSorry about that i forgot that link wont work. https://w.trhou.se/scu1bsszf8 This is a snapshot. Also for some reason this issue only happens on a normal desktop but i went on mobile and the info section was fine which i don't understand because i didn't target it in any media queries i have.
Reggie Williams
Treehouse TeacherHey Haki Asllani try adding a *{max-width:100%} to your css so nothing can be wider than 100% of the page
Nas Jones
7,849 PointsHey reggie, so that fixed alot of things and i viewed it on my phone and it looks great there are no issues on mobile. But a different issue came up, I noticed on desktop on my laptop at 547px the info box's text the paragraph in it the bottom words start disappearing. What can i do to fix that? The box itself is a class called "info" the text in it has a class called "mainp" by the way.
Reggie Williams
Treehouse TeacherReggie Williams
Treehouse TeacherHey Haki Asllani there is a large(600px) margin bottom on your header that is causing all the whitespace. The border is at the bottom of the header but the margin pushes the next div further down