Question 374706 in Html Question posted in
Some basic documentation can be found here.

Html – How to align partial width column to right side of container with tailwind

I have a section that extends beyond the page on either side and need to reduce the width of the column containing text for smaller screens. I reduced it to 70% and it works great on the right half, but aligns left and the left side, causing it to fall off the screen. I have tried a number of modifications, but cannot get the reduced width column to align right. Any help is appreciated!

<style>
    @import url("https://use.typekit.net/poz1xqv.css");
    @import url('https://fonts.googleapis.com/css2?family=Syne:[email protected]&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap')
    *
    {
      margin:0px;
      padding:0px;
    }
    .body {
      display: flex;
      justify-content: center;
    }
    .syne-font {
      font-family: "Syne", sans-serif;
      font-optical-sizing: auto;
      font-weight: 500;
      font-style: normal;
    }
    .work-sans-light {
      font-family: "Work Sans", sans-serif;
      font-optical-sizing: auto;
      font-weight: 300;
      font-style: normal;
    }
    .work-sans-medium {
      font-family: "Work Sans", sans-serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
    }
    .cta-button {
      position: relative;
      display: block;
      background-color: #ffffff;
      width: 100%;
      text-align: center;
      padding: 10px 0;
      /*border: 2px solid black;*/
      text-decoration: none;
      color: black;
      transition: background-color 0.3s, color 0.3s;
      font-size: 20px;
    }
    .cta-button:hover {
      text-decoration: none;
      /*background-color: black;
      color: white;*/
    }
    .cta-button::before {
      content: "";
      position: absolute;
      width: 20px;
      height: 20px;
      top: 0;
      left: 0;
      border-top: 2px solid black;
      border-left: 2px solid black;
      transition: ease .5s;
    }
    .cta-button::after{
      content: "";
      position: absolute;
      width: 20px;
      height: 20px;
      bottom: 0;
      right: 0;
      border-right: 2px solid black;
      border-bottom: 2px solid black;
      transition: ease .5s;
    }
    .cta-button:hover::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 0;
      top: 0;
      left: 0;
      border-top: 2px solid black;
      border-left: 2px solid black;
      transition: ease .5s;
    }
    .cta-button:hover::after{
      content: "";
      position: absolute;
      width: 100%;
      height: 0px;
      bottom: 0;
      right: 0;
      border-right: 2px solid black;
      border-bottom: 2px solid black;
      transition: ease .5s;
    }
    .more-button {
      position: relative;
      display: block;
      background-color: #ffffff;
      width: 60%;
      text-align: center;
      padding: 10px 0;
      /*border: 2px solid black;*/
      text-decoration: none;
      color: black;
      /*opacity: .5;*/
      transition: opacity 1s, background-color 0.3s, color 0.3s;
      font-size: 14px;
    }
    .more-button:hover {
      text-decoration: none;
      /*background-color: black;
      color: white;*/
    }
    .more-button::before {
      content: "";
      position: absolute;
      width: 20px;
      height: 20px;
      top: 0;
      left: 0;
      border-top: 2px solid black;
      border-left: 2px solid black;
      transition: ease .5s;
    }
    .more-button::after{
      content: "";
      position: absolute;
      width: 20px;
      height: 20px;
      bottom: 0;
      right: 0;
      border-right: 2px solid black;
      border-bottom: 2px solid black;
      transition: ease .5s;
    }
    .more-button:hover::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 0;
      top: 0;
      left: 0;
      border-top: 2px solid black;
      border-left: 2px solid black;
      transition: ease .5s;
    }
    .more-button:hover::after{
      content: "";
      position: absolute;
      width: 100%;
      height: 0px;
      bottom: 0;
      right: 0;
      border-right: 2px solid black;
      border-bottom: 2px solid black;
      transition: ease .5s;
    }
    .hidden-text {
      display: flex;
      flex-direction: column;
      position: relative;
      opacity: 0;
      overflow: hidden;
      transition: 1s ease;
    }
    .hidden-text:hover {
      opacity: 100;
    }
    .feature-image:hover ~ .hidden-text,
    .hidden-text:hover {
      opacity: 100;
    }
    .sliding-section {
      /* margin-left: -120px;
      margin-right: 120px; */
      min-height: 800px;
      position: relative;
      margin-left: -25%;
      margin-right: 25%;
      /*width: 120%;*/
      width: 150%;
      display: flex;
      align-items: center;
      overflow: hidden;
      transform: translateX(0);
      transition: ease 1s;
    }
    @media screen and (min-width: 640px) {
      .sliding-section {
        width: 120%;
        margin-left: -10%;
        margin-right: 10%;
      }
    }
    .residential {
      position: relative;
      min-height: 600px;
      transform: translateX(0);
      opacity: 1;
      transition: ease 1s;
    }
    .residential:hover {
      transform: translateX(10%);
      transition: ease 1s;
    }
    .residential:hover ~ .commercial{
      transform: translateX(10%);
      opacity: .25;
      transition: ease 1s;
    }
    .hidden-button {
      opacity: 0;
      transition: ease 1s;
    }
    .residential:hover .hidden-button{
      opacity: 1;
      transition: ease 1s;
    }
    .commercial:hover .hidden-button{
      opacity: 1;
      transition: ease 1s;
    }
    .commercial {
      position: relative;
      min-height: 600px;
      transform: translateX(0);
      opacity: 1;
      transition: ease 1s;
    }
    .commercial:hover {
      transform: translateX(-10%);
      transition: ease 1s;
    }
    .commercial:hover ~ .residential{
      transform: translateX(-10%);
      transition: ease 1s;
    }
    .residential:has(~.commercial:hover) {
      transform: translateX(-10%);
      opacity: .25;
      transition: ease 1s;
    }
    .hid-text-res {
      display: flex;
      flex-direction: column;
      position: relative;
      opacity: 100;
      overflow: hidden;
      transition: 1s ease;
    }
    .hid-text-com {
      opacity: 100;
      transition: 1s ease;
    }
    .hid-text-com:has(~.residential:hover) {
      opacity: 0;
      transition: ease 1s;
    }
