I have a line describing the full company address. It is made with different pieces
<div><b>COMPANY</b> • Address, City • VAT 12345678901</div>
In a large screen the div is displayed as one long line:
COMPANY • Address line, City • VAT 12345678901
But on a small mobile device it is displayed on three lines:
COMPANY •
Address line, City •
VAT 12345678901
My goal is to remove the bullets on the small devices.
To accomplish the goal, I defined a span element as follow:
.bg99 .footer-divider {
content: " • ";
}
@media only screen and (max-width: 768px){
.bg99 div.company div {
flex-direction: column;
}
.bg99 .footer-divider {
content: " "
}
}
and changed the line as follow:
<div><b>COMPANY</b><span className="footer-divider"/>Address, City<span className="footer-divider"/>VAT 12345678901</div>
But the result is that the bullets disappeared on both devices.
Inspecting the browser, I see the CSS class footer-divider and the content
.bg99 .footer-divider {
content: " • ";
}
But the bullets are not visible on the screen. It looks like the rule should not applied.
Any idea?
I think first you need to replace "className" with "class" in your html markup
Try below code that might help
HTML
<div class="bg99">
<b>COMPANY</b>
<span class="footer-divider">Address, City</span>
<span class="footer-divider">VAT 12345678901</span>
</div>
CSS
@media only screen and (max-width: 768px){
.bg99 div.company div {
flex-direction: column;
}
.bg99 .footer-divider::before{
content: "*"
}
}