• I want to reduce the size of featured posts/images to half of what is it right now. The reason is when someone comes to my website they are only able to see the 6 featured posts/images at first. The content below the featured images is not seen unless someone scrolls down.

    How can i reduce the size of featured posts/images so that visitors are able to see the below featured posts/images in first go without scrolling down? Here is the link to my website: http://xplor-india.com/

    Please give me step by step guidance. Thanks in advance.

Viewing 15 replies - 1 through 15 (of 48 total)
  • Hello,

    You need to try this in your Custom CSS for achieving that:

    .grid .featured-content .hentry {
        clear: right !important;
        width: 16.66%;
    }

    [ Link redacted ]

    Thank you.

    Thread Starter xploreindia

    (@xploreindia)

    This is what I did:

    Appearance>> Edit CSS>> Insert the code above>> save stylesheet

    but when i viewed the page, there was no change in size. Could you please guide in details. Thank you.

    Hello,

    I can not even see that style in your site. Have you removed that completely? Please try deactivating all plugins you have first and then add that code correctly in your Custom CSS and save the changes.

    Hope that helps. Thank you.

    Thread Starter xploreindia

    (@xploreindia)

    Yes I had removed it. Am I following this part correctly?

    Appearance>> Edit CSS>> Insert the code above>> save stylesheet

    Thread Starter xploreindia

    (@xploreindia)

    I have gone the guide but it requires child theme, I am not that familiar with child theme usage. Isn’t there any other easier method?

    Hello,

    You can find 2 options there. Either use a Child Theme of can use some plugins. Please download and install any one custom CSS plugin and you can find a place for add your Custom CSS in your Dashboard.

    Thank you.

    Thread Starter xploreindia

    (@xploreindia)

    Wow thanks Jitendra, CSS plugin option was easy and quick. Solved my problem.

    I have another query, can you please suggest in adding three columns in the content part. Here is the sample link of another website:
    http://www.lonelyplanet.com/india/uttarakhand-uttaranchal/mussoorie/sights

    here is the link where I already posts my query before but no help till now, https://wordpress.org/support/topic/adding-columns-1?replies=1

    Please suggest some easy plugin. Thanks in advance.

    Hello,

    You need to try this in your Custom CSS for achieving that:

    #content .hentry {
        float: left;
        margin: 0 4px 40px;
        max-width: 215px;
        min-height: 1600px;
    }

    make sure to add featured images to all your posts so that it looks better and add less excerpt to posts so that user will not scroll much to see the next row.

    After you decrease the excerpts in the main page, then you can reduce the height 1600px in the above CSS to less number to keep the look cool.

    Hope that is what you are looking for. Thank you.

    Thread Starter xploreindia

    (@xploreindia)

    Yes definitely this was exactly what I was looking for..thanks, however I would like to make some changes as below:

    1) I want to have 3 columns only for the homepage, for rest of the posts I don’t want to have 3 three columns as they are single posts. Now when I added this code it has changed for all single posts also.

    2) The title of the posts on homepage are too big, I want to make them at least 1/3 of the current size only for homepage.

    3)The content posts of the homepage are going looong while I want to make them wider and each post should consist of approx 25 words only.

    4)In the second column the “Pashmina” post is coming singly, I don’t know why.

    I guess after making the above 4 changes, my site would be perfect.

    Hello friend,

    1. Sorry, I have provided the wrong one. You need to try this instead of the above code in your Custom CSS:

    .home #content .hentry {
        float: left;
        margin: 0 4px 40px;
        max-width: 215px;
        min-height: 1600px;
    }

    2. Try this in your Custom CSS by changing the font-size as per your requirement:

    .home #content header .entry-title a {
        font-size: 20px;
    }
    .home #content .entry-header {
        padding-right: 0;
    }

    3. You need to set the page break after 25 words by editing your post directly so that you can see less excerpt in the home page.

    4. I have also stated that above:

    After you decrease the excerpts in the main page, then you can reduce the height 1600px in the above CSS to less number to keep the look cool.

    As all your contents are loner than 1600px (the code provided in point 1), so it is showing like that. Currently you have replaced the 1600px with 500px. Please change that to 920px so that you can see that fine.

    Feel free to ask if you need any other help. Thank you.

    Thread Starter xploreindia

    (@xploreindia)

    Hello friend,

    1~3 are solved…thanks a million again….

    As for no.4, I changed to 920px but the post is still going longerrrr not wider…

    When I change to 500px then I am still facing this problem “4)In the second column the “Pashmina” post is coming singly, I don’t know why.”

    Otherwise site looks perfect to me, as I wanted it. Thanks to you for that.

    Also here is new 3 queries:

    a) How to change the font colors of the title posts in the home page only.

    b) the gaps in the title of posts is a lot, how to decrease that?
    c) On the homepage options how to get a “NEXT PAGE”option?

    Thanks again.

    Hello,

    Try this in your Custom CSS for increasing the width:

    .home #content article .entry-header, .home #content article .entry-content {
        margin-right: 25px;
    }

    You can adjust the value as per your requirement. When you increase the width, the height will decrease. So you need to adjust the width in the above CSS also to make the posts close.

    New Ques:

    a. You have added this in your Custom CSS before:

    .home #content header .entry-title a {
        font-size: 15px;
    }

    Try replacing this by adjusting the color as per your requirement:

    .home #content header .entry-title a {
        color: #f00;
        font-size: 15px;
    }

    b. Try this in your Custom CSS for achieving that:

    .home #content article .entry-title {
        line-height: 15px;
    }

    c. Please go to Settings > Reading and set the blog page Show at most to any number of your choice and save the changes.

    Then when you have more posts that the number you set there, then it will automatically show pagination in your site.

    Thank you.

    Thread Starter xploreindia

    (@xploreindia)

    Wow amazing…all issues solves. Thanks a lot.

    Only one last please:
    the gap between the three upper posts and 3 lower posts in a lot, how to decrease that gap space?

    Hello,

    You have added this in your Custom CSS:

    .home #content .hentry {
        float: left;
        margin: 0 4px 40px;
        max-width: 215px;
        min-height: 920px;
    }

    But as you have increased the width of the content, the height decreased. Please try replacing that with:

    .home #content .hentry {
        float: left;
        margin: 0 4px 40px;
        max-width: 215px;
        min-height: 620px;
    }

    And also in future, if you need to adjust the width, you can do that by adjusting the height only as I have done in the above code.

    Thank you.

    Thread Starter xploreindia

    (@xploreindia)

    Thanks a million. All issues solved, love my site now 🙂 You have been a great help. Let me know if I can contribute to you in any way.

Viewing 15 replies - 1 through 15 (of 48 total)
  • The topic ‘Reduce size of featured posts/images’ is closed to new replies.