Skip to content

Instantly share code, notes, and snippets.

@mahesh247
Created February 12, 2016 05:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mahesh247/727b652086537eed87bb to your computer and use it in GitHub Desktop.
Save mahesh247/727b652086537eed87bb to your computer and use it in GitHub Desktop.
.container {
width: 98%;
padding: 0 10px;
}
#featured-heading{
width: 100%;
}
#featured-post.layout-four .featued-content-wrap, #featured-post.layout-three .featued-content-wrap {
width: 100%;
}
#featured-post.layout-four .post, #featured-post.layout-three .post {
width: 23%;
}
@media screen and (min-width: 981px) {
#primary {
width: 68%;
}
#secondary {
width: 30%;
}
#secondary .widget {
width: auto;
}
#featured-post .featued-content-wrap {
margin: 0 auto;
}
#homepage-message .left-section {
width: auto;
}
}
@media screen and (max-width: 980px) and (min-width: 678px) {
#primary {
width: 100%;
}
#secondary {
width: 100%;
}
#secondary .widget {
margin-left: 20px;
width: 40%;
}
#featured-post.layout-four .featued-content-wrap, #featured-post.layout-three .featued-content-wrap {
margin: 0 auto;
}
#featured-post.layout-four .post:nth-child(2n+1), #featured-post.layout-three .post:nth-child(2n+1), #secondary .widget:nth-child(2n+1) {
clear: none;
}
#featured-post.layout-four .post:nth-child(4n+1), #featured-post.layout-three .post:nth-child(3n+1){
clear: none;
}
#featured-post.layout-four .post, #featured-post.layout-three .post {
width: 21%;
}
}
@media screen and (max-width: 767px) {
.container {
width: 96%;
}
#featured-post.layout-four .post:nth-child(2n+1), #featured-post.layout-three .post:nth-child(2n+1), #secondary .widget:nth-child(2n+1) {
clear: both;
}
#featured-post.layout-four .post:nth-child(4n+1), #featured-post.layout-three .post:nth-child(3n+1) {
clear: both;
}
#featured-post.layout-four .post, #featured-post.layout-three .post {
width: 46%;
}
}
@media screen and (max-width: 700px) {
#secondary {
margin: 0;
width: 100%;
}
#secondary .widget {
margin-left: 0;
padding: 10px 4%;
width: 91%;
}
}
@media screen and (max-width: 560px) {
#featured-post.layout-four .post, #featured-post.layout-three .post {
width: 100%;
}
#featured-post.layout-four .post img.wp-post-image, #featured-post.layout-three .post img.wp-post-image {
display: inline-block;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment