CODEWITHSUNDEEP
htmlcss
nourza
nourza

Reputation: 2321

background-color to be in full width of the screen

I need this text to be center and the background color width to be in full screen I didn't find an answer for it here

    .carousel-content {
     text-align: center;
      bottom: 0px;
      opacity: 0.8;
      display: inline-block;
      border: none;
      text-transform: uppercase;
      position: absolute
    
    }
    .carousel-content span{
      text-shadow: 0 1px 2px rgba(0,0,0,.6);
      color: #fff;
      background-color: #c52d2f;
      background-size: cover !important;
      width: 100%;
      padding: 10px;
      text-shadow: 1px 0px 1px #000;
    }
    #span1{
      font-style: italic;
      font-size: 35px;
      white-space: nowrap;
    }
  <div class="main carousel-inner">
    <div class="item active">
      <%= image_tag "limo1.jpeg"%>
      <div class="carousel-content">
        <p><span id="span1" class="animated bounceInLeft delay-1s"> NEED A LIMOUSINE? Call OR Text: <a href="tel:+1-604-374-7474">(604) 374 7474</a> </span></p> 
      </div>

The <%= image_tag "limo1.jpeg" %> part is from Ruby on Rails, but unrelated to the issue.

Upvotes: 0

Views: 123

Answers (1)

Symphonic
Symphonic

Reputation: 365

Does this work?

.carousel-content {
  text-align: center;
  bottom: 0px;
  opacity: 0.8;
  display: block;
  border: none;
  text-transform: uppercase;
  position: absolute;
  left: 0; /* Added */
  right: 0; /* Added */
  background-color: #c52d2f; /* Added */
}
.carousel-content span {
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  color: #fff;
  width: 100%;
  padding: 10px;
  text-shadow: 1px 0px 1px #000;
  /* Background-color and background-size removed */
}
#span1 {
  font-style: italic;
  font-size: 35px;
  white-space: nowrap;
}
<div class="main carousel-inner">
  <div class="item active">
    <%= image_tag "limo1.jpeg"%>
    <div class="carousel-content">
      <p>
        <span id="span1" class="animated bounceInLeft delay-1s"> NEED A LIMOUSINE? Call OR Text: <a href="tel:+1-604-374-7474">(604) 374 7474</a></span>
      </p> 
    </div>
  </div>
</div>

In Codepen it seems to work, but I saw that you are writing it inside a carousel and its code is not included, so I can't see if the changes will work in that context.

Upvotes: 2

Related Questions