Place featured slider title centred

Author

Posts
February 23, 2021 at 2:38 pm #161424

seunghughshin
Member

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: (visible only to logged in users)

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

seunghughshin
Member

Original poster

Thanks a lot!

It works perfect :D

February 24, 2021 at 7:59 am #161450

seunghughshin
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
seunghughshin
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

seunghughshin
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

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

No items found.