Home>

[I want to realize]
I would like to realize the following responsive design on the posted article list screen of Wordpress.
① For PC
・ Posted articles are displayed in up to 5 columns.
-As the browser shrinks, the number of columns decreases as 5 columns->4 columns->3 columns->2 columns.
② For smartphones
・ Fixed in 2 rows.
③Other (tablet etc.)
・ Fixed in 3 rows.

http://gigazine.net/
I want to feel the same as the above site.

[Current status]
(1) (2) (3) Both terminals are fixed in three rows.
■■■
■■■
■■■
■■■
It feels like ↑.

style.css (child theme)
/*
Theme Name: stingerplus child
Template: stingerplus
Version: 20160525
* /
/ * media Queries tablet size (960px or less)
-------------------------------------------------- -* /
@media only screen and (max-width: 960x) {
strong {
background-color: # ffb6c1! important;
}
/*-- So far --*/
}
/ * media Queries Tablet size (600px or more)
-------------------------------------------------- -* /
@media only screen and (min-width: 600px) {
header {
    text-align: center;
}
.sitename img {
    max-width: 300px;
    margin: 0 auto;
}
strong {
background-color: # ffb6c1! important;
}
/*-- So far --*/
}
/ * media Queries PC size (over 960px)
-------------------------------------------------- -* /
@media print, screen and (min-width: 960px) {
strong {
background-color: # ffb6c1;
}
/*-- So far --*/
}
li.cat-item .children {
padding-left: 15px! important;
}
.backnon {
    background: none;
    padding: 0 10px;
}
@media only screen and (min-width: 781px) {
.backnon {
    padding: 0;
}
}
.itiran-custom dl {
    border: none;
    background: #fff;
    padding: 10px;
    margin-bottom: 20px;/* Add a margin under the card * /
    box-shadow: 1px 3px 3px # 999999;
    -moz-box-shadow: 1px 3px 3px # 999999;
    -webkit-box-shadow: 1px 3px 3px # 999999;
}
.itiran-custom dl: last-child {
    padding-bottom: 10px;/* Fix the margin set for the last card * /
}
@media only screen and (min-width: 413px) {/ * excludes smartphone * /
.itiran-custom dl h3 a {
    font-size: 20px;/* Article title text size * /
    line-height: 1.4em;/* Article title line height * /
}
.itiran-custom dl {
    width: 100%;
    float: none;
    margin-right: 0;
    margin-bottom: 20px;
}
.itiran-custom dd {
    height: auto;
    padding: 10px;
}
}
.itiran-custom dl {
    width: 32%;
    float: left;
    padding: 0;
    margin-right: 2%;
    margin-bottom: 20px;
}
.itiran-custom dl: nth-child (3n) {
    margin-right: 0;
}
.itiran-custom dl: last-child {
    padding: 0;
    margin-bottom: 20px;
}
.itiran-custom dt {
    float: none;
    width: 100%;
}
.itiran-custom dt img {
    width: 300px;
    height: auto;
}
.itiran-custom dd {
    height: 160px;/* height of title/date/category box * /
    padding: 10px;
}
.inner {
    max-width: 1060px;
    padding: 0 10px;
    margin: 0 auto;
}
#headbox {
    padding: 0;
    margin: 0;
}
# header-l {
    text-align: center;
    float: none;
    max-width: initial;
}
Supplemental information

The theme i am using is a free theme called STINGER PLUS.
The version of WordPress is 4.7.5.

Thank you for any information.

  • Answer # 1

    If you check the example site (http://gigazine.net/) using the browser developer tool (developer tool), you can see the approximate mechanism.

    In a glance, it seems that the set of thumbnails and titles of each article is surrounded by section tags, and the width of the section is specified in the media query.

    @ media (min-width: 980px) {
        .content section {
            width: 24.5%;
        }
    }
    @media (min-width: 768px) {
        .content section {
            width: 49.5%;
        }
    }
    ...

Related articles