javascripthtmlcssfrontendmobile-website

Pagination not visible on large devices


The problem is that the pagination for the articles section is only visible on small devices,i.e. when I reduce the window size. When it is on full size the pagination does not appear completely. I can't figure out how to fix this. Could you help me?

This is the snippet html for the article section:

        <!--==================== ARTICLES ====================-->
        <section class="articles section">
                <h2 class="section__title">Medium Articles</h2>
                <span class="section__subtitle">See some of my published articles</span>
                <div class="articles__container container swiper-container">
                    <div class="swiper-wrapper">
                    <!--==================== ARTICLE 1 ====================-->
                    <div class="articles__content swiper-slide">
                        <div class="card">
                        <a href="https://medium.com/gitconnected/a-developers-guide-to-working-with-apis-d5c8aa4e0284">
                            <h4>🛠️ A Developer's Guide to Working with APIs</h4>
                            <p class="journal">Published on Level Up Coding</p>
                            <p>Master using APIs in Python! Learn why APIs are crucial, how to use them, and the
                                differences between REST and GraphQL.</p>
                        </a>
                        </div>
                    </div>
                <!--==================== ARTICLE 2 ====================-->
                <div class="articles__content swiper-slide">
                    <div class="card">
                        <a href="https://medium.com/python-in-plain-english/python-the-glittering-jewel-of-modern-technology-972976c130f4">
                            <h4>🐍 Python: The Glittering Jewel of Modern Technology</h4>
                            <p class="journal">Published on Python in Plain English</p>
                            <p>Uncover the transformative role of Python, the versatile jewel of modern technology, driving innovation across AI, ML and web development.</p>
                        </a>
                    </div>
                </div>
                <!--==================== ARTICLE 3 ====================-->
                <div class="articles__content swiper-slide">
                    <div class="card">
                        <a href="https://medium.com/gitconnected/secrets-to-a-killer-data-science-portfolio-projects-that-will-skyrocket-your-career-67089b924929">
                            <h4>🚀 Secrets to a Killer Data Science Portfolio: Projects that Will Skyrocket Your Career
                            </h4>
                            <p class="journal">Published on Level Up Coding</p>
                            <p>Unlock the secrets to a powerful data science portfolio that propels your career to new
                                heights.</p>
                        </a>
                    </div>
                </div>
                <!--==================== ARTICLE 4 ====================-->
                <div class="articles__content swiper-slide">
                    <div class="card">
                        <a href="https://medium.com/gitconnected/building-a-deep-learning-model-with-tensorflow-and-keras-easier-than-you-think-62d0cb7945ff">
                            <h4>🧠 Building a Deep Learning Model with TensorFlow and Keras: Easier Than You Think</h4>
                            <p class="journal">Published on Level Up Coding</p>
                            <p>Master the art of Deep Learning with TensorFlow and Keras. A step-by-step guide to your
                                first model.</p>
                        </a>
                    </div>
                </div>
                <!--==================== ARTICLE 5 ====================-->
                <div class="articles__content swiper-slide">
                    <div class="card">
                        <a href="https://medium.com/mlearning-ai/creating-a-chatbot-with-python-5598e9a5f993">
                            <h4>💬 Creating a Chatbot with Python</h4>
                            <p class="journal">Published on MLearning.ai</p>
                            <p>Learn how to create a simple chatbot using Python and NLP techniques. Create an
                                intelligent conversational agent.</p>
                        </a>
                    </div>
                </div>
                <!--==================== ARTICLE 6 ====================-->
                <div class="articles__content swiper-slide">
                    <div class="card">
                        <a href="https://medium.com/gitconnected/design-patterns-in-python-a-practical-guide-to-writing-maintainable-code-a3f780a4a6ad">
                            <h4>📝 Design Patterns in Python: A Practical Guide to Writing Maintainable Code</h4>
                            <p class="journal">Published on Level Up Coding</p>
                            <p>Discover essential design patterns in Python for writing maintainable code, for beginner and experienced Python developer.</p>
                        </a>
                    </div>
                </div>
            </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination swiper-pagination-articles"></div>
            </div>
        </section>

Here there is the CSS part:

.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card {
    background-color: var(--container-color);
    border-radius: 5px;
    margin: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.card a {
    text-decoration: none;
    color: var(--text-color);
}

.card p, .card h3 {
    margin: 0;
    color: var(--text-color);
}

.card:hover{
    box-shadow: 0 4px 8px rgba(0,0,0,.45);
}

.journal{
    font-size: var(--smaller-font-size);
    color: var(--first-color);
    font-weight: var(--font-semi-bold);
    font-style: italic;
}

/*==================== articles ====================*/
.articles__data,
.articles__header {
  display: flex;
}
.articles__data {
  justify-content: space-between;
  margin-bottom: var(--mb-0-1);
}
.articles__img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: var(--mb-0-75);
}
.articles__name {
  font-size: var(--h2-font-size);
  font-weight: var(--font-medium);
}
.articles__client {
  font-size: var(--small-font-size);
  color: var(--text-color-light);
}
.articles__description {
  margin-bottom: var(--mb-2-5);
}
.articles__icon-star {
  color: var(--first-color);
}
.swiper-container .swiper-pagination-articles {
  bottom: 0;
}
/*==================== MEDIA QUERIES ====================*/
/* For small devices */
@media screen and (max-width: 350px){
    .container{
        margin-left: var(--mb-1);
        margin-right: var(--mb-1);
    }

    .nav__menu{
        padding: 2rem .25rem 4rem;
    }
    .nav__list{
        column-gap: 0;
    }
    
    .home__content{
        grid-template-columns: .25fr 3fr;

    }
    .home__blob{
        width: 180px;
    }

    .skills__title{
        font-size: var(--normal-font-size);
    }

    .qualification__data{
        gap: .5rem;
    }

    .Expertise__container{
        grid-template-columns: max-content;
        justify-content: center;
    }
    .Expertise__content{
        padding-right: 3.5rem;
    }
    .Expertise__modal{
        padding: 0 .5rem;
    }

    .project__img{
        width: 400px;
    }
    .articles__data,
    .articles__header {
      flex-direction: column;
      align-items: center;
    }
    .articles__img {
      margin-right: 0;
      margin-bottom: var(--mb-0-25);
    }
    .articles__data,
    .articles__description {
      text-align: center;
    }
}

And finally this is the javascript code:

let swiperarticles = new Swiper(".articles__container", {
    loop: true,
    grapCursor: true,
    spaceBetween: 40,
  
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
      dynamicBullets: true,
    },
    breakpoints: {
      568: {
        slidesPerView: 2,
      },
    },
  });

If you want to see how it appears you can see it directly on GitHub pages


Solution

  • In your css file,

    in @media screen and (min-width: 1024px) -->>

    
      .swiper-container-horizontal >.swiper-pagination-bullets{
            bottom: 0; /* earlier it was -4.5rem */
        }