</style>
<script src="https://cdn.tailwindcss.com"></script>
<script>
    tailwind.config = {
      theme: {
    extend: {
      fontFamily: {
            'TradeGothicNext': ['"Trade Gothic Next"', 'sans-serif']
          },
          fontFamily: {
            'Syne': ['"Syne"', 'sans-serif']
          },
          fontFamily: {
            'Work Sans': ['"Work Sans"', 'sans-serif']
          },
      colors: {
        greybg: '#CECCC4',
      }
          transitionDuration: {
            '300': '300ms',
          }
    }
      }
    }
  </script>

<div class="sliding-section w-screen mx-auto">
  <div class="w-full grid grid-cols-2 gap-5 md:gap-10">
    <div class="residential feature-image">
      <img class="object-cover overflow-x-visible" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/img4.jpg" alt="Residential" />
      <h3 class="hid-text-com text-right syne-font pt-4">Multi-Family</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 max-md:pl-5 max-md:w-[70%]">
        <div class="hidden-button flex items-center justify-center max-md:order-2 max-md:mt-5"><a href="#" class="more-button work-sans-medium">learn more</a></div>
        <div class="max-md:order-1">
          <p class="hid-text-com text-right work-sans-light pt-4">See our wide variety of cabinet types and styles and how they can accommodate all of your outdoor kitchen needs</p>
        </div>
      </div>
    </div>
    <div class="commercial">
      <img class="object-cover overflow-x-visible" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/img5.jpg" alt="Commercial" />
      <h3 class="hid-text-com text-left syne-font pt-4">Hospitality</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 max-md:pr-5 max-md:w-[70%]">
        <div class="hid-text-com hidden-text"><p class="hid-text2 text-left work-sans-light pt-4">See our wide variety of cabinet types and styles and how they can accommodate all of your outdoor kitchen needs</p></div>
        <div class="hidden-button flex items-center justify-center max-md:mt-5"><a href="#" class="more-button work-sans-medium">learn more</a></div>
      </div>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Remove this

    .body {
  display: flex;
  justify-content: center;
}

    Use tailwind’s own justify-content-center class as it maybe overwriting and causing clashes

    Tailwind is best used by using its own classes as they provide flexibility and functionality. Writing your own classes would be counter beneficial.

    Login or Signup to reply.
  2. 0

    You could consider applying margin-left: auto via the ml-auto class to the text container so that it is pushed and aligned to the right.

    @import url("https://use.typekit.net/poz1xqv.css");
@import url('https://fonts.googleapis.com/css2?family=Syne:[email protected]&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap') * {
  margin: 0px;
  padding: 0px;
}

.body {
  display: flex;
  justify-content: center;
}

.syne-font {
  font-family: "Syne", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.work-sans-light {
  font-family: "Work Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.work-sans-medium {
  font-family: "Work Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.cta-button {
  position: relative;
  display: block;
  background-color: #ffffff;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  /*border: 2px solid black;*/
  text-decoration: none;
  color: black;
  transition: background-color 0.3s, color 0.3s;
  font-size: 20px;
}

.cta-button:hover {
  text-decoration: none;
  /*background-color: black;
      color: white;*/
}

.cta-button::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  border-top: 2px solid black;
  border-left: 2px solid black;
  transition: ease .5s;
}

.cta-button::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  bottom: 0;
  right: 0;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  transition: ease .5s;
}

.cta-button:hover::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  border-top: 2px solid black;
  border-left: 2px solid black;
  transition: ease .5s;
}

.cta-button:hover::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 0px;
  bottom: 0;
  right: 0;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  transition: ease .5s;
}

