Community Forums › Forums › StudioPress Themes › Authority Pro › Can I modify the blog grid to be 2 or 1 columns instead of 3?
- This topic has 10 replies, 3 voices, and was last updated 3 years, 11 months ago by
vivianwlove.
-
AuthorPosts
-
March 15, 2021 at 1:44 am #503456
vivianwlove
ParticipantI'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.comMarch 15, 2021 at 6:47 am #503462Victor Font
ModeratorIn 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?March 15, 2021 at 10:35 am #503467vivianwlove
ParticipantThank you! Unfortunately it's staggered for some reason:
https://drive.google.com/file/d/19fJIGtpLY1v8iNl7O1CY5lwZQUiwJbDC/view?usp=sharingAlso, how can I tend make sure that it leaves it as one column on mobile/tablet?
Thanks!March 15, 2021 at 11:32 am #503469andytc
ParticipantFind 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; }
March 15, 2021 at 1:55 pm #503470vivianwlove
ParticipantI can't seem to get it to work 🙁
March 15, 2021 at 2:54 pm #503472andytc
ParticipantOk , you need victors code as well , so 2 changes. Did you modify both ?
March 15, 2021 at 3:08 pm #503473vivianwlove
ParticipantYeah, 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?
March 15, 2021 at 3:20 pm #503474andytc
ParticipantThe 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.
March 15, 2021 at 3:26 pm #503475vivianwlove
ParticipantYeah, 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.
March 15, 2021 at 4:08 pm #503476andytc
Participanttry 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; }
March 15, 2021 at 4:22 pm #503477vivianwlove
ParticipantPerfect, that worked--thank you both so much!!
-
AuthorPosts
- You must be logged in to reply to this topic.