Reputation: 13
I’ve got a <div>
section in content body with a <table>
inside, like below:
<div class="hub_specification">
example html table
</div>
For Desktop view, I’d like to show this <div>
with 50% width of content area, floated left.
For Mobile view, I’d like to show this <div>
with 100% width of content area, without any float.
So what will be the CSS code to decorate the hub_specification
<div>
?
It would be better if both ways were present: CSS for a file called style.css
in WordPress and inline.
Upvotes: 0
Views: 3711
Reputation: 7065
Use CSS media queries
.hub_specification{
background-color: lightgreen;
}
@media screen and (max-width: 480px) {
.hub_specification {
background-color: lightblue;
}
}
Reference: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Upvotes: 1
Reputation: 320
If I am not wrong do you want this? click
HTML
<div class="hub_specification">
example html table
</div>
CSS
.hub_specification {
width:100%;
background-color:red;
height:20px;
}
@media only screen and (max-width:350px) {
.hub_specification {
width:50%;
background-color:oink;
height:20px;
}
}
Upvotes: 6