Responsive Newsletter Signup Form With Success Message

Community feedback

• 

  P

  James Rodriguez Flores•340

  @james-rodPosted over 1 year ago

  Congrats, on completing the project! I got a tips that can help: When you are adding an unorderlist with list-items you can use the list-style-image: url(''); which will replace the bullet points to the icon image!

  ul{
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style-image: url("assets/images/icon-list.svg");
  padding: 20px;
  width: 300px;
  }
  

  Next for your image container if you want the whole Image to be full then here my solution:

  index.html

  <div class="img-container">
  <img class="desktop-img" src="assets/images/illustration-sign-up-desktop.svg" alt="img-desktop">
  </div>
  

  style.css

  .img-container{
  padding: 20px;
  }
  

  Hopes this helps!

  0

  ---

  

  Sahil Ahmed•360

  @ZeddxxPosted over 1 year ago

  @james-rod I tried this method but the alignment of the list-style-image: url('img.svg'); with the text wasn't getting center.

  0

  

  P

  James Rodriguez Flores•340

  @james-rodPosted over 1 year ago

  @Zeddxx You can center it vertically this way: Hope this helps!

  <ul>
  <li><span>List item 1</span></li>
  <li><span>List item 2</span></li>
  <li><span>List item 3</span></li>
  </ul>
  

  ul {
  list-style: none;
  padding: 0;
  }
  
  ul li {
  display: flex;
  align-items: center;
  list-style-image: url('img.svg');
  padding-left: 20px; /* Adjust the padding as needed */
  }
  
  ul li span {
  display: inline-block;
  vertical-align: middle;
  }
  

  0

  

  Sahil Ahmed•360

  @ZeddxxPosted over 1 year ago

  @james-rod sure! will try from next time 😊

  0