Wordpress div responsive on mobile

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>

media queries will do. here, I just answered a similiar question involving media queries — Chun
Could you please format your posted HTML? Also, it does not match the equivalent "portfolio architecture" <div> found at the hyperlink. — wahwahwah
im new to stack, so when i copy pasted the code it wouldn't show it all, so i deleted some div tags so people could see it — Dominic

Chun Chun · Accepted Answer · 2015-03-19T15:10:34

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;
    }
}

Wordpress div responsive on mobile

1 Answers