Community Forums › Forums › Archived Forums › General Discussion › Home Page Three posts display in row – one widget
- This topic has 16 replies, 4 voices, and was last updated 8 years, 6 months ago by Genesis Developer.
-
AuthorPosts
-
October 8, 2015 at 9:52 am #167673mountashMember
I am working with Executive Pro. I want to have one of the home sections widgets display three posts from one category. I am using Genesis Feature Post. However, the posts display vertically, rather than horizontally.
I know how to work with function.php, front-page.php, and style.css. I know with Magazine Pro the middle section displays two post horizontally, but I cannot see where the code is different.
Can some one let me know what I am missing? I assume it is on one of the three above mentioned pages.
Janet
Janet Morrow | Mountain Ash Website Design | http://www.mountainash.org
Visit Our Site for more information and pricing.October 8, 2015 at 12:54 pm #167685Brad DaltonParticipantUsing the featured-post class, try
display: inline-block;
Live Demo http://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block
October 9, 2015 at 10:31 am #167728mountashMemberHi Brad,
I was hoping it would be that easy, but it did not work. Here is the code:
.home-top { background-color: #fff; clear: both; padding: 20px; overflow: hidden; } .home-top .widget { background: #744D99; color: #FFFFFF; display: inline-block; float: left; padding: 8px; margin: 8px; width: 31%; } .home-top .widget:nth-of-type(3n+1) { clear: left; }
Do you see any I am missing? Or should remove?
Janet Morrow | Mountain Ash Website Design | http://www.mountainash.org
Visit Our Site for more information and pricing.October 9, 2015 at 11:22 am #167732mountashMemberHere is my work site:
http://mountainash.org/work-site/
So long as I add separate widgets to home top or home middle they display side by side.
However, as you will see from the home middle when I add one widget for feature posts they do not appear side by side, but vertically. I want them to line up horizontally.
Thank you all,
Janet
Janet Morrow | Mountain Ash Website Design | http://www.mountainash.org
Visit Our Site for more information and pricing.October 9, 2015 at 11:37 am #167733Brad DaltonParticipantOctober 9, 2015 at 11:44 am #167734Brad DaltonParticipantHere's the result https://www.youtube.com/watch?v=yBPaQ5bDXZM
The CSS you pasted isn't using the .featured-post class as instructed.
October 9, 2015 at 11:46 am #167735mountashMemberOK, I guess I do not understand where. Would I change the css to
.home-top .featured post
what I do not understand is what I should change to .featured-post...Janet
Janet Morrow | Mountain Ash Website Design | http://www.mountainash.org
Visit Our Site for more information and pricing.October 9, 2015 at 11:49 am #167736Brad DaltonParticipantAgain, your CSS will not work.
This is what you pasted above:
.featured post
Should be:
.featured-post
Also, the URL you linked to does not contain the genesis featured post widget set to display 3 posts so testing any CSS changes using the browser isn't possible.
October 9, 2015 at 11:53 am #167737mountashMemberOK, I do see that mistake, but I am not using .featured-post any where in my css. I am using Executive Pro, and it does not use .featured-post any where...?
Janet
Janet Morrow | Mountain Ash Website Design | http://www.mountainash.org
Visit Our Site for more information and pricing.October 9, 2015 at 11:59 am #167738Brad DaltonParticipantI am using Executive Pro, and it does not use .featured-post any where…?
Thats right. You need to modify the CSS to use the featured-post class which is generated by the featured post widget.
Your themes CSS includes the class for the featured page widget which will not work with featured posts.
October 9, 2015 at 12:02 pm #167739mountashMemberThe Genesis - Featured Posts widget at the bottom of the page. It is in red.
Janet Morrow | Mountain Ash Website Design | http://www.mountainash.org
Visit Our Site for more information and pricing.October 9, 2015 at 12:13 pm #167740Brad DaltonParticipantTry
.featuredpost
or
.featured-content
Here are the classes you can see when you inspect the element which are generated by the featured post widget
<section id="featured-post-2" class="widget featured-content featured post">
October 9, 2015 at 1:11 pm #167750mountashMemberI have tried:
.featured-post
.featuredpost
.featured-content.home-bottom .featured-post { display: inline-block !important; float: left; padding: 0 2.8%; width: 33.33333333333%; }
.home-bottom .widget:nth-of-type(3n+1) { clear: left; }
Nothing is working.
Janet
Janet Morrow | Mountain Ash Website Design | http://www.mountainash.org
Visit Our Site for more information and pricing.October 9, 2015 at 1:17 pm #167751mmjaegerMemberyour widget needs to be 100% wide - you're setting it to 33% - the articles inside that widget need to be set at 33%
October 9, 2015 at 2:08 pm #167760mountashMemberWhen the widget with is 100%; the posts are the full width. I really do not understand why the posts will not line up horizontally. If I do separate widgets they will, just not from featured posts.
http://mountainash.org/work-site/
Janet Morrow | Mountain Ash Website Design | http://www.mountainash.org
Visit Our Site for more information and pricing.October 10, 2015 at 7:39 am #167788mmjaegerMemberThis reply has been marked as private.October 11, 2015 at 4:14 am #167848Genesis DeveloperMemberYou can try Genesis Fetured Post Combo plugin.
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.