Flex-box, Grid

Community feedback

• 

  Snehamoy Bag•600

  @snehamoybagPosted over 2 years ago

  Hi @Peteonthebeat

  Looks like your site is not loaded as the index.html is inside of a folder/directory. I'd recommended you to put the files outside of the Qr~Code-Component folder and then update the solution 👍

  And also answering to your query, justify-content: center and align-items: center should center a div both horizontally and vertically when the parent container has a set height. If the parent container doesn't have a height, align-items property won't work when flex-direction is set to row. Similarly, justify-content won't work when the parent container doesn't have a height and its flex-direction is set to column. 😄👍

  Marked as helpful

  1

  ---

  

  POTB•330

  @PeteonthebeatPosted over 2 years ago

  Hello @snehamoybag !

  Thank you for the extensive feedback! I'll definitely consider your advice on centering divs. I also already submitted the files as they are outside of the folder. So I hope now everything works properly. I should have done that initially, but I'm new to this. I appreciate your understanding!

  Kind Regards!

  1

  

  Snehamoy Bag•600

  @snehamoybagPosted over 2 years ago

  Hi @Peteonthebeat,

  The file structure should be something like this :

  • images folder containing all the images
  • stylesheets folder containing all the css files
  • scripts folder containing all the script files index.html or any other html file should be outside of any folder.

  And make sure css and script files are linked properly in the html file otherwise it wont load.

  Also you can check out the full guide of submitting solution

  • here

  0

  

  POTB•330

  @PeteonthebeatPosted over 2 years ago

  Hey @snehamoybag, Let me clarify, if I understand correctly.

  I need a total of 3 folders:

  1 Called 'images' to contain all the images; 1 Called 'stylesheets' to have all my CSS files; for instance: styles.scss, styles.CSS.map, and styles.css 1 Called 'scripts' including all my HTML files, like index.html.

  I link my HTML and CSS files by using a link tag like this:

  <link rel="stylesheet" href="styles/styles.css" />

  in the head of my HTML file.

  Thanks for the feedback and guidance!

  Regards!

  0

  

  Snehamoy Bag•600

  @snehamoybagPosted over 2 years ago

  @Peteonthebeat generally these are the main 3 folders you gonna need.. I'd recommend you to google more about this topic, such as

  • how to setup file structure for web site development
  • and how to link the stylesheets/scripts etc file to .html files 😄👍

  Marked as helpful

  0

  

  POTB•330

  @PeteonthebeatPosted over 2 years ago

  Hey @snehamoybag, I am sorry to bother you again. I'm trying to update my solution, and everything works (let's just say) almost perfectly when I test the project with VS Code Live Server (cmd + L + O).

  I also uploaded the files (no folders) by manually dragging and dropping them into the brand-new repository I created.

  However, my project looks like plain HTML when I test things through the provided Github link. There are no images, and there's absolutely no CSS. That is not how things are in my actual project.

  I wonder whether you would share some insights on how to fix this, so I can upload the solution and move to the next challenge.

  Sincere, Pete

  0
• 

  POTB•330

  @PeteonthebeatPosted over 2 years ago

  @Snehamoy Bag, Thanks!

  I'll definitely consider your advice and maybe resubmit this solution with the folders properly organized...

  Sincere, Pete

  0