@MOSCOW2022
Submitted
Hello guys my only issue is the media queries if someone can help!
thank you inadvance and happy coding!
@Jacwilalasey
@MOSCOW2022
Submitted
Hello guys my only issue is the media queries if someone can help!
thank you inadvance and happy coding!
@Jacwilalasey
Posted
Hi Moscow!
I had the same issue regarding getting the corners rounded across the three different divs/containers, another member helped me with the below information!
You need to set the border-radius to the specific corners for each relevant div/container, per below.
border-top-left-radius: ;
border-top-right-radius: ;
border-bottom-right-radius: ;
border-bottom-left-radius: ;
Additionally, you can employ short-hand properties.
border-radius:(first value for top-left radius) (second value for top right radius) (third value for bottom-right radius) (fourth value for bottom-left radius);
e.g : bottom-radius: 2px 10px 10px 20px;
Marked as helpful
@Jacwilalasey
Submitted
Second challenge completed! (sort of)
I have 3 questions;
When resizing the screen down to mobile, the sub containers all spill over their content e.g. the text and buttons spill out the bottom, how do I manage this?
Also when resizing, the sub containers stack from a row, to two on top and one on bottom before going into a full column, how do I avoid this?
How to I get border-radius to work on only the 4 corners? each time I added it in, it would curve all 4 corners of each sub container.
Thanks everyone! Jac
@Jacwilalasey
Posted
Thanks @Souicia, @hyrongennike & @AtulKumar0001
All of your responses are extremely helpful!