Rewrite inline css to work on smartphone

Question

How can a rewrite this CSS to something that stacks downwards when you on smartphone?

    <div style="width: 1200px;">
<div style="float: left; line-height: 0; width: 358 px; margin: 0px 7px 0px 0px; border: 1px solid #021a40;"><img src="{{media url="wysiwyg/3row/3row-no-boarder_07.jpg"}}" alt="" /></div>
<div style="float: left; line-height: 0; width: 358 px; margin: 0px 7px 0px 7px; border: 1px solid #021a40;"><img src="{{media url="wysiwyg/3row/3row-no-boarder_04.jpg"}}" alt="" /></div>
<div style="float: left; line-height: 0; width: 358 px; margin: 0px 0px 0px 7px; border: 1px solid #021a40;"><img src="{{media url="wysiwyg/3row/3row-no-boarder_09.jpg"}}" alt="" /></div>
<div style="clear: both;">&nbsp;</div>
</div>
</div>
</div>

I have tried to add something like this

@media only screen and (max-width: 40em) {
    .newspaper{
        /* Chrome, Safari, Opera */ 
        -webkit-column-count :  1 ; 
        -webkit-column-gap :  0px ; 
        -webkit-column-rule-style : outset ; 
        -webkit-column-rule-width :  1px ;

        /* Firefox */ 
        -moz-column-count :  1 ; 
        -moz-column-gap :  0px ; 
        -moz-column-rule-style : outset ; 
        -moz-column-rule-width :  1px ;

        column-count :  1 ; 
        column-gap :  0px ; 
        column-rule-style : outset ; 
        column-rule-width :  1px ; 
    }

To the equation but it does not seem to work..

Looks like this now but on smartphone you only see first image. enter image description here

score 1 · Answer 1 · answered Jun 09 '15 at 13:59

1

You just need to make the divs become display block.

<html>
    <head>

    <style>

        .pictures {
            float: left; 
            line-height: 0;
        }

        .pictures img {
            width: 358px;  
            margin: 0px 7px 0px 0px; 
            border: 1px solid #021a40;
        }

        @media (max-width:40em) {
            .pictures {
                width: 40em;
                display: block;   
            }
        }    

    </style>

    </head>    
    <body>    

    <div style="width: 1200px;">
    <div class="pictures">
        <img src="http://pausemag.co.uk/wp-content/uploads/2013/03/shirt.jpg" alt="" style=" width: 358 px; " />
    </div>
    <div class="pictures">
        <img src="http://pausemag.co.uk/wp-content/uploads/2013/03/shirt.jpg" alt="" style=" width: 358 px; " />
    </div>
    <div class="pictures">
        <img src="http://pausemag.co.uk/wp-content/uploads/2013/03/shirt.jpg" alt="" style=" width: 358 px; " />
    </div>
    <div style="clear: both;">&nbsp;</div>
    </div>



    </body>    
    </html>

answered Jun 09 '15 at 13:59

Matt Hammond

372
2
11

Ok looks great! Thanks! – m_schou Jun 09 '15 at 14:04
Whats the problem? It works on my browser when I re-size it to the past 40em. – Matt Hammond Jun 09 '15 at 14:12
i only get two shirt for some reason, and if i open on iphone it cuts the image last 10% of the right size. Is there way to resize then image width to the smartphone screen it's being watched on? http://postimg.org/image/6pe6zjfpv/ – m_schou Jun 09 '15 at 14:20
http://postimg.org/image/j25e83bqn/ here you see the last images does not jump down? – m_schou Jun 09 '15 at 14:47
Can you edit your question with all of the code of upload it to gitHub or somewhere where i can look at it for you – Matt Hammond Jun 09 '15 at 15:24

Rewrite inline css to work on smartphone

1 Answers1