Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Align the container with the left side and stretch it to fill the right side completely

I’d like to align a carousel with the left side of a container and have the right side stretch to the edge using the remaining space. Please see the attachment below. Thank you.
enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I've managed to complete it using the CSS below:

    .wrapper{
    margin-left:calc((100% - 1140px) / 2); /* Container width 1140 */
    display:flex;
    flex-wrap:wrap;
}

  2. 0

    One way could look like this. Basically allowing the element to gallery to overflow and preventing the scrollbars on the outer container main or body

    html,
body {
  overflow-x: hidden;
}

.wrapper {
  width: 400px;
  margin: 0 auto;
}

.gallery {
  background: aliceblue;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 10px 0;

  .item {
    flex: 0 0 250px;
    background: cadetblue;
    padding: 10px;
  }
}
    <main>
  <div class="wrapper">
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla rerum voluptatum ex, dolores reiciendis praesentium, assumenda nam ab tenetur nesciunt fugiat molestias totam quas vel eos debitis amet nihil. Asperiores?
    </p>

    <div class="gallery">
      <div class="item">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed, id. Aut nulla ab vero corporis cupiditate voluptatem fugiat, deleniti dolores assumenda perferendis facilis delectus officia! Rem maxime repellat quod sunt?
      </div>

      <div class="item">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed, id. Aut nulla ab vero corporis cupiditate voluptatem fugiat, deleniti dolores assumenda perferendis facilis delectus officia! Rem maxime repellat quod sunt?
      </div>

      <div class="item">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed, id. Aut nulla ab vero corporis cupiditate voluptatem fugiat, deleniti dolores assumenda perferendis facilis delectus officia! Rem maxime repellat quod sunt?
      </div>

      <div class="item">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed, id. Aut nulla ab vero corporis cupiditate voluptatem fugiat, deleniti dolores assumenda perferendis facilis delectus officia! Rem maxime repellat quod sunt?
      </div>
    </div>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla rerum voluptatum ex, dolores reiciendis praesentium, assumenda nam ab tenetur nesciunt fugiat molestias totam quas vel eos debitis amet nihil. Asperiores?
    </p>
  </div>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search