All comments

• 

  Oguntade Abass•140

  @HayBeeCoder

  Submitted about 5 years ago

  

  Responsive html/css site made with grid layout

  1

  00
  

  David Sumner•195

  @Sumner-David

  Posted about 5 years ago

  Hey,

  For the email address button, try making it a simple button without any type='submit', then on the JS side of this, add an eventListener on click to check if your input field is valid (Probably with some RegEx magic) then if true use JS to submit the form that way. This way it does the check first. You'll need to add a name to your form though for JS to hook onto that.

  As for the Reload, that's because the form action is set to action="". This is the same as action="/" which means homepage. So form on submit is redirecting you to hompage which is index.html

  Hope that helped :D

  0
• 

  Akash CP•30

  @shakaccp

  Submitted about 5 years ago

  

  html,css,bootstrap

  2

  10
  

  David Sumner•195

  @Sumner-David

  Posted about 5 years ago

  Hey Akash, well done for getting that far. You got most of the stying in but i think your issue was more of setting up the base layout of the project. Even i have problems with that bit. Probably the hardest part for me is layout and planning for responsiveness

  From my opinion, this project is best done using CSS grids on the card section since there are no defined rows or they intersect with each other.

  Looks like you used Bootstrap for the card layout. Bootstrap is good for base layouts but for more complex ones consider things like flexbox and CSS grids, or even doing some magic with margin values. Careful with using bootstrap for everything too. Some people fall into a crutch of using it over learning more css.

  I did this one yesterday. Try having a look at my code. It's a bit messy, but i managed to get what was needed with CSS grids.

  Once you learn grids and flexbox, layouts get wayyy easier :)

  https://www.frontendmentor.io/solutions/used-css-grids-for-desktop-and-tablet-then-flexbox-for-mobile-k2Vyj5wYf

  1