All solutions

Hello there!

I don't really have any specific questions, but if you see some unnecessary code or a better way of doing this, let me know!

Thanks!

Hello there!

I don't really have any specific question, however if you see some unnecessary code, or a more "efficient" way of doing this, please let me know!!

Thanks!

Hello there!

I think I got this one pretty ok, however if you see anything that would make the code better, I'm all ears (or eyes?)!

Thanks!

Hello there!

This time I tried to make it good for both mobile and desktop, and I think I did a decent job, however if you see any unnecessary code or something that you think would have made things better, I'm glad to hear!

I do have 2 specific questions though, which I think there should be a better way that I'm not aware of:

1- For the text that's just below <h1>, the "Our artificial intelligence..." I had to separate it into two <p>'s, because I wanted it to be centered but within 2 rows or lines, and when I used "text-align" to center it, it just was one long row/line, so my question is: Is there any better way to do what I wanted?

2- For the <h1> I had to use a media query to change the font size on smaller screens. Is there any property that makes the font-size responsive? I thought about vh and vw, but on smaller screens it's too small.

Thanks!!

Hello there!

This time I think I did pretty good, even though I had no idea at the beginning on how to do the "185 GB left" detail, which I don't even know if I did ok. Is that the correct way?

Either way, all help is appreciated, and if you think I have some unnecessary code, let me know!

Thanks!

Hello there!

I managed to do the challenge pretty fine I think, however I do have some questions!

1- When I was trying to copy the design and was watching the images that come on the folder to guide you, I couldn't quite get the exact size that I should go for. For example, on the image of the folder, the 375px layout looked way smaller than on my browser's dev tools, so it was harder to actually match the sizes of the boxes. Besides, I didn't know what height to use on the dev tools to guide me.

2- I had some trouble trying to resize the img of the users (the circle ones, that are on the bottom squares). I used the "vw" measurement to let it be flexible, but it doesn't seem the appropriate way to do it, since when I make the screen smaller on the dev tools, it just looks really weird, even though than on the 1400px and 375px are just fine, but I would like the design to look ok on all the screen sizes.

3- Another responsive design question that I have is that the letters on the square containers of the bottom, when resizing the screen to a less px-width one, the letters just don't fit the box and get out of it from the bottom (that's why I made the query on 1200px, because at that point it started to look kind of bad). Seems like the solution is to give the letters or all the content inside the box a way to automatically fit on the box and resize accordingly, how could I do that?

4- Did I do the background ok?

That's all, thanks!

Hello there!

This one I think I did pretty decent, however I have 4 specific questions!

Btw, I know that the style sheet said that mobile is 350px, but I've used the media query for 900px and below because I thought that it started to look very weird from that point (in fact, one of the questions is kinda about that).

1- I've been told that I should always have an <h1>, even if it's "not there", so I did it in a way that another folk told me. However I have a question, since all the properties I've used for the .sr-only class (the <h1>) seem hard to remember xD. Could I just put an <h1> and just hide it with "display: none"? Seems easier that way, but not sure if it'd work.

2- So this is the question about the px's. Between 1050px and 950px approx. the exact word "recommended!" on the <h3> of the Kira White section gets out of the box horizontally, why is that happening and how could I fix it? Seems like the word itself just doesn't have space at all, so my guess would be to make the font size responsive maybe? However that would mean that it may be to small for reading (and I don't know how to do that lol). I've even tried the "minmax" for the template of the columns on the grid, but it still didn't work (I guess it's because like I said, the word itself doesn't have space), so what should I've done there?

3- This question is about the coding itself. On the CSS sheet, in the "Section Specifics" part, there's some code written that I didn't ended up using (.section-1, .section-2, .section-5 > h3, etc.) because it just didn't work, why is that? I think it's because of the selectors, seems like it doesn't work and I can't do that. If that's the case, how could I've done to make all the code more simplified, like what I've tried to do?

4- This is not a question but more like a "Did I do it right?" thing: I did the whole responsive stuff in a kind of an inverted way. I started on the main CSS code with a grid for the mobile and small screens, and then on the query I specified the columns and stuff for the desktop screen. Is that ok or should I always go "from desktop to mobile" kind of thinking?

That's all! Thanks!

Hello there! I think I got this one pretty good, however any help trying to clean unnecessary code is helpful!

Thanks!

My challenge #7, this time around I think I understood how to treat a mobile and desktop design, at least on this simple level.

Any help is always appreciated!

Hello!

Trying to update the challenge. My question now is: Why, my ".image1" div, when going below 650px (which is the media query limit), just disappears? In my mind should still be 50% 50%, since I gave the property to both divs on the ".main-box" of "flex:50%".

The only thing that changes between 650px and bigger is the flex direction, which is column, but shouldn't it still be showing both divs on 50% each?

BTW I gave the picture div a pink border to see how it was being rendered when adjusting the screen

Thanks!!

Another challenge! This time, the only thing I wasn't sure about, is how to do the "Cancel order", not sure if it was supposed to be a button or a <a>, like I did. Of course that any suggestions are useful!

Hey! My 4th challenge so far. Any suggestions are appreciated! No particular question this time, even though I struggled a bit to make the hover property properly work.

Hello there! This is my 3rd challenge. I think I got it fine, but any help to improve is appreciated! I do have a question though, when I tried to apply the "box-radius" property to ".summary-box", for some reason it wouldn't let me, but it did let me use it on ".main-box", why is that? Also the boldness of the font isn't exactly the same, but I think it's because I didn't download the correct font or something. Also it's my first time doing "@media" stuff, did I write it correctly? Thanks!

Hello! This is the second challenge I've done so far. This time around I think I got it pretty good. Maybe there's some stuff on the code that can be made in simpler ways, and that's probably the advice that I would like to know so I can learn for the next one. Thanks! *This is the update, I've fixed some stuff!

Ok, second solution now. I have a just two specific questions now. 1- What does exactly the "min-height" do? I know that it's purpose is to put it on the middle of the page, but isn't that the job of the "align-items" property? Also what exactly is "hv" on "100hv". What kind of measurement is that? 2- The solution I gave still has the words in a different size than the challenge, even tho I've used the exactly same font size and weight, why is that?