I tested on Chrome and did my best there. After I was finished, I looked at it on Firefox and Microsoft Edge, and it's terrible on those two. Why so different? How do I keep that from happening? In Chrome, the vertical layout of the right-hand side doesn't stretch out over the entire section. I have no idea how to fix that. I welcome all constructive criticism. What are good resources to learn how to layout items using CSS?
For this challenge it's better to use the CSS grid to make the component responsive. Follow this link CSS Grid. Also make sure to change the image at break points, for that you should use the <picture> html element. You can find more about it here picture-element
I'm so excited to be taking on my first challenge in this amazing community! It was the perfect opportunity for me to put my HTML and CSS skills to the test, and I've already learned so much from trying to center the elements using flexbox. I love how everyone here is so supportive and always willing to lend a hand, so I'd really appreciate any feedback or tips you can share with me š By the way, I've actually started two other challenges, so I'll be posting those in the next few days too.
Well done for your first project. I've noticed that your page still has the default margin even though you used:
*{ margin: 0;
padding: 0;
box-sizing: border-box;
}
you probably didn't notice it, but you should actually target the body to get rid of its margin:
body {
margin: 0;
}
And good luck for your next projects.
Would using relative and absolute position been a better solution for locating the buttons been a better solution, the current solution relies on the padding and font size to keep the alignment.
Yes, you can definitely use the relative and absolute positioning to keep the buttons at the bottom of their container. Just a remark, in this challenge you have to change the color of the buttons form white to transparent as given in the design folder.
To change the color of the background you can simply select the body element to modify its CSS properties:
body {
margin: 0;
background-color: rgb(242, 235, 227);
}
Now setting the margin to 0 will remove the default margin.
The image of this challenge should change at a certain break point. To do so, you have to use the picture element which I link down below:
Using the picture tag for responsive designs
The card should change shape according to the design. You'll have to work more on the Bootstrap grid or use directly the CSS grid. You can learn more about this last one following the link down below:
You have to use the picture tag element in order to change the image at break points. You can find out how to use it in this link https://web.dev/learn/design/picture-element/. Also instead of just using divs try using the html elements for accessiblity. Find out more on it through this tutorial https://www.freecodecamp.org/learn/responsive-web-design#applied-accessibility. The font of the paragraph and prices should match the ones given in the design.
Thanks for the information. Could you please explain to me when an image should have a description for assistive technology ?
Learned so many by working on this coding challenge
It was hard to handle the image and container to set and align them. By working on it by thinking much and by searching on google and discord It becomes easier. yeah, It waste time but It thought so much.
Good job for you first challenge. I just have some remarks to help you make the solution more like the desired one: You need to deploy your website so that we can see it live, you can use github pages for example. Also be careful on the font, the paragraphs should have their own font, different form the header tags. You don't need to use a dive with class of main in this case, you just have to use the <main> tag instead, it's better for accessibility. At a certain break point, the width of the infoBox starts shrinking, this is due to the width being in percentages, it should remain the same until it actually reaches the desired breakpoint, let's say of 700px so that you change the flex direction without having to change the width before. A last remark is that the button should have a darker color on hover and the property cursor of value pointer.
Try adding some margin-top to the proceed to payment button and also a box-shadow to it, you may notice it if you look closely to the design reference. Also add some border-radius to the light purple div containing the music icon and price.
For the text of component you should use h1 for the title and p for the text (paragraph). You'll also need to import the fonts from google fonts. You'll find the link in the style-guide.md.
trying to center the div of the main container gave me quite the problem also the sizing of the image I am always unsure of what to do. any suggestions would be appreciated alot
The body of your component is bit too wide try making it a bit narrower as in the image from the folder. As for the QR code image you set its width or height according to the width of the component's body. So if for example you've set its width to 300px, then set the width of the QR code image to 270px and then set its margin to 15px to center it. 15px is the result of (300px - 270px)/2 .
