css - One column too narrow on mobile -


caveat: far being css responsive expert.

at http://www.ebay.com/itm/281357771624, you'll see template i'm working on. on ebay mobile app, first column narrower , should width of second column (full-width of mobile screen).

since ebay puts templates iframe, should right-click template area view frame only, can view source-code. (otherwise won't see template's code.) btw, has css & html - no javascript.

can give me sort of novice can understand?

you've added media query make column 1 wider this:

@media (max-width: 1000px) .col_1col {     width: 100%;     margin: 0; } 

but you've not done column 2, it's still taking default percentage this:

.col_2col {     vertical-align: top;     position: relative;     padding: 0;     margin: 0;     width: 28.5%;     height: auto;     display: inline-block;     margin: .5%;     z-index: 1; } 

you want add media query above make percentage 100%...

@media (max-width: 1000px) .col_1col, .col_2col {     width: 100%;     margin: 0; } 

i build these living if need give me shout....


Comments