The divs with the specified class are not applying the desired styles to my document. However, the input and labels are functioning correctly. What could I be overlooking?

Web Development :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> The Coding Academy Survey</title>
    <link rel="stylesheet" href="styles.css">
  </head>  
  <body>
    <h1 id="header-title"> The Coding Academy Survey</h1>
    <p id="survey-description"> Share your feedback to help us improve!</p> 
  <form id="feedback-form">
    <div class="details">
      <label for="full-name" id="name-label"> Full Name <input id="full-name" type="text" required placeholder="Enter Your Name">
      </label>
      <label for="email-address" id="email-label"> Email Address <input id="email-address" type="email" required placeholder="Enter Your Email">
      </label>
      <label for="phone-number" id="number-label"> Phone Number <input id="phone-number" type="tel" required min="11" max="20" placeholder="Enter Your Number">
      </label>
      <label for="current-role" id="current-role-label">What is your current role?<br>
        <select id="status-dropdown" name="dropdown">
          <option value="current-role">(Select Current Role)</option>
          <option value="student">Student</option>
          <option value="working-professional">Working Professional</option>
          <option value="freelancer">Freelancer</option>
          <option value="other">Other</option>
        </select>
      </label>
    </div>  
    <div class="recommendation">  
      <label>Would you Recommend Our Platform to a friend?</label> 
      <label for="yes-recommend"><input id="yes-recommend" name="recommend-option" value="yes" type="radio"> Yes</label>
      <label for="maybe-recommend"><input id="maybe-recommend" type="radio" value="maybe" name="recommend-option"> Maybe</label>
      <label><input id="not-sure-recommend" type="radio" value="not-sure" name="recommend-option"> Not Sure</label>
    </div>
    <div class="features-section">
      <label for="best-feature" id="feature-label">What feature do you like the most about our platform? (choose an option/s)</label>
        <select id="feature-dropdown" name="dropdown">
          <option value="best-feature">(Select Best Feature)
          </option>
          <option value="coding-challenges">Coding Challenges</options>
          <option value="project-tasks">Project Tasks</options>
          <option value="online-community">Online Community</options>
          <option value="learning-resources">Learning Resources</option>
        </select>
    </div>     
    <div class="suggestions">
      <label>How can we make our platform better? (check all that apply)</label>
      <label for="front-end-improvement"><input type="checkbox" value="front-end" name="front-end-improvements" id="front-end-improvement">Improved Front-end Projects</label>
      <label for="back-end-improvement"><input type="checkbox" value="back-end" name="back-end-improvements" id="back-end-improvement">Enhanced Back-end Projects</label>
      <label><input type="checkbox" value="technical-support" name="technical-support" id="tech-support">Better Technical Support</label>
    </div>  
    <div class="feedback-comments">
      <label for="comments-feedback">Any Feedback or Recommendations?</label>
      <textarea id="feedback-comments" name="comments-feedback" placeholder="Share your thoughts here"></textarea>
    </div>
    <div>  
    <button type="submit" id="submit-feedback"> Submit Feedback </button>
    </div>
  </form> 
  </body>
</html>

I experimented with using .features as a styling attribute for my div, but saw no visible changes. However, applying label, input{ display:block;} did the trick! I'm open to any advice and assistance on this learning journey. It's been a rewarding experience diving into web development!

htmlcss

Answer №1

Your class '.features' appears to be functioning correctly. The issue with the closing option tags was identified by @Nasser in the comments - an extra 's' at the end. Running the code below should display the border specified within the features class.

