@SheGeeks
Posted
First, great work on this challenge. I like the way you kept everything centered even when the screen size is beyond the scope of the challenge. Also, nice comments in your code. This made it very easy for me to see where I can help and inspired me to be more proactive about this in the future.
Suggestions
The background svg for this challenge was easier for me using flexbox, though it did take me a while to figure out how to apply the repetition of the pattern in the same way as the design. Feel free to peruse my code on this challenge for inspiration.
Regarding the box-shadow on the button, one way to quickly make and see changes to your code is to use Dev Tools in your browser. In this view, you can select the box-shadow property for the button and change the values in real-time by holding the up or down arrow keys or typing in a new number. In fact, any time you need to make uncertain changes to values Dev Tools can save you time and frustration.
For the small space at the bottom on desktop, try changing this style on your image container for media query set to min-width: 1400px or remove it if it won't cause any problems:
.img-container img:nth-child(2) {
display: inline;
}
The inline property seems to be causing that gap. This value doesn't recognize size properties like height and width, which you need for an image to fill its parent container. Changing it to display: block will force the image to take up 100% width by default. Let me know if that works for you.
Marked as helpful
@HYDROCODER
Posted
@SheGeeks Thank you for your compliments and feedback! I did look into your code for the svg background but I am missing out on the svg pattern in the back (visually its not giving me the clue but working on that)… Thanks for reminding about the arrow keys hack. I had used it before to change the directional properties of an absolutely positioned element once but completely forgot about it later so I will work on that too. The last suggestion was really helpful. As you said, inline elements will not recognize width and height except margin and padding values. I changed it into block and it was wrapped completely fine with no gaps around it, given that I had justified it to the end using justify-self.
@SheGeeks
Posted
@HYDROCODER Happy to be of help! Just one reminder in follow-up to the image changes: don't forget to remove any unused properties in your styles.
@HYDROCODER
Posted
@SheGeeks Cool I will remove those.
