Reputation: 985
I am developing a website and I am using bootstrap framework. I want the website to be responsive for most the divices. The thing is that the mobile markup is a kind different form the desktop markup, not all the markup but some blocks. What shoould I do? Reapeat the information and show and hide depending on the device? What is the best practice? Thanks in advance!
For example I have this markup that show the same information but have different structure, this is just an example:
<div class="mobile-show desktop-hide">
<span>Here is my product list</span>
<ul>
<li>Item number 1</li>
<li>Item number 2<li>
</ul>
<div>
<div class="desktop-show mobile-hide">
<h1>Here is my product list</h1>
<div class="icon-block">
<img src="icon1"></img>
<img src="icon2"></img>
</div>
</div>
By the media queries I show and hide depending the device, my fear is that I am duplicating the information because it is show in a different structure html, I dont know is that is correct.
Upvotes: 4
Views: 1404
Reputation: 1206
I wouldn't have duplicate elements doing the same thing - just assign different classes to each of the elements and display them differently on screen sizes. Bare in mind that some classes dont show up on smaller screen sizes - e.g. col-lg
and col-md
.
<div class="mobile col-lg-8 col-xs-8">
<span>Here is my product list</span>
<ul>
<li class="col-xs-6 col-lg-6 col-md-6"><img class="show">Item number 1</li>
<li class="col-xs-6 col-lg-6 col-md-6"><img class="show">Item number 2<li>
</ul>
</div>
.show {
display:none;
}
@media only screen and (max-width:480px) {
.show {
display:block;
}
}
Upvotes: 1