Issue with Font-Size when using Swiper js

Question

I am learning how to use swiper JS and practicing by making a carousel. Unfortunately, I am having an issue with the font size. I noticed the issue when testing for mobile. Whenever I got from a vertical view to a horizontal view (turn my phone to the side), and then back vertically, the font size changes for no reason. It also resets once I refresh the page. I tried to override the setting using and !important and also applied some inline CSS, but nothing has worked. Could someone please take a look and see if th ey can figure out what's causing the error.

Here is a link to the live web: https://nn-code80.github.io/CarouselFacebook/

Here is a link to the repository where all my coding is stored: https://github.com/nn-code80/CarouselFacebook

Thanks for the help!

Answer 1

You have incorrectly placed closing curly brace, you are nesting elements within themselves, after display: none rule, which is not what you intend, probably.

Try this one:

@media(max-width: 599px){
  .swiper-button-next i, .swiper-button-prev i{
    display: none; 
  }
  .bottom p{
    font-size: 0.9rem !important;
    line-height: 1.6;
  }
}