I have been working on a website design that features a main heading with a light blue background behind it. I initially used 'padding-right' to create the wide background effect, and applied the background attribute to the class. However, this resulted in only the text being covered with a light blue background without achieving the desired width. I attempted to switch the class to the ID of each headline (#title1, #title2, etc...), but this caused the entire line to be filled with a light blue background, which was too long.
The HTML code looks like this:
<p dir="rtl"><span class="bluetitle"><span style="background-color:#dff2f6">headline<font color="#dff2f6">.</font></span></span><span style="font-family: Heebo, sans-serif; font-size: 1.938em; font-weight: 600;"></span></p>
And here's the CSS:
@media (min-width: 1920px) {
#title1{
padding-right: 27.5% !important;
background-color: #dff2f;
}
}
@media (min-width: 1920px) {
#title2{
padding-right: 21.3% !important;}
}
@media (min-width: 1920px) {
#title3{
padding-right: 37.2% !important;}
}
@media (min-width: 1920px) {
#title4{
padding-right: 23.75% !important;}
}
@media (min-width: 1920px) {
#title5{
padding-right: 26.3% !important;
}}
Despite various attempts, I'm still struggling to achieve the desired look for the light blue background in alignment with the design. Adjusting margin units and aligning titles left did not produce the same effect as shown in the design sample.
If you'd like to take a look at the website, you can find it here.
If anyone has suggestions on how to achieve the same effect from the original design, please let me know! Thanks!