@ciandm
@leogarcialp
Submitted
Hello, it's me again :D
This was a hard challenge for me, and I noticed that I have a couple of issues. But the main problem for me was the 185 GB left kind of pop-up over the right top corner in desktop. I'm not able to positiong on the same place in every resolution. As you can see it moves depending on the resolution.
@ciandm
Posted
Hi Leo,
To position that element properly on desktop, you can switch your absolute positioning from left to right. This will work in the same way your left works, however it will be positioned from the right of the storage__info container so it will remain in place even when you resize the screen. So your code will look like the below:
@media (min-width: 1200px) {
.storage-left {
left: initial; // reset the left value
right: 3rem; // this is the value of the padding on the right of the container
}
}
Hope that helps you.
@aaron-diaz
Submitted
How do you guys find out the dimensions (width and height) of these projects without the design files? I'm really curious. Because I feel like I waste a lot of time on that. On another note, can you tell me what should I do so my component can be properly positioned where it is suposed to be? Thank you very much.
@ciandm
Posted
Hi Aaron,
To help you find the dimensions, you could create a free Figma account or Adobe XD and drag the images in to them that you download, on an artboard that is correctly sized for the images. For example, I believe the images in the challenges for desktop are usually 1440px, which is a standard artboard for designing desktop screens. You can create a 1440px artboard and drag the image that you download onto it and then use the built in rulers to determine sizes. Alternatively, measure distances using the rectangle tool by drawing the distance between components, or the padding on the components, etc.
To position your component properly, it's usually a mix of padding and margin as well as using flexbox (which you seem to be using here). I would tend to not use fixed heights where possible as these can harm responsiveness. On that note, you should look at media queries to style your solution for mobile. As well, you seem to be using general selectors for your CSS styles. I would encourage you to use class names for styling, and maybe even look at the BEM notation for naming your classes. While the general selectors might be okay for this challenge, you will need more control of your styles on larger pages and designs.
@azerroth11
Submitted
How do I make it so that I don't need to use !important in my computer version when creating mobile first ?
I did mobile first. So my stylesheet links look like this:
<link rel="stylesheet" media="screen and (min-width: 768px)" href="./css/style.css"> <link rel="stylesheet" href="./css/mobile.css">@ciandm
Posted
Hi Mallory,
I see you've used two stylesheets (mobile.css & style.css) , when in fact you only need to use one here. You should move all of your styles from mobile.css into your style.css and place it towards the top. As the name suggests, the C in CSS means cascading, which means styles towards the bottom of the file will overwrite those at the top if they have the same class name or CSS selector. Therefore, if you place your mobile styles towards the top, these will be read first. Then, to style it for desktop you should place all of your desktop files in a media query underneath your mobile styles. Something like this:
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap');
* {
margin: 0;
padding: 0;
}
:root {
--sedans-color: hsl(31, 77%, 52%);
--suvs-color: hsl(184, 100%, 22%);
--luxury-color: hsl(179, 100%, 13%);
--paragraphs-color: hsla(0, 0%, 100%, 0.75);
--lightgray-color: hsl(0, 0%, 95%);
}
...
.cards {
display: flex;
flex-direction: column;
padding: 4rem 1.5rem;
}
// rest of your mobile styles
...
@media screen and (min-width: 768px) {
// desktop styles go in here, and these will overwrite your styles above due to the
cascading nature of CSS
.cards {
flex-direction: row;
margin: 0 10rem;
}
}
You will now no longer need to use !important to overwrite the styles and your import in your HTML can simply become:
<link rel="stylesheet" href="./css/style.css">
Hope that helps you.
@voxx1
Submitted
Any feedback? :)
@ciandm
Posted
Hi Bubi,
Great job.
I would encourage you to install the Prettier extension for your code editor, and configure it to format your document whenever you save. If you use VS Code, here is a good blog to introduce you to Prettier. This will help you keep indentation consistent and will improve readability in your files. Some of your code is not indented consistently, and it can be difficult to read.
I would also recommend implementing the BEM notation for your CSS classes. This is simply a naming convention for your CSS classes, but it helps to improve the readability of your classes a lot, and when you want to learn SCSS it will help out massively when you want to use the & feature for nesting. To give you an idea of what this would look like, using your code as an example, you can see below:
Your code --
footer {
background-color: black;
color: white;
text-align: center;
font-family:"Alata";
padding-top: 50px;
}
footer ul li {
font-weight: 200;
margin:20px;
list-style: none;
}
li:hover {
border-bottom: 3px solid white;
padding-bottom: 5px;
cursor: pointer;
}
footer p {
opacity: 0.4;
padding-bottom: 50px;
}
Your code with BEM notation --
.footer {
background-color: black;
color: white;
text-align: center;
font-family:"Alata";
padding-top: 50px;
}
.footer__list {
// styles for the <ul> element can go here
}
.footer__listItem {
font-weight: 200;
margin:20px;
list-style: none;
}
.footer__listItem:hover {
border-bottom: 3px solid white;
padding-bottom: 5px;
cursor: pointer;
}
.footer__paragraph {
opacity: 0.4;
padding-bottom: 50px;
}
Hope that helps.
@DiegoVelazquez60
Submitted
Hi! This is my fourth challenge and honestly I would aprecciate if someone helps me with a little issues:
I don´t know how to make the little red error message to apear if there is an invalid email ( it is specified at the active-states.jpg image , inside the desing folder)
How could I turn the social medias icons to the light blue color if they are originally black (only in the active state of the a.social-media)?
I will be completely grateful if someone helps me... please :,,,(
@ciandm
Posted
Hi Diego,
console.log out their message for the sake of the challenge.If you don't want to implement JavaScript, consider implementing a pattern on the input element, seen here
As well, I notice on your <form> element in your index.html file, you have method=get on it. GET is used to request information from a resource, for example in a URL you might see user=Diego which means you can pull in information from there, and typically you would not use it for a form like this. Instead, the method would be POST. See here
img tag. In your GitHub repo, if you click into images/facebook.svg it will display the rendered SVG. However, if you click the icon (which is two chevron symbols) that says Display the source blob it should show you the SVG in HTML format. You can then replace this with your img tags for the icons. You should also be able to see the source for the SVG in your code editor too. Then, you can set the fill CSS rule on the SVGs. So in your case it might be something like this:.social-media > svg {
fill: white
}
.social-media:hover > svg {
fill: blue
}
Hope that helps?