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
Item 2
Item 3
etc
</div>
Also is it possible to hide text with media queries?
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 }
<br> s? If there is nothing else causing a break, it should work.div tags are display: block by default, that would cause a line break. Those would need a display: inline as well.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.
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.
inline for list items, or there might be other rules that set display: block on children of the li. Or maybe the @media doesn't match when you expect it to.