conditionally remove margin based on image visibility
Unanswered
Beans posted this in #help-forum
BeansOP
I want to remove the right margin ('mr-5') when the image isn't rendered--but my conditional fix doesn't seem to be working. The margin is never removed--no errors, it just always stays:
import portfolioImage from './avatar.jpg';
<div className={`flex items-end ${portfolioImage ? 'mr-5' : ''}`}>
<div className="hidden md:block">
{portfolioImage && <Image src={portfolioImage} alt="Profile Picture" className="w-40 h-40 rounded-md border border-gray-300" />}
</div>
</div>4 Replies
@Beans I want to remove the right margin ('mr-5') when the image isn't rendered--but my conditional fix doesn't seem to be working. The margin is never removed--no errors, it just always stays:
import portfolioImage from './avatar.jpg';
<div className={`flex items-end ${portfolioImage ? 'mr-5' : ''}`}>
<div className="hidden md:block">
{portfolioImage && <Image src={portfolioImage} alt="Profile Picture" className="w-40 h-40 rounded-md border border-gray-300" />}
</div>
</div>
American
<div className={`flex items-end ${portfolioImage ? 'mr-5' : ''}`}>
<div className="hidden md:block">
{portfolioImage && portfolioImage.length > 0 && (
<Image src={portfolioImage} alt="Profile Picture" className="w-40 h-40 rounded-md border border-gray-300" />
)}
</div>
</div>@American <div className={`flex items-end ${portfolioImage ? 'mr-5' : ''}`}>
<div className="hidden md:block">
{portfolioImage && portfolioImage.length > 0 && (
<Image src={portfolioImage} alt="Profile Picture" className="w-40 h-40 rounded-md border border-gray-300" />
)}
</div>
</div>
BeansOP
.length isn't a property that exists on a static image data type
BeansOP
In addition, that’s not really the part I care about—that works fine. But my conditional for the margin does not
@Beans In addition, that’s not really the part I care about—that works fine. But my conditional for the margin does not
American
try to change margin with useState true or false