Eles• 1,300
@eleswastaken
Posted
The images in general have to be set to width: 100%; to fit into a container, and max-width: 100% so not to overflow. But you don't usually set some fixed width.
In your solution you set .features-2 img to some min-width which made it fixed width, then you overrode it width object-fit: contain;, that is why it appeared normal and with wrong sizing.
What's the solution? You could make the image width relative to the parent, e.g. on tablets it could be 60% of the parent, on smaller tablets 75%, on mobile 100%.
Side notes:
- Your mobile menu is not hidden; it is just transparent. Opacity is transparency.
- For almost every piece of text there is and element to use. For paragraphs there is
<p>, for headings there is<h1>to<h6>. - Set paddings to the container, so it would be the limiter to the content. When you set paddings to every element, it might be hard to be consistent.
Best of luck!
Marked as helpful
0
