Place featured slider title centred

  • Author
    Posts
  • #161424

    hughsueonghwushin
    Member
    Original poster

    Hi Taras,

    As you can see from my website, I’ve made the featured slider on front page full-screen(height: 100vh) and now I’m wondering if there’s a way to place the title(of the featured pages/posts) and ‘read more’ btn in the centre of the full-screened featured slider.

    Thank you!

    The blog I need help with is: hughshin.com

    #161437

    tarasdashkevych
    Theme Author

    Hello Hugh,

    Please use this custom CSS to center content inside the Featured Content section:

    
    .featured-content .container {
      height: 100vh;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
    }
    

    Let me know if you have any additional questions about the Featured Content section.

    Kind regards,
    Taras

    #161449

    hughsueonghwushin
    Member
    Original poster

    Thanks a lot!

    It works perfect :D

    #161450

    hughsueonghwushin
    Member
    Original poster

    Hi, Taras,

    The css solution you provided managed to place the title & read more btn in the centre of the featured slider, but I just noticed that the ‘read more’ btn below is not located below the title.

    Please help,

    Thanks :)

    #161498

    tarasdashkevych
    Theme Author

    Hello Hugh,

    “… but I just noticed that the ‘read more’ btn below is not located below the title. “
    – Could you please share a screenshot of the issue? I am not able to reproduce the issue on your site. Maybe I am looking at the wrong place.

    Kind regards,
    Taras

    #161510

    hughsueonghwushin
    Member
    Original poster

    Hi, Taras
    Thanks for the reply.

    The issue (page title and ‘read more’ btn seem displayed in the same row) I mentioned occurs when I apply the below css solution you gave:

     .featured-content .container {
      height: 100vh;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
    }

    So I justified the coding:

    .featured-content .container {
      height: 100vh;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: center;
    }

    and it seems I resolved the issue by locating the ‘read more’ btn below the page title, but I’m not sure whether the justified coding contains any unnecessary elements.

    #161516

    tarasdashkevych
    Theme Author

    Hugh,

    Your solution is perfect. It seems like I’ve forgotten to include justify-content (copied a wrong CSS from my testing environment). I apologize about it, and thank you for posting a correct solution!

    Please let me know if you have any additional questions about this section.

    Kind regards,
    Taras

    #161520

    hughsueonghwushin
    Member
    Original poster

    Great!

    Always appreciate for your help :)

    Best regards,
    Hugh

    #161522

    tarasdashkevych
    Theme Author

    You are always welcome, Hugh :)

    Kind regards,
    Taras

The topic ‘Place featured slider title centred’ is closed to new replies.