CODEWITHSUNDEEP
htmlcssmedia-queries
ingh.am
ingh.am

Reputation: 26742

CSS Media Query Tricks

I'm writing a website using media queries to handle the mobile version. Would it be possible to have the main css file output this

<div class="classname">
  Item 1<br />
  Item 2<br />
  Item 3<br />
  etc
</div>

And then within the phone css file output this:

<div class="classname">
  Item 1&nbsp;&nbsp;
  Item 2&nbsp;&nbsp;
  Item 3&nbsp;&nbsp;
  etc
</div>

Also is it possible to hide text with media queries?

Upvotes: 0

Views: 1844

Answers (3)

tdammers
tdammers

Reputation: 20721

The way you write it is not possible: CSS does not rewrite your HTML, it merely changes the presentational aspect of the document. The best way is to write 'semantic' HTML, that is, HTML that contains the structure of your document but not the layout, and then use CSS to define how it is going to be laid out.

In your example, you probably want the div to contain a list of items, so the logical thing to do would be to use a <ul> instead of <div>, and <li> instead of the individual text items, e.g.:

<ul class="classname">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

With such markup in place, you can use CSS to style the list either way. For a desktop browser, you probably want to display the items vertically:

ul.classname {
    /* First, override browser defaults: */
    list-style: none;
    padding: 0;
    margin: 0;
    text-indent: 0;
}

ul.li {
    display: block;
    padding: 0;
    margin: 0;
    text-indent: 0;
}

For a mobile browser, you may want them next to each other, and add a bit of spacing between them:

ul.li {
    display: inline;
    margin-right: 2em;
}

To hide an element entirely, use standard CSS techniques, that is, display: none.

Upvotes: 1

jeroen
jeroen

Reputation: 91734

You can simply set br {display:none} in your iphone style sheet and you can also add information using ::after but I´m not sure if you can put non-breaking spaces in the content part of your ::after statement.

Apart from that, if you hide the br tag, you have no hook to add something after.

I would recommend to get to semantic non-br html first, that would make everything a lot easier.

Upvotes: 1

Unicron
Unicron

Reputation: 7456

Not exactly, no. But you could have a ul with li s that are either display: block (for the former example) or display: inline (for the latter). 

<ul class="classname">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
 </ul>

 case 1:
 ul.classname li { display: block }

 case 2:
 ul.classname li { display: inline; padding-right: 24px }

Upvotes: 5

Related Questions