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
Cesar Vanbuskirk
6,672 PointsBootstrap Grid System Question
Okay so I built sections of my portfolio with bootstrap for the responsive benefits but the smallest width the bootstrap columns go is 330px? So the elements stick out a little past the iphone's 320px width resolution and throw off the whole look of the site by adding extra white space next to my background images? I'm not sure how to fix this? Any help would be appreciated thanks!
2 Answers
chrisdev
16,941 PointsHi Cesar, I'm just going to assume you're talking about www.cvanb.us? If you're not, well I found a few things that could help anyways.
You have many things going on that are creating a horizontal scroll bar. Lets start with the imac image under "My Work". Then lets straighten out the iphone image in the same media query.
Put the following code into your CSS:
@media (max-width: 405px) {
.imac { margin-left: 0; }
.iphone { margin-left: 0; }
}
Continuing under your "My Work" section, change your three col-xs-4 divs to col-xs-12. This will lay them out much cleaner in the col-xs viewport and solve more horizontal scroll bar issues.
Now for your contact form at the bottom. Honestly there are a lot of changes that need to be made, and I'm running short on time, so I'll give you a some big hints on how I was able to fix all overflow issues.
-Make sure the div wrapping around your whole contact area is given a col-xs-12. This gives the wrapping div a width of 100%. -Give the div that contains all of the input elements a col-xs-12 as well. -Replace a bunch of your fixed widths with 100% or another percentage of your choose. When creating a fluid layout, make sure to always use percentages instead of pixels, especially with Bootstraps, it will make your life much easier. -Find more fixed widths (in pixels) and replace them with percentages like in your "form {width: 965px}". -TIP/Challenge: When using Bootstraps, it's easy to make a completely responsive layout with only using two media queries, sometimes three. It's not easy at first, but with some practice, it will save you tons of time and less code which will make your web projects run faster.
I hope this helps! If you still need help just reply and I'll do my best to get back to you.
Jesus Mendoza
23,289 PointsThe size of the coulmn may vary depending of the class you give to the container that you created in the html.
col-xs = column for extra small screens (the size of the column is smaller in really
small screens)
col-sm = column for small screens
col-md = column for medium screens
col-lg = column for large screens
Take a look to the bootstrap documentation. http://getbootstrap.com/css/#grid
Cesar Vanbuskirk
6,672 PointsWell that dictates when the elements should become responsive but I'm having trouble with the actual element being larger than the iphones resolution, the bootstrap element is 330px at the smallest
Cesar Vanbuskirk
6,672 PointsCesar Vanbuskirk
6,672 PointsThanks buddy, I just saw your reply but for some reason when I re-coded everything now they re-size correctly? Idk I must have made a mistake somewhere, check it out www.cvanb.us
chrisdev
16,941 Pointschrisdev
16,941 PointsLooks really good, you have a great portfolio website.
I think the smallest viewport on a mobile device (smart phone) is 320px, so you got that job done. However I have a few more suggestions that are completely up to you.
The "Message" box still has a fixed width, so when you try to type a message, it just keeps going and going and going horizontally. If you want the text to wrap downwards, put in the following code:
textarea {width: 100%}
Lastly, if you shrink the browser as small as it can go, there is one more element creating a small horizontal scroll. Even though no one will view your website at 304px, it's always best practice to just take care of all overflowing elements. You can use the code below to replace another fixed with with a percentage:
@media only screen and (max-width: 517px) form {width: 100%!important;}
That's all I could find in terms of responsiveness. Keep up the good work!