Skip to main content
Practice

Carousel Styling

Let's style the carousel using CSS.


.popular-items-list:

  • position: relative;: This style sets the reference point for absolutely positioned child elements. In other words, any absolutely positioned elements within this list will be positioned relative to this container.

  • display: flex;: This uses the flexbox layout to arrange the items inside horizontally.

  • overflow: hidden;: This style hides any content that overflows the container. Essentially, if there are multiple items in the carousel, only the visible area is shown to the user.

CSS
.popular-items-list {
  position: relative;
  width: 100%;
  height: 520px;
  display: flex;
  gap: 24px;
  overflow: hidden;
}

.popular-item:

  • flex-shrink: 0;: This property prevents items from shrinking in the flexbox layout. Essentially, it keeps the item size fixed.

  • width: 340px;: Sets the width of each item to 340px.

  • height: 462px;: Sets the height of each item to 462px.

CSS
.popular-item {
  flex-shrink: 0;
  width: 340px;
  height: 462px;
}

.popular-item-buttons-container:

  • display: flex;: This property is used to arrange the elements (divider and two buttons) inside the container horizontally.

  • align-items: center;: This property vertically centers the elements within the container. Therefore, the divider and the two buttons are vertically aligned in the center.

  • gap: 16px;: This property adds space between the immediate children elements within the container. The divider and each button are spaced 16px apart.

  • margin-top: 20px;: This property adds a margin at the top of the container. Therefore, this container will have a 20px gap above it from the previous element.

CSS
.popular-item-buttons-container {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.