Jump to content

While changing Carousel item's width carousel loses the text-align property

Recommended Posts

Wondering why carousel loses text-align property (value 'center') when changing carousel item's width. I'm new in writing css, need to change the carousel item's width in media sreen  and (max-width:480px). I just stuck.  Big thanks in advance!

 

<section class="section-more" id="services">
        <div class="more-header">
            <img class="more-image" src="img/flowers (2).jpg" alt="">
            <p class="text-more">I help agencies and brands to <br> turn their ideas into designs. Great <br> designs
                and a healthy freelance relationship.</p>
        </div>


 
        <div class="carousel">
            <a class="carousel-item" href="#">
                <div class="testi">
                    <div class="img-area">
                        <img src="img/web design svg.svg" alt="Design">
                    </div>
                    <p>Webdesign</p>
                    <h3>Beautiful and elegant designs with interfaces that are efficient, intuitive and pleasant to
                        use for the users.</h3>
                </div>
 
            </a>
 
            <a class="carousel-item" href="#">
                <div class="testi">
                    <div class="img-area">
                        <img src="img/web development  svg.svg" alt="Design">
                    </div>
                    <p>Development</p>
                    <h3>Custom web development tailored to your specifications, designed to provide a flawless user
                        experience.</h3>
                </div>
 
            </a>
 
            <a class="carousel-item" href="#">
                <div class="testi">
                    <div class="img-area">
                        <img src="img/mobile app svg.svg" alt="Design">
                    </div>
                    <p>Mobile App</p>
                    <h3>Design and transform website projects into mobile apps to provide a seamless user
                        experience.
                    </h3>
                </div>
 
            </a>
 
            <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 
            <script>
                $(document).ready(function () {
                    $('.carousel').carousel({
                        padding: 200
                    });
                    autoplay();
                    function autoplay() {
                        $('.carousel').carousel('next');
                        setTimeout(autoplay, 5800)
                    }
                });
 
            </script>
        </div>
    </section>
css 
 

.section-more {

  margin: 0;

  padding: 0;

  background: #e3e1df;

  height: 100vh;

}

 

.more-image {

  width: 100%;

  height: 200px;

  object-fit: cover;

}

.text-more {

  color: #434c3e;

  font-size: 24px;

  font-family: Montserrat;

  font-weight: 400;

  line-height: 36px;

  word-wrap: break-word;

  text-align: center;

  letter-spacing: 2px;

  padding-top: 50px;

  height: 158px;

}

 

.carousel {

  height: 600px;

  perspective: 250px;

  margin: 0 auto;

}

 

.carousel .carousel-item {

  width: 450px;

  background: #ffffff;

  padding: 50px;

  height: auto;

  text-align: center;

  border-radius: 15px;

}

 

.img-area {

  width: 100px;

  height: 100px;

  margin: 0 auto;

  overflow: hidden;

  border-radius: 50%;

  border: inset 8px #88a2a5;

}

 

.img-area img {

  width: 99%;

  padding-top: 3px;

}

 

.testi p {

  color: #434c3e;

  font-size: 36px;

  line-height: 1.9;

}

 

.testi h3 {

  font-size: 24px;

  margin: 0;

  color: #434c3e;

  font-family: Montserrat;

}

 
Link to comment
  • Replies 2
  • Views 199
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.