want to have easy coding.
What challenges did you encounter, and how did you overcome them?responsive.
What specific areas of your project would you like help with?responsive is not working.
@Bobu007 Congratulations on completing this challenge 👏. Your solution is great and responsive as well.
Few suggestions on your code:-
There is no need to use flex in body element. If you want to use it, apply to a div/section instead. Within this div/section, you can write your .cards and .attribution classes. The flex in the body tag is causing your .attribution div to be displayed in a row instead of a column .
In the .cards, add:
max-width:fit-content;
margin:auto;
Use max-width along with min-width to make your code more efficient.
text-align:center; in .attribution class . There is no need of position:absolute;, as absolute positioning is used for layering elements on top of each other, which prevents proper text alignment. Instead, use relative, which keeps elements positioned one after another.Hope this helps! Happy Coding
@tiagocoutinho-ts
Congratulations on completing this challenge. Your solution is great and well written 👍.
We are provided with a style guide when we download assets related to a challenge. All the information about colors and fonts are mentioned in the style-guide document, so please refer to it. We don't need external sites to provide anything.
Hope this helps. Happy Coding!
Hi @bakellian , you have done a great job in attempting this challenge 👏.
In this challenge, we are provided with two images - product-mobile and product-desktop.
product-mobile img is used for both mobile and desktop version in your code.
<img src="./images/image-product-mobile.jpg">
For landscape images just change img src , no need for zoom out.
Hope this helps, Keep up the good work!!
Hi @leevaan your solution is commendable 👍, especially the comma after every three digits. Keep it up.
Hi @semer53, Congratulations on completing this challenge. Your solution is great👍
Just a reminder the image src is not correctly mentioned try changing to this or copy GitHub image path
<img src="images/image-qr-code.png" alt="">
also alt attribute shouldn't be empty at times like this when image is not loaded the text in alt attribute will be shown.
Hope this helps, Happy Coding
applying the hover effect
Hi @mfq17s,
I came across your solution its perfect . Just a reminder you forgot to add active state in Jules wyvern text.
Keep up the good work!
Hi @Belgacem-Dahmen, Congratulations on completing this challenge. Your solution is perfect😊.
You forgot to add hover effect also icon-view.svg is not used when hovered. Try adding it as it will make your solution even more better since it is one of the requirements.
Hope it helps, keep up the good work
Hi @Chuy-dev, Congratulations on completing this challenge!
Your solution is great 👍. You completed this solution in a very short number of lines of code which is commendable. This one case when an operator like (+)or (.) is clicked multiple times consecutively it appears in display . If you can come with a solution for this then it will be good. Try rechecking style guide by mistake you assigned different color property to element like key button should have this color property :
.container-key .key-button {
background: var(--key-background-secundary);
box-shadow: 0 5px var(--key-shadow-secundary);
I had no idea multiple js file could be used to achieve this result, something I got to learn from your solution.
Hope it helps, Happy Coding
I got to use a little bit of flexbox and understanding how to align elements.
What challenges did you encounter, and how did you overcome them?Flexbox, I have some troubles with it. I overcame them using google researches.
What specific areas of your project would you like help with?I didn't use SASS or LESS, I would like to try it next time. But for help, no I didn't really need something particular.
Hi @ANTHEIAM, Congratulations on completing this challenge!
Your solution is perfect just change the image tag src to this
<img src="images/image-qr-code.png" alt="image-qr-code"> this will make image appear.
Remove first slash before images from src as it is stopping from reading the source url
<img src="/images/image-qr-code.png" alt="image-qr-code">
Hope it helps, Happy Coding
Hi @MonetCode88,
Congratulations on successfully completing this project! 👍 Your solution is commendable.
Here are some suggestions to further enhance your code:
When it comes to sizing images, it's recommended to utilize object-fit: cover . Consider adjusting the width from 18em to 16em or 90%. This will fit within the white container. Here's an example:
.inner img {
width: 16em;
object-fit: cover;
}
Please note that the .attribution class, mentioning 'name' and 'frontend mentor challenge,' isn't a part of the challenge itself. It should be placed outside the .outer div class and positioned at the end of your code.
I observed that you applied margin: none in .inner img and .inner, rather than specifying it separately for each class. You can simplify this by applying it globally to all elements. Example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
To center the card effectively, consider utilizing flex or grid within the body. Here's a sample approach:
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
}
While the project inherently possesses responsiveness, you might notice that the .container class width fluctuates across various dimensions.
Modify the .outer width from width: 100vw to width: 200vh. This will ensure consistent sizing across all dimensions. The unit 'vw' is usually avoided since 100vw equates to 100% of the viewport width, leading to automatic adjustments based on dimensions.
.outer {
width: 200vh;
}
I hope you find these recommendations valuable. Keep up the fantastic work!
Hi @Thatgirl9,
Congratulations on completing this challenge! Your solution is perfect. This card component project of yours is responsive itself, so you need not worry about it.
There is only one thing in your media query that I would recommend you to change. In your media query, the mobile background image is not appearing. So, in the body segment, instead of using background-image: none; try using the following code:
body {
background-image: url(./order-summary-component-main/images/pattern-background-mobile.svg);
width: 100%;
}
Also, please remove the background-image element from the HTML as it is not needed:
<background-image src="./order-summary-component-main/images/pattern-background-mobile.svg" class="mobile--bg--img" alt="mobile-background-img"></background-image>
Additionally, it seems that you forgot to add the Frontend Mentor icon in your code. You can include it using the following link tag:
<link rel="icon" type="image/icon" href="images\favicon-32x32.png">
I hope this helps! Great job on the project, and keep up the excellent work!
Hi @Ranty09,
Congratulations on completing this challenge!
I came across your solution and it is perfect, just that though you have added car icons in the code but it is not appearing in the site. I found that you haven't added car icons in the Github images folder.
And alt attribute shouldn't be blank, it comes handy in situations like this if the image can not be displayed.
<img src="images/icon-luxury.svg" alt="luxury">
Also, you forgot to add background-color in the body segment.
body{
background-color: hsl(0, 0%, 95%);
}
Hope it helps
Hi @cheljee-mangulabnan,
It is not necessary to set min-width if the contents are purely to provide a desirable user experience on mobile devices. But you might have to add a media query to larger devices if the contents are to be viewed by devices like laptops or tablets .
Also, you forgot to add background-color in the body segment.
body{
background-color : var(--clr-neutral-400);
}
Hope it helps.
Hi @heykarannn, Congratulations on completing your first challenge! This is perfect. Just writing this so that you don't have trouble after this like i had, this was my first project as well. To get the desired background color , text color, font-size or font-weight refer to style-guide. example:
:root{
--Dark_grayish_blue: hsl(228, 12%, 48%);
--cream:hsl(30, 38%, 92%);
}
h1 {
font-family: "Fraunces", serif;
font-weight: 700;
color: var(--Very_dark_blue);
}
Also remove margin: auto; , margin-top: 170px; from .container use flex in body to center items.
Example:
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: var(--cream);
}
Apply box-sizing: border-box; to all elements.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
First project is always special! Congratulations again! Happy Coding.
Hi, Congratulations on completing this challenge! I came across your solution and it is perfect, just that you forgot to add background-color in body segment.
:root{
--Very-light-gray : hsl(0, 0%, 95%);
}
body{
background-color : var(--Very-light-gray);
}
Hope this helps.