When developing my website using Vite and TypeScript, I encountered an issue in the rocket-section. Here is a snippet of the problematic rocket section:
https://i.sstatic.net/ueTcu.png
The problem occurs when resizing the screen, causing vertical misalignment in the text under the "Fusion Engine" section for certain rockets. This inconsistency affects some rockets while leaving others unaffected. To visualize the issue, refer to the illustration provided below.
https://i.sstatic.net/wr645.png
It seems that the problem arises when the width is 541px or less. While a static fix may not be ideal, I am seeking guidance on how to address this issue dynamically and effectively. Can anyone provide assistance?
Below are snippets from my Rockets.tsx and Rockets.css files:
import './Rockets.css';
function Rockets() {
const rocketData = [
// Rocket data omitted for brevity
];
return (
<>
<h1>Our Fleet</h1>
<div className="rockets">
{rocketData.map((rocket, index) => (
// Mapping through rocket data to display information
))}
</div>
</>
);
}
export default Rockets;
CSS styles omitted for brevity
@media only screen and (max-width: 541px){
/* The text jumps right now, so the text is misaligned*/
}