Apply style to _internal/pagination.html

I am using the Victor Hugo template that was initially hosted on Netifly. The only problem I am having is applying any kind of inline style or container to getting the paginator nav to build in a column. It is generating a row and all the buttons are positioned absolute left.

This is what is generated:

<div class="" style="flex-direction: row;align-content: center;">
<ul class="pagination">
    <li class="page-item">
        <a href="/post/" class="page-link" aria-label="First"><span aria-hidden="true">««</span></a>
    <li class="page-item disabled">
    <a href="" class="page-link" aria-label="Previous"><span aria-hidden="true">«</span></a>
 <li class="page-item active"><a class="page-link" href="/post/">1</a></li>
    <li class="page-item"><a class="page-link" href="/post/page/2/">2</a></li>
    <li class="page-item">
    <a href="/post/page/2/" class="page-link" aria-label="Next"><span aria-hidden="true">»</span></a>
    <li class="page-item">
        <a href="/post/page/2/" class="page-link" aria-label="Last"><span aria-hidden="true">»»</span></a>

This is one of the solutions I’ve tried:

<div class="nav" style="flex-direction: row;align-content: center;">
  {{ template "_internal/pagination.html" . }}

What I want is for the template to generate within a container that I can apply some flex-box styling to it.

Here is how it renders on the screen:

You already have a container: <ul>...</ul>. Style this as needed with selectors such as ul.pagination,, etc.

I do appreciate it. Not too familiar with the dynamic templating for Hugo. Only been using it for a couple days. Just like any vanilla HTML was able to find the styles to apply that I want on that unordered list, the problem is, is that I am using a style sheet and a templating system that is foreign. There are several imports to the main.css.

As I typed this I solved the problem. Appreciate it.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.