CODEWITHSUNDEEP
htmlcss
Rono Charlson
Rono Charlson

Reputation: 13

Different style for same div in mobile and desktop

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

Answers (2)

Samir Selia
Samir Selia

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

MHK
MHK

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

Related Questions