CODEWITHSUNDEEP
htmlcss
The Dead Man
The Dead Man

Reputation: 5566

How to order text using css?

I have a simple text which in desktop looks like this:

Kolor : Niebieski
Rozmiar : S/M

I want this to look like this in mobile:

Kolor : Niebieski Rozmiar : S/M

Here is the html: 

<a href="">Kolor : Niebieski<br> Rozmiar : S/M</a>

Here is css I have tried:

div br {
  display: none;
}

Unfortunately this does not work, any suggestion what I need to do to get what I want without changing html structure?

Upvotes: 1

Views: 1208

Answers (3)

connexo
connexo

Reputation: 56753

In your HTML you show

<a href="">Kolor : Niebieski<br> Rozmiar : S/M</a>

while in your CSS you use 

div br { display: none; }

To hide the <br /> on mobile, you need to target it correctly:

a br { display: none; }

To only do it on mobile, you need to put that inside a media query:

@media (max-width: 480px) {
  a br { display: none; }
}

Of course you need to replace the 480px by whatever is the breakpoint between mobile and desktop display.

Upvotes: 1

Pete
Pete

Reputation: 58432

Hide the br on smaller screens:

@media screen and (max-width: 600px) { /* change this to be the width when you want it to go one one line */
  br {
    display: none;
  }
}
<a href="">Kolor : Niebieski<br> Rozmiar : S/M</a>

I would say that you should keep them on separate lines though as it now doesn't read correctly and looks worse on mobiles

Upvotes: 2

LPK
LPK

Reputation: 536

Try this :

div br{
display: inline-block;
}

It should do the trick

Upvotes: 1

Related Questions