Author Pro theme – change layout to show 4 books across

[fiddles5]

Hi -- I'm trying to figure out how to change the layout of the book library archive so that it shows 4 books in a row instead of 3. I tried changing:
.archive.genesis-author-pro .content .entry {
background-image: none;
border-width: 0;
float: left;
margin: 0 0 40px 2.5641025641026%;
padding: 15px;
text-align: center;
width: 31.623931623932%;
}

to

.archive.genesis-author-pro .content .entry {
background-image: none;
border-width: 0;
float: left;
margin: 0 0 40px 2.5641025641026%;
padding: 15px;
text-align: center;
width: 22.5%;
}

changing the width value from 31% to approx 22.5% and it made the book images smaller, which was good, but didn't add the 4th book to the layout - it still showed only 3 books in a row. What else do I need to change to show 4 book images in a row?

thanks in advance!
Grace

http://4e8.84d.myftpupload.com/books/

[tarmadillo]

I'm not really familiar with author pro or the plugin so I'm not sure if the plugin has its own css file.

try adding

.archive.genesis-author-pro .content .entry:nth-of-type(3n+1) {
    clear: unset !important;
    margin-left: unset !important;
}

.archive.genesis-author-pro .content .entry:nth-of-type(4n+1) {
    clear: both;
    margin-left: 0;
}

to style.css

let me know if that works

---

https://armadillowebdesign.com

[tarmadillo]

actually if you can edit the css file of the plug in and change .archive.genesis-author-pro .content .entry:nth-of-type(3n+1) to .archive.genesis-author-pro .content .entry:nth-of-type(4n+1) that would work better but you would have to change it again if the plugin updates.

if not then try

.archive.genesis-author-pro .content .entry:nth-of-type(3n+1) {
    clear: unset !important;
    margin-left: 2.5641025641026% !important;
}

.archive.genesis-author-pro .content .entry:nth-of-type(4n+1) {
    clear: both;
}

.archive.genesis-author-pro .content .entry {
    width: 21.5% !important;
}

to your style.css the spacing is better and it wouldnt let me edit my old post

---

https://armadillowebdesign.com

[fiddles5]

Thank you tarmadill! Adding your 3rd bit if css to the style.css worked!

thanks again,
Grace

[fiddles5]

oops! too fast an answer... I checked it on an iphone and it's not right.

I'll keep looking, thanks.

[fiddles5]

I fixed it by adding this:
.archive.genesis-author-pro .content .entry:nth-of-type(4n+1) {
clear: unset !important;
margin-left: 2.5641025641026% !important;
}

.archive.genesis-author-pro .content .entry {
clear: both;
}

.archive.genesis-author-pro .content .entry {
width: 100% !important;
}

to the section of style.css for screens less than 980 pixels wide. Seems to be working. Further testing needed.

[Author]

Posts