I’m learning Next.js. I’m doing my portfolio. I have basics of HTML, CSS and I know JavaScript by coding on the back-end using Express.js.
In this code:
export const Work = () => {
const listTest: WorkData[] = [
{
id: 1,
company_name: 'Entreprise',
profession: 'Front-end developper',
content: "Developing a mobile application for a startupn - Front of multiple screens/components, integration of premium, integration of pictures galery, improving back-office",
mission_nb: 9,
hour_nb: 319,
picture: '/assets/images/test.png',
link: 'https://www.wikipedia.org/',
technologies: ['flutter', 'javascript', 'postgresql', 'docker'],
period: {
start: new Date('2023-07-19'),
end: null,
},
},
];
return (
<Section className="relative top-[50px]">
<div className="grid grid-cols-1 gap-4">
{listTest.map((work) => (
<WorkCard key={work.id} {...work} />
))}
</div>
</Section>
);
};
const WorkCard: React.FC<WorkData> = ({ company_name, profession, content, mission_nb, hour_nb, picture, link, technologies }) => {
return (
<div className="bg-card border border-card rounded-xl shadow p-0 box-border">
<div className="w-full pt-9 pb-5 pl-4 pr-0">
<p className="text-md font-semibold whitespace-pre-line">
{content}</p>
<p> missions: <span className="text-accent">{mission_nb}</span><br />
hours carried out: <span className="text-accent">{hour_nb}</span></p>
</div>
</div>
);
}
I obtain involuntary right padding. How do I fix it? I don’t think I have any conflicts between styles as the code is still very simple, just using a div and giving CSS attributes by the className attribute so I don’t where this right padding comes from. How do I fix it please?
When i put p-0 in:
<div className="w-full p-0">
<p className="text-md font-semibold whitespace-pre-line">
{content}</p>
It works and the content is side by side of the border. However, when I put p-1 or something like this, it adds too much space at the right side of the content.
If I put pl-2 (meaning I just add padding at left), it will add the padding at left. However, if I add too much space at the right for reasons I’m ignoring and even if I put pr-0, there is still right padding.
Image with p-0:
The behavior you are seeing is due to the fact that the width is calculated first, and then the text is wrapped when it would otherwise overflow.
To work around this, you could set text-align: justify via the text-justify class name. This reworks the spacing of the words such that the last word of the line is up to the very edge of the bounding box (like a newspaper text column).
const Section = ({ ...props }) => <section {...props} />;
const Work = () => {
const listTest = [
{
id: 1,
company_name: 'Entreprise',
profession: 'Front-end developper',
content:
'Developing a mobile application for a startupn - Front of multiple screens/components, integration of premium, integration of pictures galery, improving back-office',
mission_nb: 9,
hour_nb: 319,
picture: '/assets/images/test.png',
link: 'https://www.wikipedia.org/',
technologies: ['flutter', 'javascript', 'postgresql', 'docker'],
period: {
start: new Date('2023-07-19'),
end: null,
},
},
];
return (
<Section className="relative top-[50px]">
<div className="grid grid-cols-1 gap-4">
{listTest.map((work) => (
<WorkCard key={work.id} {...work} />
))}
</div>
</Section>
);
};
const WorkCard = ({
company_name,
profession,
content,
mission_nb,
hour_nb,
picture,
link,
technologies,
}) => {
return (
<div className="bg-card border border-card rounded-xl shadow p-0 box-border">
<div className="w-full pt-9 pb-5 px-2">
<p className="text-md font-semibold whitespace-pre-line text-justify">
{content}
</p>
<p>
{' '}
missions: <span className="text-accent">{mission_nb}</span>
<br />
hours carried out: <span className="text-accent">{hour_nb}</span>
</p>
</div>
</div>
);
};
ReactDOM.createRoot(document.getElementById('app')).render(<Work />);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js" integrity="sha512-QVs8Lo43F9lSuBykadDb0oSXDL/BbZ588urWVCRwSIoewQv/Ewg1f84mK3U790bZ0FfhFa1YSQUmIhG+pIRKeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js" integrity="sha512-6a1107rTlA4gYpgHAqbwLAtxmWipBdJFcq8y5S/aTge3Bp+VAklABm2LO+Kg51vOWR9JMZq1Ovjl5tpluNpTeQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.5"></script>
<div id="app"></div>