Hi there, the only problem I want to know is why I can't move the icon from the button. I tried position: relative and right: 5px; but when you inspect it, it says the position is static. Please help thank you!
Hi everyone.
I've just finished the project. I got so many experiences here. This really works for us. I tried some modern properties like minmax() for layout but I couldn't use them properly, I'll try them later and I still couldn't solve the shaking problem. I think there are some strange properties in the design file like button's text position or cart positions etc. Should I push myself for that, are these the parts of the hard level challenge? If I push myself for these, my code will become non-readable. I don't want to change my clean version or there is a clear solution somewhere, idk.
I also have a major problem. How can I use the h1 tag on this page? Should I keep the pattern or can I add the h1 tag to some titles? Do I need a hierarchy here?
Thanks.
Any comments, critique, advice is greatly appreciated. For those of you reading this, have a nice day!
(Note: I separated style.css and media-queries.css for easy to read to code. I'll merge them later.)
Hi,
Nice to complete this challenge, here is a sugessetion for your question about heading;
<strong class="article-card__title">Sedans</strong> <p class="article-card__description"> Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip. </p>
Replace <strong> with <h1> and you can adjust font-size in css. For further reading please visit the Heading.
I hope this will help you .
Well done and best of luck for the next challenge.
Hi,
Well done on completing the challenge. There are some minor alterations or suggestions that will help you.
-Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.
<div class="outside-comp"> replace it with <main class="outside-comp">
<div class="attribution"> replace it with <footer class="attribution">
Always use heading levels; <p class="text1">Improve your front-end replace it with <h1 class="text1">Improve your front-end
I hope you find it useful!
Hi,
Well done for completing this challenge. There is a minor change to improve codes. Images must have an alternate text,
<img class="qrcode-card__imagem" src="images/image-qr-code.png" alt="">
You can visit; Image alternative text click Here
Best of luck with next challenge.
Hi,
Well done for this challenge, but there are few things that can be very handy to read a code. First of all you should provide a separate css file not inline style html,
So paste all code into style.css and link it in head of index. html.
Secondly, use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.
You cam visit Here for Semantic element/
Good luck for the next challenge.
almost died trying to align the two <p> texts. The CSS styling doesn't seen to work in the live server( i srlsy dont know why. if u have any info about this, pls tell. Hello from Brazil.
Hi,
Here are few suggestions to improve your problem.
.background { background-color: hsl(0, 0%, 100%); display: flex; align-items: center; justify-content: space-between; flex-direction: column; margin: 85% 34%; border-radius: 25px;
}
-To center an object you can use Flex & Margin . i.e.
.parent{ display: flex; }
.child{ margin: auto; }
or
.parent{ display: flex; justify-content: center; align-items: center' }
For further help you can visit, Click Here
Hi,
Well done for completing this challenge, still there are some suggestions to make a minor change with semantic HTML element.
<div class="container"> <img src="./images/image-qr-code.png" alt="" />
-Please replace <div class="Container"> with <main class="container"> and also provide
alt="" /> with a vlueable name or description of image <img src="./images/image-qr-code.png" alt="image-qr-code" />.
For further reading and useful information about Semantic HTML please visit this link
Click Here
Hope this will help you.
Hi, It seems your solution is incomplete and I think you forgot to give a proper codes and therefore we are observing only the text that was provided in the challenge.
There is no image and the grid layout or flexbox are not defined. Because in body css only 'Display: Grid' was mentioned. For Grid you can take help Here. I hope it will help you to complete a challenge.
