Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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.
