Single price component: HTML5, CSS3, Flexbox

Community feedback

• 

  Mo•840

  @MohamedAridah

  Posted about 3 years ago

  Hello @detomdev, yours solution was really good, but unfortunately it wasn't Responsive. you can improve you solution by the following:

  1. For body using overflow hidden will prevent scrolling. and this bad because user can't see the full content vertically. So you should Remove overflow: hidden property.

  2. For .container:

     • border-radius property for bottom-right and bottom-left corners wasn't working properly and you can use overflow of hidden.
     • For responsiveness set max-width and margin to center it horizontally.
     • box-shadow was too much. try to use light color.!

  .container {
  	max-width: 90%; /* don't take more than 90% of viewport width*/
  	margin: auto; /* center `.container` horizontally in the viewport width */
  	overflow: hidden;
  }
  

  1. HTML suggestion:
     • instead of using <div class='subscription'></div> and <div class='why'></div> separately. you can combine them in one div. This will make responsiveness very easy. OR

  use your *Current HTML structure with the following styles:

  @media(max-width:640px) {
  	.container {
  		flex-direction : column; 
  	}
  }
  

  • For .tutorials inside why div. ul element (unordered list) will be much better than using br.

  	<ul>
  		<li>Tutorials by industry experts  </li>
  		<li>Peer & expert code review </li>
  		<li>Coding exercises</li>
  		<li>Access to our GitHub repos</li>
  		<li>Community forum </li>
  		<li>Flashcard decks </li>
  		<li>ew videos every week</li>
  	</ul>
  

  I hope this wasn't too long for you, hoping also it was useful😍.

  Goodbye and have a nice day. Keep coding🚀

  01

  Marked as helpful