You may want to verify that the stylesheet named 'styles.css' matches the name of the CSS file accurately.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title> FreeCodeCamp Survey</title>
    <style>
      label, input{ display:block;}
      .features{
        border: 2px solid #fcba03;
      }
    </style>
  </head>  
  <body>
    <h1 id="title"> FreeCodeCamp Survey</h1>
    <p id="description"> Thanks for taking the time to help us improve!</p> 
  <form id="survey-form">
    <div class="details">
      <label for="name" id="name-label"> Name <input id="name" type="text" required placeholder="Enter Your Name">
      </label>
      <label for="email" id="email-label"> Email <input id="email" type="email" required placeholder="Enter Your Email">
      </label>
      <label for="number" id="number-label"> Number <input id="number" type="number" required min="11" max="20" placeholder="Enter Your Number">
      </label>
      <label for="current-role" id="current-role-label">Which option best describes your current role?<br>
        <select id="dropdown" name="dropdown">
          <option value="current-role">(Select Current Role)</option>
          <option value="student">Student</option>
          <option value="full-time-job">Full Time Job</option>
          <option value="full-time-learner">Full Time Learner</option>
          <option value="prefer-not-to-say">Prefer Not to Say</option>
          <option value="other">Other</option>
        </select>
      </label>
    </div>  
    <div class="recommend">  
      <label>Would you Recommend FCC.com to a friend?</label> 
      <label for="definitely"><input id="definitely" name="definitely" value="definitely" type="radio"> Definitely</label>
      <label for="maybe"><input id="maybe" type="radio" value="maybe" name="definitely"> Maybe</label>
      <label><input id="not-sure" type="radio" value="not-sure" name="definitely"> Not Sure</label>
    </div>
    <div class="features">
      <label for="favorite-feature" id="favorite-feature-label">What is your favorite feature of freeCodeCamp? (select an option/s)</label>
        <select id="dropdown" name="dropdown">
          <option value="favorite-feature">(Select Favorite Feature)
          </option>
          <option value="challenges">Challenges</option>
          <option value="projects">Projects</option>
          <option value="community">Community</option>
          <option value="open-source">Open Source</option>
        </select>
    </div>     
    <div class="improvements">
      <label>What would you like to see improved? (check all that apply)</label>
      <label for="front-end"><input type="checkbox" value="front-end" name="front-end" id="front-end">Front-end Projects</label>
      <label for="back-end"><input type="checkbox" value="back-end" name="back-end" id="back-end">Back-end Projects</label>
      <label><input type="checkbox" value="challenges" name="challenges" id="challenges">Challenges</label>
    </div>  
    <div class="comment">
      <label for="comments">Any Comments or Suggestions?</label>
      <textarea id="comments" name="comments" placeholder="Enter your comments here"></textarea>
    </div>
    <div>  
    <button type="submit" id="submit"> Submit</button>
    </div>
  </form> 
  </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for eliminating any default white space visible between tags:

What is the best way to eliminate white space gaps between div tags and adjust pixel differences between them in HTML code? My current alignment is off and there are noticeable white spaces between div tags. I have tried using a reset link but it didn&apo ...

jqueryhtmlcss

Transitioning the image from one point to another

I am currently working on a unique single-page website and I have been experimenting with creating dynamic background animations that change as the user scrolls. Imagine my website is divided into four different sections, each with its own distinct backgro ...

javascriptjquerycss

Limit not reached by substring function

When the character limit exceeds 20 characters, the substring function extracts the first 20 characters typed in the input. It replaces any additional characters that are entered after reaching the max limit of 20. In my program, however, I am able to con ...

javascripthtmlcharactercounting

Error encountered in angular.forEach syntax

Can someone help me figure out why my array sum calculation using angular.foreach is resulting in a "syntax error" message? I believe my syntax is correct, as indicated by var sum += value.fare;. Any insights on why this error occurs would be appreciated. ...

htmlangularjs

Is the canvas refusing to disappear?

