@abdulrahman-rwim
Posted
hey @ACdev27 good job solving this challenge, I've some feedback for this solution
- the
.photo-set__imagesare too big and they are causing overflow issue to avoid this problem give them amax-width.photo-set__image { max-width: 45%; } - and for the
.introduction__imagesreduce themargin-leftto maybe 6px to make them align perfectly Example:.introduction__image-1--tablet { margin-left:6px; } - I suggest adding
transition: background 250ms;to the buttons, this will make: hover smoother. - I hope this was helpful for you, other than that, nicely done, happy coding 😄
Marked as helpful
@ACdev27
Posted
@abdulrahman-rwim Hello Abdul, At first I was not sure about your suggestion. The photos looked perfect in Firefox. But then I checked the page in Chrome and Edge, and the photos were very large. A big mess. I wonder what browser you viewed page with?
I used your fix, and it solved the issue. Thank you very much for your helpful advice!
I'm still a little confused why the photos looked good in Firefox. It was careless of me not check the page in other browsers first before submitting. Is it issue with Chrome and Edge?
My photos were inside a container (.photo-set) that had a max-width of 1110 px. So I don't understand how the photos which had 100% max-width could grow bigger than the container? Maybe something to do with flex box being used?
@abdulrahman-rwim
Posted
@ACdev27 I reviewed your solution using crhome I was a little bit confused because the screenshot was matching the design maybe that's something to do with CSS specificity I used !important beside max-width to make it work did you try using the img:max-width:45%; on the top of your CSS stylesheet
Marked as helpful
@ACdev27
Posted
@abdulrahman-rwim Yes, in Chrome as well as Edge it did not look good. The photos were very big. I fixed it as you suggested and now it appear correct in Chrome. I did not use !important, but placed the max-width after the width setting, like this: .photo-set__image { width: 100%; max-width: 45%; }
I think my mistake was that since these photos provided were too large, you have to resize them to be smaller as you suggested with max-width. In my own projects, I would always use photos of correct size, and never had this problem before. Thank you again for taking time to provide feedback.
@abdulrahman-rwim
Posted
@ACdev27 you're welcome 😄