.more-button {
  position: relative;
  display: block;
  background-color: #ffffff;
  width: 60%;
  text-align: center;
  padding: 10px 0;
  /*border: 2px solid black;*/
  text-decoration: none;
  color: black;
  /*opacity: .5;*/
  transition: opacity 1s, background-color 0.3s, color 0.3s;
  font-size: 14px;
}

.more-button:hover {
  text-decoration: none;
  /*background-color: black;
      color: white;*/
}

.more-button::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  border-top: 2px solid black;
  border-left: 2px solid black;
  transition: ease .5s;
}

.more-button::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  bottom: 0;
  right: 0;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  transition: ease .5s;
}

.more-button:hover::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  border-top: 2px solid black;
  border-left: 2px solid black;
  transition: ease .5s;
}

.more-button:hover::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 0px;
  bottom: 0;
  right: 0;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  transition: ease .5s;
}

.hidden-text {
  display: flex;
  flex-direction: column;
  position: relative;
  opacity: 0;
  overflow: hidden;
  transition: 1s ease;
}

.hidden-text:hover {
  opacity: 100;
}

.feature-image:hover~.hidden-text,
.hidden-text:hover {
  opacity: 100;
}

.sliding-section {
  /* margin-left: -120px;
      margin-right: 120px; */
  min-height: 800px;
  position: relative;
  margin-left: -25%;
  margin-right: 25%;
  /*width: 120%;*/
  width: 150%;
  display: flex;
  align-items: center;
  overflow: hidden;
  transform: translateX(0);
  transition: ease 1s;
}

@media screen and (min-width: 640px) {
  .sliding-section {
    width: 120%;
    margin-left: -10%;
    margin-right: 10%;
  }
}

.residential {
  position: relative;
  min-height: 600px;
  transform: translateX(0);
  opacity: 1;
  transition: ease 1s;
}

.residential:hover {
  transform: translateX(10%);
  transition: ease 1s;
}

.residential:hover~.commercial {
  transform: translateX(10%);
  opacity: .25;
  transition: ease 1s;
}

.hidden-button {
  opacity: 0;
  transition: ease 1s;
}

.residential:hover .hidden-button {
  opacity: 1;
  transition: ease 1s;
}

.commercial:hover .hidden-button {
  opacity: 1;
  transition: ease 1s;
}

.commercial {
  position: relative;
  min-height: 600px;
  transform: translateX(0);
  opacity: 1;
  transition: ease 1s;
}

.commercial:hover {
  transform: translateX(-10%);
  transition: ease 1s;
}

.commercial:hover~.residential {
  transform: translateX(-10%);
  transition: ease 1s;
}

.residential:has(~.commercial:hover) {
  transform: translateX(-10%);
  opacity: .25;
  transition: ease 1s;
}

.hid-text-res {
  display: flex;
  flex-direction: column;
  position: relative;
  opacity: 100;
  overflow: hidden;
  transition: 1s ease;
}

.hid-text-com {
  opacity: 100;
  transition: 1s ease;
}

.hid-text-com:has(~.residential:hover) {
  opacity: 0;
  transition: ease 1s;
}
    <script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        fontFamily: {
          'TradeGothicNext': ['"Trade Gothic Next"', 'sans-serif']
        },
        fontFamily: {
          'Syne': ['"Syne"', 'sans-serif']
        },
        fontFamily: {
          'Work Sans': ['"Work Sans"', 'sans-serif']
        },
        colors: {
          greybg: '#CECCC4',
        }
        transitionDuration: {
          '300': '300ms',
        }
      }
    }
  }
</script>

<div class="sliding-section w-screen mx-auto">
  <div class="w-full grid grid-cols-2 gap-5 md:gap-10">
    <div class="residential feature-image">
      <img class="object-cover overflow-x-visible" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/img4.jpg" alt="Residential" />
      <h3 class="hid-text-com text-right syne-font pt-4">Multi-Family</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 max-md:pl-5 max-md:w-[70%] ml-auto">
        <div class="hidden-button flex items-center justify-center max-md:order-2 max-md:mt-5"><a href="#" class="more-button work-sans-medium">learn more</a></div>
        <div class="max-md:order-1">
          <p class="hid-text-com text-right work-sans-light pt-4">See our wide variety of cabinet types and styles and how they can accommodate all of your outdoor kitchen needs</p>
        </div>
      </div>
    </div>
    <div class="commercial">
      <img class="object-cover overflow-x-visible" src="https://danverstg.wpengine.com/wp-content/uploads/2024/04/img5.jpg" alt="Commercial" />
      <h3 class="hid-text-com text-left syne-font pt-4">Hospitality</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 max-md:pr-5 max-md:w-[70%]">
        <div class="hid-text-com hidden-text">
          <p class="hid-text2 text-left work-sans-light pt-4">See our wide variety of cabinet types and styles and how they can accommodate all of your outdoor kitchen needs</p>
        </div>
        <div class="hidden-button flex items-center justify-center max-md:mt-5"><a href="#" class="more-button work-sans-medium">learn more</a></div>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search