@DarekRepos
Posted
I think you did great job! Sometimes, the solution isn't straightforward. Think of it as a journey - there's always something to learn. I've struggled with similar issues myself.
Don't get discouraged! Solving problems can be complex. If you want improve styling tables, check out this link for ideas on handling tables with borders: table-with-borders-only-on-the-inside
I played with your css solution in the firefox browser using style editor.
With this image just comment margin and padding on your wrapper .card
(this is container for all elements, you have different padding's on the child element so you have to solve this).
.card {
/*! margin: 0 auto; */
background-color: var(--white);
/*padding: 0 1.875rem; */
}
Then you see that the image behave similar to the design on mobile devices.
Moreover since all your content (without image) are in section elements ( or main
tag element) you can simply add padding to this element. You can remove this padding in media query to disable padding on larger and desktop devices.
section {
padding-inline: 2rem; /* Default padding for all screens */
}
@media (min-width: 530px) {
section {
padding-inline: 0; /* Remove default padding on larger screens */
}
}
This is just an example you can use you main
element instead of section
. You can try it by yourself and play more with this solution.
I hope you find this helpful.
Marked as helpful
@lindajensen
Posted
Thank you so much for all the feedback and the kind words. I really needed to hear that @DarekRepos