Responsive Adjustments

Redeclare a width on the element that contains the circles; enter this at the bottom of your Child Theme style.css file:

#page { width: 1100px; }

When I tested that with firebug it seemed to work, but when I incorporated it into my child theme it doesn’t work. Any suggestions?

After I fixed that era, this worked as well. I like it better without the fixed width. Is there a way I can make it so that there is only 3 circles/posts per row?

I got most of it figured out. The only thing is that when the browser is shrunk down the posts loose the transparency and reposition to a 2 row format. Can I stop that?

Add this to the bottom of your Child Theme style.css file:

.blog .hentry a .attachment-post-thumbnail,
.archive .hentry a .attachment-post-thumbnail,
.search .hentry a .attachment-post-thumbnail {
 border-radius: 180px;
 filter: grayscale(100%);
 -webkit-filter: grayscale(100%);
 -webkit-filter: grayscale(1);
 -moz-filter: grayscale(100%);
 -o-filter: grayscale(100%);
 -ms-filter: grayscale(100%);
 filter: gray;
 filter: url('inc/desaturate.svg#greyscale');
 opacity: .8;
 -webkit-opacity: .8;
 -moz-opacity: .8;
 transition: all .3s ease-in-out;
 -webkit-transition: all .3s ease-in-out;
 -moz-transition: all .3s ease-in-out;
 -o-transition: all .3s ease-in-out;
 -ms-transition: all .3s ease-in-out;
 width: 100%;
 height: 100%;
 z-index: 1;
}

.hentry {
 width: 180px;
 height: 180px;
}

I tried that, it jacked up the mobile view of the site. Is there a way define different page width for the mobile only? sorta like you gave me for the menu, with the @media only command.

I don’t understand the issue, sorry.

Ok. If I adjust the page width as you suggested, it works except it messes up the mobile view of the theme. I am trying to figure out how to adjust the page width for the mobile so I can get the desired result in both views. I hope this makes sense

I can’t experience that issue when I put this at the bottom of your Child Theme style.css file:

#page { width: 1100px; }

.blog .hentry a .attachment-post-thumbnail,
.archive .hentry a .attachment-post-thumbnail,
.search .hentry a .attachment-post-thumbnail {
 border-radius: 180px;
 filter: grayscale(100%);
 -webkit-filter: grayscale(100%);
 -webkit-filter: grayscale(1);
 -moz-filter: grayscale(100%);
 -o-filter: grayscale(100%);
 -ms-filter: grayscale(100%);
 filter: gray;
 filter: url('inc/desaturate.svg#greyscale');
 opacity: .8;
 -webkit-opacity: .8;
 -moz-opacity: .8;
 transition: all .3s ease-in-out;
 -webkit-transition: all .3s ease-in-out;
 -moz-transition: all .3s ease-in-out;
 -o-transition: all .3s ease-in-out;
 -ms-transition: all .3s ease-in-out;
 width: 100%;
 height: 100%;
 z-index: 1;
}

.hentry {
 width: 180px;
 height: 180px;
}

That adjusts the mobile theme but its not what I am looking to adjust it to. Perhaps i am not explaining myself well.

I would like to adjust my home page where the posts are, so that there are 2 rows of posts with 3 in each row. The issue is If I adjust the page it makes it much bigger on mobile devices. I would like to keep the mobile view as it is now and only adjust the regular site view. I hope this makes sense.

You have a syntax error where you aren’t closing off your media query. The above CSS should not go inside a media query.

I would like to adjust my home page where the posts are, so that there are 2 rows of posts with 3 in each row

You can change the width of this style like you did before:

#page { width: 1100px; }

To 600px?

Brilliant! Thank you so much for your time.