Responsive webdesign question with Bootstrap template + changing line spacing

[drone4four]

Topic: Responsive webdesign question with Bootstrap template + changing line spacing
Body:

I am trying to adapt an html and css template based on Bootstrap to suit my project.

Here is the original template: http://www.angeles4four.info/nolkirne_final/index.html

Here is my adaptation: http://www.angeles4four.info/nolkirne_final_adapted_code_combat/index.html

Here is the css, html and js copied and pasted into a codepen: http://codepen.io/Angeles4four/pen/doNjZa

There are 4 available classes for responsive webdesign in Bootstrap, one for smart-phones (xs), one for tablets (sm), one for desktops (md) and one for larger desktops (lg). The .visible-xs-* class is for resolutions between 0 and 768 pixels, sm is for resolutions between 768 and 991px, md is for desktops between 992 and 1199px, and lg is for desktops at 1200px or larger. There are a total of 4 classes. The original template and my adaption use these classes perfectly, which is why the web-page scales nicely when you resize the browser. That’s great. But as you can see in the css, the @media queries call only 3 of the 4 possible resolutions (min-width:768, 992 and 1200). My question is: if the @media query in my code only calls and modifies 3 of 4 possible resolutions, why do all 4 render perfectly?

There are many changes I wish to eventually make to the form at the larger resolutions, but for the xs-size (768px or less), there are two problems in particular I am trying to resolve right now.

#1. Check out the blockquote line-spacing in the testimonials section. The blockquote line spacing is closer together only under testimonials as compared with the other containers above, like under the creative process or services. This was obviously intentional by the original author of this template. But I am now trying to adapt it as I see fit and can’t figure it out on my own. How do I style the text in the testimonial section so that the line-spacing appears as it does in the above sections? How is the services’ paragraph text styled differently than the testimonials with respect to line spacing?

#2 In that same testimonials section, notice the existence (and nonexistence) of brand labels at the bottom when you cycle through the carousel? You’ll see Rockstar and Monster, but not Coca Cola and Redbull. This is because the ciet tag is paired with visible-xs rather than visible-lg. Naturally, when you expand the width of the browser to fit the largest pixel width, the reverse happens: all you can see is Coca Cola and Redbull while Rockstar and Monster invisible. My question: How do I arrange my CSS and HTML to keep the general form of the carousel, but still have the brand names visible at all resolutions?

[Alen]

1.

Line spacing is coming from Bootstrap CSS in bootstrap.min.css file at line #98.

blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  border-left: 5px solid #eeeeee;
}
blockquote p {
  font-size: 17.5px;
  font-weight: 300;
  line-height: 1.25; /* THIS */
}

In your style.css file you’re only changing p to have line-height of 30px. Your issue is CSS Specificity, ex.

blockquote p { color: orange; }
p { color: blue; }

p tag inside blockquote is too specific and it will always win. So the color will be orange.

Simply change the value of line-height inside bootstrap file for blockquote p or redefine it inside your stylesheet.

2.

Not sure what’s the question here, if you want names to stay visible just remove the class of visible-xs … etc.

[drone4four]

Thank-you, Alen. You did a great job answering both of my questions.

For my line spacing issue, I just commented out line 98 in that css file. I know this adjustment removes the the font size and weight effects in addition to the line spacing. I can live without these styles.

With respect to the brand names reflecting differently at different resolutions, I removed the visible class attributes. Now the brand appears at all resolutions.

I did ask a more theoretical question about bootstrap on media queries. I figure what I need to do is more closely read over the docs on bootstrap’s website to find my answer.

Mission accomplished.

[Author]

Posts