Wondering why carousel loses margin: 0 auto property when changing carousel item’s width. I’m new in writing css, need to change the carousel items’ 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>
Hi @Anna7 .
I think you need to write this code to .carousel class
{
width:100%;
display:flex;
flex-direction:column;
align-items:center;
}.
And also set display to block for each carousel item.
The CSS you posted does not have a media query. Please update your code with the media query you have tried to write.
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
It sounds like you’re having some trouble with your carousel’s CSS, especially when adjusting the width of the carousel items for smaller screens. We need to ensure that the carousel stays centered even when the width of the items changes. You can achieve this by adjusting your CSS and adding a media query for the smaller screen sizes.
I’ve added a media query for screens with a maximum width of 480px. Inside this media query, we adjust the width of the carousel items to 300px (you can change this value as needed).
The margin: 0 auto on the .carousel should still work to center the carousel. If the carousel isn’t centering properly, ensure there are no other styles interfering with it.
Thanks @Johnmk for trying to help. I also edited your message for readability.
Please check what @lasjorg wrote about readability in its previous message:
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
Sorry I forgot to mention that it would be more productive for other students if you refrain for giving your full solution. Instead, better to mention relevant things that might help to find a solution. Even tips for debugging are more productive than giving a full solution.
But again, thanks for being pro-active in helping other students.
I just wanted to delete this post to write the code correctly. First I wanted to edit the post. But I’ ve searched the edit button for an hour. Where is it???
Anyway, nothing in that block of code is changing the margin on .carousel. My guess is you are jumping to conclusions based on how it looks and not the actual styles being applied. Use the browsers dev tools to inspect your styles.
The width you are setting width: 41.5rem; is very unlikely to be something you would ever want. You almost never want to set a fixed width as that will just cause an overflow.
Thanks for the feedback and the edits for readability! I appreciate the tips on using backticks for code blocks and the preformatted text tool. I’ll make sure to use them next time.
I’ll also keep in mind to give helpful tips rather than full solutions. Thanks for pointing that out.
