Today I Learned (TIL): How to fix card or any sizing overflow in CSS
Intro
As a founder of a bootstrapped software development agency myself, sometimes I need to do things on my own when no one to delegate. It is okay tho, as this is a chance for me to stay technical and still have engineering sense.
Today I'm revamping my software development agency website at https://kukul.tech. Although simple, I found out that there's an overflow in one of the "Card" I put on the home page. The screenshots would be something like
Turned out I have a card that looks something like
<Card style={{ width: "26rem" }}>
{content}
</Card>
I'm using the Bootstrap framework here, turned out there are two issues
- I forget to wrap the outer component with
<Container>component so that overflow happening. - As you can see in the code above, the width is a
26remthis can lead to an issue when the display gets smaller.
For issue number (1), the solution is already there, but for the issue number (2) I found out that I can use a simple trick like the following
<Card style={{ width: "90%", maxWidth: "26rem" }}>
{content}
</Card>
By changing the original width of 26rem and set maxWidth of 90% we are anticipating a situation where the box gets smaller. When it becomes small, we'll use 90% instead of the 26rem since 90% of the width would be smaller than 26rem anyway.
Voila! It worked!
Hopefully, you can learn something from my post.
About Me 😄
I'm Abdurrachman and currently, I'm managing a software development agency called Kulkul.tech. We're a web and mobile software development company providing excellent software for business. We're working with companies all over the world from a single-person business to large corporates. We are a solid remote-first firm with a high emphasis on people and clear communication.
We begin each project with understanding the client's business and problem then provide a contextual solution and applicable technology. We make sure that cooperation with us develops the business of our client.
We provide excellent engineers and designers to deliver a complete product from spec gathering, product road mapping, UI/UX design, development, QA, and DevOps.
We're experts in the following technologies:
- JavaScript and Node.js
- Python and Django
- Ruby on Rails,
- Mobile (iOS and Android) especially Flutter
- DB: MySQL, PostgreSQL, MongoDB,
- Frontend: Elm, React, Angular
We working in Codementor too, please reach me in Codementor if you're interested.