My HTML5 Canvas element is not disappearing as expected. I wrote a timer function to hide the element when the timer hits 0. I tested this using an alert flag and it worked perfectly. Problem: if (TotalSeconds <= 0) { ctx.clearRect(0, 0, canvas.w ...

javascriptjqueryhtmlcanvas

I'm having trouble adjusting the width of my input using percentages with bootstrap, can anyone help me figure out why

Can anyone help me solve a challenge I'm facing with styling my input field without it becoming too large? Currently, when I apply the w-25 class to the input (which sets its width to 25%), the width adjusts based on its original size rather than that ...

htmlcssreactjstwitter-bootstrapbootstrap-4

Enhance your image viewing experience with a React component that smoothly zooms in on images without distorting their dimensions, all with

After searching extensively for a solution, I have been unable to find one that works. My current setup involves using React with Bootstrap. I am in need of a stateless functional component that can take an image path as input and return an img element. Th ...

javascriptcssreactjsbootstrap-4css-transforms

What is the best location to insert the code for toggling the text on a button?

I'm looking to update the button text upon clicking. When the button is clicked, the icon changes accordingly. I want the text to change from "Add to list" to "Added to list". I attempted to implement this functionality with some code, but I'm un ...

javascripthtmlbuttontoggle

Exploring the Contrast between Using @import for Styles and js Import for Webpack Configuration

While delving into the source code of ant-design, I couldn't help but notice that each component has both an index.ts and a index.less file in the style folder. This got me thinking - why is JavaScript being used to manage dependencies here? What woul ...

javascriptcsswebpackimportless

Static list elements are utilized in the CSS drop-down menu

It may appear that my coding skills are lacking or incorrect. When I attempt to create a drop-down menu in CSS, the new list elements end up on the other side of the page instead of within the container box. How can this be fixed? Below is the code snippe ...

htmlcss

The size of the elements inside a div should be proportional to its parent div

I am struggling with sizing elements within a div. I have set the max-width to 40% and max-height to 25%, and inside is an image that I want to be 80% of its parent div. Here is the code snippet for reference: <div className="inputbox-container&qu ...

htmlcsssass

How to Align HTML Menu in the Middle of the Page

I've been struggling to center my menu on the page. I tried setting the display to block and using margin auto for left and right, but it's not working as expected. You can see the issue in this JSFiddle. Any help would be appreciated. <ul id ...

htmlcss

An error occurred when executing Selenium through Python due to an invalid selector issue

While attempting to save a document, I encountered an issue. Using Firefox and the Firefox IDE, the following target worked perfectly: css=div.ui-dialog-buttonset button:contains('Yes, ') However, when trying to implement it in Python with the ...

pythoncssseleniumxpath

I seem to be having trouble properly sizing the width of my forms in Mui React

Having trouble with the sizing of my tabs in a project I'm working on. The first tab displays ingredients, while the second tab allows for adding new ingredients with various forms. However, when selecting different forms, the width of the form contai ...

cssreactjsmaterial-uistyles

Incorporating a teaser of a webpage into an <a> tag linking directly to the page

I am looking to enhance the <a> tag on my HTML page by including a URL link that directs users to another page, while also displaying a preview of that page. Similar to how Facebook automatically generates a preview when you post a link, I want to ...

htmlurltagspreview

Why does one of the two similar javascript functions work while the other one fails to execute?

As a new Javascript learner, I am struggling to make some basic code work. I managed to successfully test a snippet that changes text color from blue to red to ensure that Javascript is functioning on the page. However, my second code attempt aims to togg ...

javascripthtmlcss

Embed JavaScript code in the head section of the webpage to guarantee its presence even following a page refresh

We recently obtained an innovative Enterprise Talent Management Solution that is cloud-based. One standout feature allows users to incorporate HTML Widgets with scripts on the primary Welcome Page. The customization options for the Welcome Page UI are qui ...

javascriptjqueryhtmlcsscode-injection

Steps for creating interconnected datepickers in jQuery with month and year selection:To create a dependent datepicker with month and year selection using

The JSFiddle I currently have is not functioning as expected. When the user directly selects the end-date, it does not restrict the start-date in this particular fiddle. It should change once the user directly changes the end-date. The functionality works ...

javascriptjqueryhtmljquery-uidatepicker

Aligning a picture at the center of the screen with CSS - Various screen and image sizes

For my project, I need to design a web page with a single image perfectly centered both vertically and horizontally on the screen. Here are the specific requirements: The client's screen size is unknown (mobile) The image will be user-defined with u ...

javascriptcssenyo

How to move content without affecting the background of the `<body>` using scrolling

Can I achieve a glass morphism effect on my page without moving the background of the body? I only want to move the .container. Is this feasible? I attempted using background-attachment: fixed, but it did not work for me. Here is the code snippet I have be ...

htmlcss