Can I modify the blog grid to be 2 or 1 columns instead of 3?

[vivianwlove]

I'm using the Authority Pro theme for my portfolio, and using the "blog" area in the demo as a showcase for my portfolio pieces. It defaults to 3 columns wide, is there an easy way to get it to be 1 or 2 columns (so the images can be bigger)?

(Under "Selected work" in the attached URL)

Thanks in advance!

https://byVivian.com

[Victor Font]

In style.css around line 1815, change the width from 33.3% to 50% like this:

.flexible-widgets.widget-odd .featuredpost:last-of-type .entry, .authority-grid.archive:not(.woocommerce-page) .content .entry {
    float: left;
    padding: 0 35px;
        padding-bottom: 0px;
    width: 50%;
}

If you want 1-column, use 100% as the width.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[vivianwlove]

Thank you! Unfortunately it's staggered for some reason:
https://drive.google.com/file/d/19fJIGtpLY1v8iNl7O1CY5lwZQUiwJbDC/view?usp=sharing

Also, how can I tend make sure that it leaves it as one column on mobile/tablet?
Thanks!

[andytc]

Find this entry and change the (3n+1) to (2n+1) as shown below to remove the staggered look. The layout will automatically respond to mobile devices as normal. Test it in DEV tools in your browser.

.flexible-widgets.widget-odd .featuredpost:last-of-type .entry:nth-of-type(2n+1), .authority-grid.archive:not(.woocommerce-page) .content .entry:nth-of-type(2n+1) {
    clear: left;
}

[vivianwlove]

I can't seem to get it to work 🙁

[andytc]

Ok , you need victors code as well , so 2 changes. Did you modify both ?

[vivianwlove]

Yeah, I added them both in the Customize > Additional CSS area:

.flexible-widgets.widget-odd .featuredpost:last-of-type .entry, .authority-grid.archive:not(.woocommerce-page) .content .entry {
    float: left;
    padding: 0 35px;
        padding-bottom: 0px;
    width: 50%;
}

.flexible-widgets.widget-odd .featuredpost:last-of-type .entry:nth-of-type(2n+1), .authority-grid.archive:not(.woocommerce-page) .content .entry:nth-of-type(2n+1) {
    clear: left;
}

Like this?

[andytc]

The styles in the customiser are commented out , remove the comments completely for now or move the comment closing tag to the right place on the first comment.

[vivianwlove]

Yeah, because it was breaking my site/leaving the images staggered and didn't want to leave it published like that. It's there now with the 2 code snippets from above.

[andytc]

try changing the values directly in the style sheet rather than the customiser.

line 1815

.flexible-widgets.widget-odd .featuredpost:last-of-type .entry,
.authority-grid.archive:not(.woocommerce-page) .content .entry {
	float: left;
	padding: 0 35px;
	width: 50%;
}

line 1826

.flexible-widgets.widget-odd .featuredpost:last-of-type .entry:nth-of-type(2n+1), .authority-grid.archive:not(.woocommerce-page) .content .entry:nth-of-type(2n+1) {
	clear: left;
}

[vivianwlove]

Perfect, that worked--thank you both so much!!

[Author]

Posts