All comments

• 

  João Textor•80

  @joaotextorSubmitted about 2 years ago

  The only problem I had is with the image of the Launcher, in the Technology page. If I simply make a media query in CSS to alter the picture, the images of the other technologies wont load when clicking the numbered buttons (I'm loading the information/images using the .json file).

  So, inside window.onload, I had to verify the media query and if it was in desktop size, alter the image of the launcher (the other ones are not necessary since it will load correctly when clicking the numbered buttons).

  Any better solution for that would be greatly appreciated.

  Despite that, I enjoyed a lot doing this project. Kevin Powell helped a lot in the layout tweaking, making the solutions easier than I have imagined them to be.

  

  Space Tourism website - responsive and accessibility ready

  1

  40
  

  João Textor•80

  @joaotextorPosted about 2 years ago

  Update: figured out a solution on the technology page problem. Simply added a <picture> element inside HTML with a picture for desktop screens. No need for CSS nor JS. Thank you Kevin Powell for today's YouTube short for this advice ;-)

  Kevil Powell video that solved my problem: https://www.youtube.com/shorts/d9i68C628Nk

  0
• 

  Kritika•20

  @11Kritika11Submitted about 2 years ago

  Changing the color of icons and Their hovering state is not working .Don't know why , I tried multiple time to solve this issue but wasn't successful and the content desktop size also bothered me a lot as you can see my commits of CSS folder on my GitHub repository. I would love to know How can I fix this problems in my Upcoming challenges! .Nevertheless I enjoyed completing and submitting my first ever challenge.

  

  Landing page non-functionary

  2

  20
  

  João Textor•80

  @joaotextorPosted about 2 years ago

  Congratulations on your first challenge :-)

  You can try using a padding on a <article> tag to create a border on your text content, or a margin-right to fix the position.

  To change color of social icons on hover, use SVG files on <img src> and then, on :hover, use the 'filter' property to change colors.

  Here's a good tool to convert hex colors to filter: https://codepen.io/sosuke/pen/Pjoqqp

  Marked as helpful

  0

  This comment has received 2 repliesShow
• 

  marsha•210

  @NestamashSubmitted about 2 years ago

  This is how close I came with this project. This is my first grid project and I would appreciate any insights or how I can improve on my code.

  

  news-homepage-main

  1

  30
  

  João Textor•80

  @joaotextorPosted about 2 years ago

  Hello, Marsha. I hope you had a good time making this solution. I know I did making mine. So, I noticed something that could be a very good tip for your project, and it will help the elements in getting straight in line with each others.

  When creating elements that should stay side by side and be responsive, it's a good idea to put them inside a div (just like you did in <aside> tag).

  To better exemplify, here's a screenshot: https://imgur.com/a/2Sjw5Zt

  You see that, in this screenshot, I created a <div> to put the other elements. It's easier to organize all the elements inside a div using flex/grid display. So, in the first div group you can use flex-direction row (which is default).

  The second group of divs (blue) will stay side by side because of div 1 (green) being flex.

  On the third group of divs (pink) you will accommodate the remaining objects. The first pink div (which has the image) can have a flex-basis of 100% so it always remain on top of the other 2 (using the row direction), as long as you have your flex-wrap set to "wrap".

  In my project, I used flex display on all of those divs, but I suppose you can play with grid display to have the same effect.

  You can also use divs organize your other elements below (the number 1, 2 and 3 headlines and images.)

  I hope I could make myself useful. Good job and keep going :-)

  0