The responsive organization with css was the most difficult part of the project, but is a weasome tool to inclusive site for diferents dispositives
Latest solutions
Latest comments
- @LucasDeveloper0What are you most proud of, and what would you do differently next time?@Freedteck
Hello, well-done with your development journey. It seems you submitted a screenshot of the links instead. Because that's what I can see
- @adonmez04@Freedteck
Hi Alper. Great work here and well-done. I'd love to know more about the book you recommend. Did you have any link for it? Kindly share
- @Rawi2115@Freedteck
Hi, this is really cool. As for the background SVG, the step is pretty straight forward.
- In the css body selector, apply the background-image property with url as it's value i.e
background-image: url(' link to the svg ');
Note that thelink to the svg
is a relative one (./images/pattern-background-desktop.svg
); - U should use the
background-repeat: repeatx;
if you want.
Marked as helpful - In the css body selector, apply the background-image property with url as it's value i.e
- @Alfrey-Chan@Freedteck
Hello, I can't find fault in ur html code, where you probably need changes is in your css code. Below are the suggestions I have:
- Since u used the flexbox property on ur body tag, use the
flex-direction: column;
. This will make ur card at the center of the page. - For the font weight, it's best to apply corresponding weight to individual element such as
h1 {font-weight: 700;}
andp {font-weight: 400;}
- The flexbox has a gap property which you can apply to the
card-contents
to give space btw the components inside. Such asgap: 20px;
Marked as helpful - Since u used the flexbox property on ur body tag, use the
- @ollie-cyber@Freedteck
Hi, well-done with the exercise. It's very clean and clear. Concerning the question, you can use max-width: 100% instead of width property on the img tag. This will make the image responsive and fit in the div as you want.
Again, well-done writing clean codes
Marked as helpful - @MeaganA@Freedteck
Hi, well-done here. Your code is very clear and clean. From what I observed, you work a lot with margin which can create more space. Try any or all following if it'll help:
- Adjust the size of the margin you gave the cards,
- Since u used flexbox, work with the gap properties instead of using margin and apply side padding.
- Another thing u can try is to apply the flex layout to the body itself and try to set its min height to 100vh, justify content center, align items center.
While some of these might not work for you, it's still good to try them out