Place featured slider title centred

Premium Theme Support › Themes Harbor › Appetite

• Author
  Posts
• February 23, 2021 at 2:38 pm #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

  February 23, 2021 at 3:58 pm #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

  February 24, 2021 at 7:43 am #161449
  
  hughsueonghwushin
  

  Member

  Original poster

  Thanks a lot!

  It works perfect :D

  February 24, 2021 at 7:59 am #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 :)

  February 25, 2021 at 6:44 pm #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

  February 26, 2021 at 5:31 am #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.

  February 26, 2021 at 2:52 pm #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

  February 26, 2021 at 5:23 pm #161520
  
  hughsueonghwushin
  

  Member

  Original poster

  Great!

  Always appreciate for your help :)

  Best regards,
  Hugh

  February 26, 2021 at 5:42 pm #161522
  
  tarasdashkevych
  

  Theme Author

  You are always welcome, Hugh :)

  Kind regards,
  Taras

• Author
  Posts

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