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

Kevin Goudswaard
Kevin Goudswaard
11,061 Points
Posted by Kevin Goudswaard
Kevin Goudswaard
11,061 Points

My website has a mysterious bit of space when in mobile view. Using Bootstrap..

I have been trying to figure out this mysterious space on the right side of my home page now for a long time. When you view it on mobile (also viewable with chrome's responsive dev tool for galaxy s5, iphone, etc.) there is a chunk off to the right where you can view blue space. This is also pretty bad looking in the ipad responsive breakpoint.. What the heck is going on?? and its only happening in index.html!

side mission: also if you notice, it would appear that bootstrap has changed the styling for the font in the nav. on the index.html page as well.. all the other pages' fonts look a little bit different.. why?! lol. thank you in advance for any help..

kevin

website: www.thvmwc.com

2 Answers

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

In some of your media queries, you apply width constraints to some elements which are fixed pixel sizes. When those sizes cause the outer wrapper to become more narrow than the window, the blue body background is exposed. Also, when those sizes cause an element to extend beyond the container, the blue body background is exposed above and below it.

Setting element widths with percentages or viewport units and/or applying "overflow: hidden" to containers will prevent the undesired body exposure.

Also, be aware that your media queries use a mix of pixel and em units, and are not all in size order. This may produce some additional unintended effects.

Abraham Juliot
Abraham Juliot
47,353 Points
Abraham Juliot
Abraham Juliot
47,353 Points

3 things to get rid of the page break:

  1. the row class was causing the overflow margin. I reset it to 0 and made it important. The importance is optional though.
.row {margin: 0 !important;}
  1. the image width causes a page break. It's good practice to apply a max-width 100% on all images to prevent page breaks.
img {max-width: 100% !important;height: auto !important;}
  1. The nav list causes a page break due to the 15px margins. To keep the margins, just give the lists items a width of 16%, and to prevent the link text from overflowing or wrapping, change your media breakpoint from 500px to 600px. Also, you may want to change your margin-left to 3.33333333%.
@media (min-width: 600px) /*change from 500px to 600px*/
.navi li {
    margin-left: 3.33333333% /*optional, change from 15px to this*/
    flex-grow: 1;
    width: 16%; /*add this 16% width*/
    justify-content: center;
    border: 2px solid black;
    border-radius: 5px/10px;
}

@media (min-width: 600px)
.link5 {
    order: 5;
    margin-right: 3.33333333% /*optional, change from 15px to this*/
}

or, you could leave the above as it is and only shrink the font size.

@media (min-width: 500px) { .navi li {font-size: .8rem;} }

Lastly, in order to prevent page breaks whatsoever, I recommend no min-widths on block elements and to prevent headings and links from overflowing outside of their container, add break-word settings. That's just my preference though.

.copyright, .mainContent {min-width: 0 !important;}
h1, a[href] {overflow-wrap: break-word;word-wrap: break-word;}
.helpful a {padding: 5px 0;} /* optional, remove the right padding */

and Finally, to normalize/reset bootstraps base font size on all pages, just add the following near the top of your style.css.

body {font-size: 16px !important}

and one last thing, this is just a little preference of padding.

.primaryInfo {
    font-family: 'Nunito', sans-serif;
    font-size: 1.0em;
    font-weight: 700;
    text-align: center;
    margin: 0;
    padding: 0 15px; /*add 15px to the the right and left padding */
}

I hope this helps. The site looks great by the way.

A few resources, I highly recommend:

http://adamkaplan.me/grid/ http://adamkaplan.me/blog/grid-retrospective https://www.udacity.com/course/responsive-web-design-fundamentals--ud893

Kevin Goudswaard
Kevin Goudswaard
11,061 Points
Kevin Goudswaard
Kevin Goudswaard
11,061 Points

Thank you very much for the time you spent researching. I owe you one!