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>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>