CODEWITHSUNDEEP
csshtmlresponsive-design
Debajyoti Das
Debajyoti Das

Reputation: 2138

Responsive List of Items with % width

I have a responsive layout where the sidebar drop below the content in mobile.

In full width the list of items in the sidebar are at 100% width. So its like one item in one row...

In mobile I want 2 items in 1 row... by setting the width of each item to 50%. Not sure where I am going wrong...

DEMO: http://jsfiddle.net/nN6Zt/

#item {width:100%;background:#eeefff;}
#list_item{display:block;min-height:60px;border:1px solid #333}

@media only screen and (min-width:480px) and (max-width: 768px)
{
#item {width:50%;}
h1 {font-size:180%;line-height:120%;}
}

Upvotes: 2

Views: 1252

Answers (2)

Surjith S M
Surjith S M

Reputation: 6740

You have given 50% width to item, give it to list-item

Working Demo : http://jsfiddle.net/surjithctly/nN6Zt/2/

#item {width:100%;
background:#eeefff;
float:left;
}

#list_item {
width: 49%;
float: left; 
}

49% to avoid breakage.

Or you can use box-sizing:border-box; as Tom mentioned.

#list_item {
width: 50%;
float: left; 
box-sizing:border-box;
}

Upvotes: 4

NoobEditor
NoobEditor

Reputation: 15881

You have assigned the css for div but a doesn't have any css assigned to it....since your end child element is a a tag, its more semantic to assign a styling to it for all media queries use!

amend this s to your css for @media only screen and (min-width:480px) and (max-width: 768px) {} (or whichever was required to bring in the effects)

 #item > a#list_item {
        display:inline-block;
        width:48%; /* to avoid any clash for breaking */
    }

demo

Upvotes: 0

Related Questions