Rewrite inline css to work on smartphone

Question

Rewrite inline css to work on smartphone

215 Views Asked by m_schou At 19 October 2024 at 16:32

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

Original Q&A

There are 1 best solutions below

**Matt Hammond** · Answer 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>

Rewrite inline css to work on smartphone

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in MAGENTO

Related Questions in SMARTPHONE

Trending Questions

Popular # Hahtags

Popular Questions