问题是文章部分的分页仅在小型设备上可见，即当我减小窗口大小时。当它是全尺寸时，分页不会完全显示。我不知道如何解决这个问题。你能帮我吗？
这是文章部分的 html 片段：
<!--==================== 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>
这里是CSS部分：
.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;
}
}
最后这是 javascript 代码：
let swiperarticles = new Swiper(".articles__container", {
loop: true,
grapCursor: true,
spaceBetween: 40,
pagination: {
el: ".swiper-pagination",
clickable: true,
dynamicBullets: true,
},
breakpoints: {
568: {
slidesPerView: 2,
},
},
});
如果您想查看它的外观，您可以直接在 GitHub 页面
上查看它在你的CSS文件中，
在@media屏幕和（最小宽度：1024px）-->>
.swiper-container-horizontal >.swiper-pagination-bullets{
bottom: 0; /* earlier it was -4.5rem */
}