@Hikmahx
Posted
Hi @Petrosdevri 👋. Nice work! I have some suggestions for you:
- For the image, pattern-divider.svg, not to overflow on smaller devices, it is better to add width and max-width property:
.advice-text {
img{
width: 100%;
max-width: 300px;
}
}
By adding the width, it contracts and expands based on the screen size. Adding a max width will make it not expand way beyond the width you initially wanted. You can set the max-width above to whatever you want.
- It is better to add padding to the advice-app class because as the screen gets smaller, the spacing at the side disappears:
.advice-app {
padding: 16px;
}
Hope this was helpful
Marked as helpful
@Petrosdevri
Posted
@Hikmahx Hello! I have tried out your advice and would like to share my thoughts.
In terms of the 1st snippet, I wasn't sure how it impacted my image because I had set a media query width and it seems to work in small devices until I tried changing the device width to a higher value than 700px, which is great.
As for your 2nd snippet, it helped a lot. I didn't know how padding would help the element as I thought it would overflow it, so this insight was quite vital.
Overall, I appreciate your advice, and thus thanks a lot!
