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
Patrick Johnson
9,505 PointsTwitter Bootstrap Styling Issue
Hi All,
I'm currently having an issue with this site
Also, I'm trying to build a CV template based off of bootstrap that allows us and others to quickly mock up a resume/cv into an HTML format ready for mobile, which is the purpose of this project.
If you resize the browser or view on your mobile you'll see that in any given line position there is a padding issue with the Job Title and the Date.
This is a pre-styled selector within Bootstrap (not bootstrap-responsive) and I can't seem to figure out where. Wonder if anyone can help figure this out. The particular elements being affected are the Job Title and date which are both <h4> tags.
I've tried to readjust the lineheight attribute to "normal" but all that did was give it an extra amount of padding. Any help would be appreciated.
4 Answers
Jeremy Jantz
6,717 PointsI just inspected the code and think i've found the problem. The job title div has a class of span10 on it, and job-date has a class of span2. At smaller browser widths, the span2 class isn't wide enough for the date info, so it's wrapping to two lines and pushing everything else down. You might change those to something like span8 and span4.
If you look in the bootstrap-responsive.css file inside the max-width: 767px media query, you'll see these span classes switch to display:block, width:100%. That's also causing some extra spacing. You might want to float your job-date div left at that point as well.
Lastly, check out bootstrap.css around line 344. Those span classes have a min-height: 30px on them which also looks like it's causing some the extra padding you're taking about.
Guil Hernandez
Treehouse TeacherHi Patrick,
Is the issue you mentioned occurring at the 767px screen width?
I noticed that .job-date and .job-title are in separate containing divs – that's why the line breaks occur (since they're both block level at 100% width). Try grouping them into 1 containing element.
Floating .date left at 767px will also align it nicely under the job title.
Patrick Johnson
9,505 Points@Guil Thanks for the response! I'll look into the issue tonight when I get home but the issue was occurring more so on the mobile version 480px and less.
What you've said about making them into one div should work just fine. I totally forgot about adding the media query to accommodate a pull-right/pull-left that exists in the desktop version.
Thanks guys! Will let you know how it goes.
Patrick Johnson
9,505 PointsSo,
I've done the following with no avail:
- Removed the .job-date div included that content in the job-title div.
- Updated the .job-title div to "span12" rather than ten.
- The .job-title div now breaks the date onto another line, floated right.
Not sure what's causing this issue but I'll keep digging.
I did, however, come across one fix:
- Put the job title and date into one <h4> tag
- Give the date a span class and float it right
This keeps it on one line, and adjusts with the browser window.
My big concern here is the best practices of the span class. Not sure if I'm using it properly. While I get the idea of "hacking-it-together-to-learn" I'd still like to know what I should do vs. what I can do.
Thanks!