CODEWITHSUNDEEP
csstwitter-bootstrapbackground-color
Jonas
Jonas

Reputation: 111

Bootstrap background color works only in small screen

I've different background colors for the different divs. Why does #background only apply, if my screen is xs-sized? On all bigger screens it has #suggestion's color, although #background is a extra defined child of #suggestions.

#suggestion {
	background-color: #d9d9d9;
}

div div div.suggestions_button {
	width: 100%;
	height: 60px;
	margin-top: 2%;
	margin-bottom: 0.5%;
	text-align: left;
	background-color: white;
	box-shadow: 8px -8px 20px #404040;
}


#background {
	background-color: green;
}
<div class="row">
  <div class="col-xs-1"></div>	
	<div id="suggestion" class="col-xs-10">	 
	  <div class="suggestions_button" data-toggle="collapse" data-target="#demo1"> 
		<p>Suggestion 1</p>
	  </div>
	  <div id="background">
		<div id="demo1" class="collapse">
		  <div id="YouTubeVideo" class="col-sm-12 col-md-6">
		    <div class="embed-responsive embed-responsive-16by9">
			  <iframe id="iFrame" src="youtube.com"></iframe>
			</div>
		  </div>
		  <div id="text" class="col-sm-12 col-md-6">
		    <p> Wort 1 </p>
		  </div>
	    </div>
	  </div>	
	</div>
  <div class="col-xs-1"></div>
</div>

Upvotes: 0

Views: 1427

Answers (1)

Negin
Negin

Reputation: 2394

Your question is not clear to me but all I found out is about the background color in different device sizes. It works in all breakpoints but there are some points I would like to mention:

1- What ever "cols" you are defining for "xs" will apply to the larger size unless if you define an extra "col" for the other sizes.For example if you define:

<div class="col-xs-1"></div>

this means "col-xs-1 col-sm-1 col-md-1 col-lg-1" unless if you define new cols for them separately.

2- You can use different media queries for defining different properties in different device sizes. what ever that goes outside these queries will apply to mobile "xs". It is a good link to start with : http://www.w3schools.com/css/css_rwd_mediaqueries.asp

3- I strongly recommend you to use Less or Sass for styling.

4- for defining a class you do not need to write "div div .suggestions_button" you can easily define the class and use it in every "div" you would like to use.

#suggestion {
	background-color: yellow;
}

.suggestions_button {
	width: 100%;
	height: 60px;
	margin-top: 2%;
	margin-bottom: 0.5%;
	text-align: left;
	background-color:blue;
	box-shadow: 8px -8px 20px #404040;
}
#background {
	background-color: green;
}
<div class="row">
  <div class="col-xs-1">Hello World </div>	
    <div  id="suggestion" class="col-xs-10">	 
      <div class="suggestions_button"
           data-toggle="collapse"
           data-target="#demo1"> 
        <p>Suggestion 1</p>
      </div>
      <div id="background" class="col-xs-12">
        <div id="demo1" class="collapse">
          <div id="YouTubeVideo" class="col-sm-12 col-md-6">
            <div class="embed-responsive embed-responsive-16by9">
              <iframe src="http://www.who.com.au/"></iframe>
            </div>
          </div>
		 	 
        </div>
         <div class="col-xs-1">Wort 1</div>
      </div>	
     
  </div>
  
</div>

Upvotes: 2

Related Questions