Aligning the right side of an image with the left side of a grid col

I'd like to align the right hand side of the image with grid-col-1

14 Replies

macOP•2y ago

macOP•2y ago

thats what it looks like atm, I'd like it to be the opposite of the previous image

import React from "react";
import Image, { StaticImageData } from "next/image";

type FeatureProps = {
  icon: React.ReactElement;
  name: string;
  description: string;
  flipped: boolean;
  image: StaticImageData;
};

const FeatureSection: React.FC<FeatureProps> = ({
  icon,
  name,
  description,
  flipped,
  image,
}) => {
  return (
    <div className="relative pb-32">
      <div className="relative">
        <div className="bg-cream rounded-3xl border-2 border-black shadow-md shadow-black lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
          <div
            className={`mx-auto max-w-xl lg:mx-0 lg:max-w-none lg:py-16 ${
              flipped ? "lg:col-start-2" : ""
            }`}
          >
            <div className="mx-12 lg:mx-4 mt-12 lg:mt-4">
              <div>
                <span className="flex h-12 w-12 items-center justify-center rounded-xl bg-tertiary text-gray-900 border-2 border-gray-900 ">
                  {icon}
                </span>
              </div>
              <div className="mt-6">
                <h2 className="text-3xl font-bold tracking-tight text-gray-900">
                  {name}
                </h2>
                <p className="mt-4 text-lg text-gray-500">{description}</p>
                <div className="mt-6 flex justify-center lg:justify-start">
                  <a
                    href="#"
                    className="px-6 py-3 inline-flex rounded-xl whitespace-nowrap shadow-md shadow-gray-900 bg-secondary border-2 border-gray-900 text-white font-medium lg:text-xl hover:bg-gray-900 hover:shadow-gray-900 hover:scale-90"
                  >
                    Check it out
                  </a>
                </div>
              </div>
            </div>
            <div className="border-2 border-gray-200 pt-6" />
          </div>
          <div
            className={`mt-12 sm:mt-16 lg:mt-0 ${
              flipped ? "lg:col-end-1" : ""
            }`}
          >
            <div className="lg:relative lg:m-0 lg:h-full scale-110 ">
              <Image
                className={`col-span-1 rounded-3xl border-2 border-black shadow-sm shadow-black lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none`}
                src={image}
                alt="Inbox user interface"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default FeatureSection;

import React from "react";
import Image, { StaticImageData } from "next/image";

type FeatureProps = {
  icon: React.ReactElement;
  name: string;
  description: string;
  flipped: boolean;
  image: StaticImageData;
};

const FeatureSection: React.FC<FeatureProps> = ({
  icon,
  name,
  description,
  flipped,
  image,
}) => {
  return (
    <div className="relative pb-32">
      <div className="relative">
        <div className="bg-cream rounded-3xl border-2 border-black shadow-md shadow-black lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
          <div
            className={`mx-auto max-w-xl lg:mx-0 lg:max-w-none lg:py-16 ${
              flipped ? "lg:col-start-2" : ""
            }`}
          >
            <div className="mx-12 lg:mx-4 mt-12 lg:mt-4">
              <div>
                <span className="flex h-12 w-12 items-center justify-center rounded-xl bg-tertiary text-gray-900 border-2 border-gray-900 ">
                  {icon}
                </span>
              </div>
              <div className="mt-6">
                <h2 className="text-3xl font-bold tracking-tight text-gray-900">
                  {name}
                </h2>
                <p className="mt-4 text-lg text-gray-500">{description}</p>
                <div className="mt-6 flex justify-center lg:justify-start">
                  <a
                    href="#"
                    className="px-6 py-3 inline-flex rounded-xl whitespace-nowrap shadow-md shadow-gray-900 bg-secondary border-2 border-gray-900 text-white font-medium lg:text-xl hover:bg-gray-900 hover:shadow-gray-900 hover:scale-90"
                  >
                    Check it out
                  </a>
                </div>
              </div>
            </div>
            <div className="border-2 border-gray-200 pt-6" />
          </div>
          <div
            className={`mt-12 sm:mt-16 lg:mt-0 ${
              flipped ? "lg:col-end-1" : ""
            }`}
          >
            <div className="lg:relative lg:m-0 lg:h-full scale-110 ">
              <Image
                className={`col-span-1 rounded-3xl border-2 border-black shadow-sm shadow-black lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none`}
                src={image}
                alt="Inbox user interface"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default FeatureSection;

thats the code

SuplenC•2y ago

Wouldn't it be easier for you to use flex for this? I see you flip the order too, with flex you can just reverse the order and change the round corners and you are done. Use the flex flex-col, first place the smaller box with some top and bottom margins (to make it smaller), then the box with the image and you should be done. You can set grow-1 to the first box to take the remaining space, but with w-X you will have more control.

macOP•2y ago

omg so I shouldn't start the image in the other column but instead flip the ordeR? wouldnt that result in the same issue ? I don't want to start the image, I want to end the image in a col if that makes sense

Lopen•2y ago

I think you can use z-index for this

macOP•2y ago

uh how ? I dont want to change the layer of anything I only want to move the image so the end of it is aligned with the col col

Lopen•2y ago

Container then put both inside and stack them on top each other with z index

macOP•2y ago

as oppose d the start check previous message

Lopen•2y ago

Oh you already have a code you just to to change the position?

macOP•2y ago

yea

Lopen•2y ago

Ok Okay i think you problem is from the div holding the image In front-end to debug i think colours will help you alot

Lopen•2y ago

as you can see here the div container holding the image has less room to move it is supposed to be relative to the blue container

macOP•2y ago

set flipped to true that image is fine flipped = false is fine its when flipped = true is when there is an issue i fucking did it ty lopen

Lopen•2y ago

Congrats

Gaming

Programming

Aligning the right side of an image with the left side of a grid col