responsive page using media query

Community feedback

• 

  Kaikunmidev•60

  @KaikunmidevPosted 3 days ago

  Thank you very much, this is detailed and educative, i know for sure i would use this option to deploy my next challenge and would also make adjustments on this particular challenge too. I really appreciate this feedback.

  1

  ---

  

  Akiz-Ivanov•100

  @Akiz-IvanovPosted 3 days ago

  @Kaikunmidev One more thing with your Nutrition section problems, i realized now what you mean by they are not aligned properly. I played around with it a bit and found out two potential solutions to align the text: To give both p and span width of 50% or flex: 1;

  .names p,
  .names span {
  width: 50%;
  
  /* or
  flex: 1; 
  */
  }
  

  Could be more possible solutions and better practices. These worked for me but i tested in different environment, so hopefully works for you too.

  0
• 

  Akiz-Ivanov•100

  @Akiz-IvanovPosted 4 days ago

  Hello Kaikunmidev, fantastic effort on the challenge! Keep up the great work! 🚀

  I'm still fairly new to front-end development myself, but I'll do my best to help with any issues you've encountered! 😊

  Deploying a Vite project on GitHub Pages for the first time was a very frustrating experience for me as well, especially dealing with relative paths. However, I’ve found a few steps that make the process much easier.

  Backup your project first just in case (create another copy of the entire project folder).

  Step 1: Install gh-pages

  Run this command in your project terminal:

  npm install gh-pages --save-dev
  

  Step 2: Add "base" option in vite.config.js file

  export default defineConfig({
    base: "/your-repository-name/",
  });
  

  In your case repository name is "/git-test4/". If your defineConfig already contains other configurations, no worries, simply add "base" inside the existing object.

  What your final vite.config.js should look based on what you have:

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    base: '/git-test4/'
  })
  

  This ensures Vite correctly resolves paths when deploying to GitHub Pages.

  Step 3: Add deploy script to package.json file

  Go to the package.json. All you need to do here is add these two lines at the end of "scripts" object:

  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist"
  

  If you’re having trouble finding the "scripts" object, and I’ll send the final version of the package.json file with the necessary additions in the reply below.

  Step 4: Deploy project to gh-pages Run this command in the terminal:

  npm run deploy
  

  Step 5: Enable GitHub Pages

  • Go to your repository on GitHub.
  • Navigate to Settings > Pages.
  • Under "Branch", select "gh-pages" and save.

  Now you should be able to see your site live after a few minutes on https://kaikunmidev.github.io/git-test4/

  (Optional) Keep main branch up to date. While not required, it’s good practice to push all your changes so that your main (or other working branch) matches what you deployed in order the update the current files displayed on github.

  git add .
  git commit -m "Your commit message here"
  git push origin main
  

  Reminder: The gh-pages and main branches are completely independent, meaning your live site will work fine even if you don’t push changes to main.

  That’s all for the GitHub deployment struggles! 🎉

  Regarding the "Nutrition" section:

  I’m not sure about the best practice, but it would probably be easier to achieve the desired results using semantic table elements:

  Example:

  <table className="table">
    <tbody>
      <tr className="names">
        <td>Calories</td>
        <td>277kcal</td>
      </tr>
      /* add more table rows (<tr>) here */
    </tbody>
  </table>
  

  Just make sure table and rows take up full width of the container, then you can fine tune positioning by giving padding-left to the <td>

  It's good practice for accessibility to avoid divs as much as possible, using semantic elements like section, article, etc.

  0

  ---

  

  Akiz-Ivanov•100

  @Akiz-IvanovPosted 4 days ago

  @Akiz-Ivanov

  What your package.json looks like with two additions:

  {
    "name": "omlette",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
      "dev": "vite",
      "build": "vite build",
      "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
      "preview": "vite preview"
      "predeploy": "npm run build",
      "deploy": "gh-pages -d dist"
    },
    "dependencies": {
      "react": "^18.2.0",
      "react-dom": "^18.2.0"
    },
    "devDependencies": {
      "@types/react": "^18.2.37",
      "@types/react-dom": "^18.2.15",
      "@vitejs/plugin-react": "^4.2.0",
      "eslint": "^8.53.0",
      "eslint-plugin-react": "^7.33.2",
      "eslint-plugin-react-hooks": "^4.6.0",
      "eslint-plugin-react-refresh": "^0.4.4",
      "vite": "^5.0.0"
    }
  }
  

  Optionally you could delete the "predeploy": "npm run build" line and run two commands in terminal instead when deploying:

  npm run build
  npm run deploy
  

  What "predeploy": "npm run build" does is runs npm run build command automatically on npm run deploy. However, you prefer it.

  0