All comments

• 

  Cpuening84169482• 40

  @Cpuening84169482

  Submitted 11 months ago

  I learned a lot about flex and I got to use CSS Grids again. I found it difficult to get some text in the correct format.

  

  Order Summary Component

  1

  40

  

  Harshit Bhardwaj• 90

  @harshitBhardwaj97

  Posted 11 months ago

  Hi I saw your code and I believe you forgot to add the link or import for the Red Hat Display font.

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;700&family=Red+Hat+Display:wght@400;700&display=swap" rel="stylesheet">
  

  Adding these lines inside head tag of your html should do the work, since in CSS file you already have specified the font-family (font-family: 'Red Hat Display')

  I hope you find this suggestion helpful and it solves your problem, Happy Coding !

  0
• 

  Shruti Shinde• 310

  @ShrutiShinde418

  Submitted almost 2 years ago

  any suggestions are welcome... I initially put my JS in an external file but it wasn't integrating and working while deploying. There must have been an error in putting down the path. If anyone knows the solution to this, please let me know

  

  Advice Generator app using Tailwind CSS

  1

  30

  

  Harshit Bhardwaj• 90

  @harshitBhardwaj97

  Posted 11 months ago

  Initially I also faced this problem when I used external .js file in my various projects and used script tag to link it, but based on my experience, I can say that the most common problem with this approach is that when we use script tag and give the path to our file, the .js file code is executed before our DOM is even loaded, leading to this problem. So you can try these 2 approaches and I believe you won't face this problem :-

  • Use defer keyword after script and before src, if you define your script path inside the head tag, like this :

  (script *defer* src="index.js")(/script) 
  

  • Use the script tag at the end of body, which would ensure that all DOM content is loaded before execution of javascript code. In this case, defer keyword is not required.

  Here I used () instead of angular brackets with script tag because due to it my comment was not being parsed properly.I hope you find this suggestion helpful and it solves the problem that you were facing. Happy Coding !

  0
• 

  Enrikewoq• 20

  @Enrikewoq

  Submitted 11 months ago

  I found difficult to center the design vertically. Im not sure if i centered the design as it should or as i could be centered, i created a container with a specific heigth and then i centered using flex box. I would like to know if it was necessary to add a general left, right, bottom and top margin. I insted centered everithing and applied an specific size to the desing.

  

  Flex-box

  3

  50

  

  Harshit Bhardwaj• 90

  @harshitBhardwaj97

  Posted 11 months ago

  I saw your code and found that you wrapped the entire code inside the class design-container and in gave it height of 650px :-

  .design-container {
      display : flex;
      align-items : center;
      height : 650px;
  }
  

  You can refrain from restricting the height of parent container, and for centering the content vertically, you can use this approach :-

  .design-container {
      display : grid;
      place-content : center;
      min-height : 100vh;
  }
  

  Or you can also do :-

  .design-container {
      display : flex;
      align-items : center;
      justify-content : center;
      min-height : 100vh;
  }
  

  I hope you find this suggestion helpful and it solves your problem, Happy Coding !

  Marked as helpful

  1

  This comment has received 1 replyShow