WordPress的div响应移动

Question

I customized the home template of this photography site to include 4 divs to highlight the 4 major sections of the photographer's portfolio. They are not responsive when sizing the browser or on mobile devices. What do I have to include in order to make them responsive? (media queries min max, not certain)

site: http://jeremy.insctest1.com

one of the divs:

div onclick="window.location='/portfolio/architecture/architecture/';" id="item1" style="width:453px; height:400px; background-image:url(' http://jeremy.insctest1.com/wp-content/uploads/2015/02/arch-home.png '); float: left; margin: 0 20px 20px 0;">

                div class="item-title" style="width:inherit; position: relative; top:350px; height: 50px; background-image: linear-gradient(to bottom ,rgba(232,232,232,0.8) 0%, rgba(214,214,214,0.8) 100%);">

            div class='b' style="          
height: 50px;     
width: 453px;     
display: table-cell;     
vertical-align: middle;
text-align: center;">Architecture</div>
                </a>
                </div>
            </div>

Answer 1

First of all you'll need to reorganize your code and add a class which will be able to do the same for all of the divs containing the images assuming that's what you want to make responsive, so you don't need to create a class for each one of these elements, then I'd recommend exchange the onclick="window.location='/portfolio/architecture/architecture/';" for a href because you're just using this to navigate through pages so no need to onclick href is the way to do it. all combined should look somethin like this:

<a href="/portfolio/architecture/architecture/" id="item" class="float-right">
    <img src="http://jeremy.insctest1.com/wp-content/uploads/2015/02/arch-home.png" width="253" height="200"/>
</a>
<a href="/portfolio/architecture/architecture/" id="item" class="float-left">
    <img src="http://jeremy.insctest1.com/wp-content/uploads/2015/02/arch-home.png" width="253" height="200"/>
</a>

and then put your css on your style.css file of the theme which will look something like this:

#item {
    width:453px;
    height:400px;
    margin: 0 20px 20px 0;
}
.float-left {float: left;}
.float-right {float: right;}
@media only screen and (max-width : 320px) {
    /* Your fix for smaller screen sizes example*/
    #item {
       width:253px;
       height:200px;
    }
    #item img {
       width:253px;
       height:200px;
    }
}

If using images as divs background is still a priority you use the code like this instead:

<a href="/portfolio/architecture/architecture/">
    <div id="item1" class="responsive float-left"></div>
</a>
<a href="/portfolio/architecture/architecture/">
    <div id="item2" class="responsive float-right"></div>
</a>

CSS

#item1 {
    background-image: url('http://jeremy.insctest1.com/wp-content/uploads/2015/02/arch-home.png');
}
#item2 {
    background-image: url('http://jeremy.insctest1.com/wp-content/uploads/2015/03/portrait-home.png');
}
.responsive {
    width:453px;
    height:400px;
    margin: 0 20px 20px 0;
}
.float-left {float: left;}
.float-right {float: right;}
@media only screen and (max-width : 320px) {
    /* Your fix for smaller screen sizes example*/
    .responsive {
        width:253px;
        height:200px;
    }
}