CODEWITHSUNDEEP
htmlcssborderblogsblockquote
Chris
Chris

Reputation: 313

Blockquote Background Color follow line length

Hi is is possible to make the background of my block quote follow the length of the line of text. Here is the following code of my block quote 

<blockquote>
<p>£265,000 will make an XXL difference</p>
</blockquote>

My current CSS:

blockquote p {
    padding: 10px!important;
    text-align: right!important;
    font-size: 33px!important;
    color: #fff!important;
    font-weight: 600!important;
    font-family: $heading-fancy!important;
}
blockquote {
    background-color: #183052!important;
    float: right!important;
    width: auto!important;
    max-width: 250px!important;
    margin: 10px 0!important;
}

Here is how that currently looks. https://jsfiddle.net/2atm3ktn/

Is it possible to achieve this look with the background colour... https://s7.postimg.org/m29mkdwhn/example.png

I have achieved this effect before on headings by adding extra container (div) and using borders. Ideally there would be no more tags around the blockquote as then it is simple for the User to simply click blockquote in the WYSIWYG.

Ideas welcome.

Upvotes: 0

Views: 908

Answers (1)

mxr7350
mxr7350

Reputation: 1458

You can do something like this, hope it helps.

blockquote p {
    padding: 10px!important;
    text-align: right!important;
    font-size: 33px!important;
    color: #fff!important;
    font-weight: 600!important;
    font-family: $heading-fancy!important;
    margin: 0;
    
}
blockquote {
  background-color: #183052!important;
    float: right!important;
    width: auto!important;
    max-width: 250px!important;
    margin: 10px 0!important;
    padding: 0;
}
span{ background-color: green;}
<blockquote>
<p>
<span>£265,000 will make an XXL difference</span>
</p>
</blockquote>

Upvotes: 1

Related Questions