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

Enhance Your File Uploads with Custom Images in Bootstrap

For the file upload buttons, I have used the given image by customizing the button look using Bootstrap 3. Here is an example of how I achieved this: <label class="btn btn-primary" for="my-file-selector"> <input id="my-file-selector" type="fi ...

htmlcsstwitter-bootstrap

Having trouble with SCSS styles not being applied after refactoring to SCSS modules?

Currently, I am in the process of restructuring an application to ensure that component styles are separated from global styles using CSS modules. However, I have come across an issue where the styles are not being applied correctly. The original code sni ...

javascriptcssreactjssassnext.js

Trouble with Displaying Table Outside of Div in Internet Explorer

As a UI developer, I encountered an issue where the table inside two divs is not displaying correctly in IE8. It works seamlessly in Firefox, but IE is causing me headache. If anyone has any suggestions or advice on how to fix this, please help me out. Yo ...

htmlcssinternet-explorerhtml-table

Angular Components unexpectedly lose background transparency when using Transparent-Background-PNG in the foreground

Hey there! I'm currently working on a landing page and I have this amazing idea to use a stunning picture of clouds with a transparent background layered over a beautiful landscape. The only problem is that when I try to implement it, the transparency ...

cssangularangularjspngtransparent

Tips for incorporating a tooltip into a disabled selectpicker option

A selectpicker I have is filled with various languages, listed as `li` tags within a `ul` tag. You can see an example in the image provided below. https://i.stack.imgur.com/dsg66.png It's noticeable that the `+ Add Language` option in the selectpick ...

jqueryhtmlcsstwitter-bootstrapbootstrap-selectpicker

Angular JS causing text alignment issues in table cells when viewed on mobile devices

I have created a web application that requires both desktop and mobile views, utilizing Angular JS. Everything is functioning as expected except for the text alignment within tables. I attempted using <td align="left">, but it did not produce any cha ...

javascripthtmlcssangularjs

Transformation effect when hovering over an SVG polygon as it transitions between two states

const createTransitionEffect = (navLI, startCoord, endCoord) => { const changeRate = 0.1; let currentY = startCoord; const animateChange = () => { if (currentY !== endCoord) { currentY += (endCoord - startCoord) * cha ...

javascripthtmlcsssvgtransition

Unable to insert HTML code into a div upon clicking an image button

I am in the process of developing a website dedicated to radio streams, and I was advised to utilize Jquery and AJAX for loading HTML files into a div upon button click. This way, users wouldn't have to load an entirely new page for each radio stream. ...

javascriptjqueryhtmlcssajax

Can an input element be used to showcase a chosen image on the screen?

I would like to display the selected image from an input element. Can this be done with a local file, accessing the image on the client side, or do I need to upload it to a server? Here is my React code attempt: I can retrieve the correct file name from t ...

javascripthtmlreactjs

Arranging five divs within one main div horizontally with equal margins between them

I am currently working on a website system where I need to place 5 divs within 1 main div horizontally. However, I want the spacing between the 5 divs to be equal and fixed within the main div. Below is how my current page looks: https://i.stack.imgur.com ...

htmlcss

Selectize Fails to Populate Options Using Ajax

ExpressJS is the platform I am using to develop a management dashboard for a community project. Right now, my main concern is integrating a modal that allows users to add new games to a database. Although I am able to fetch data remotely, I am facing diffi ...

javascriptjqueryhtmlexpressselectize.js

Tips for incorporating an anchor tag within an img tag in HTML?

Is it possible to add an anchor tag inside an img tag in HTML? <img src="img.jpg" alt="no img" /> I want to include the following inside the img tag: <a onclick="retake();" > Retake </a> The goal is to allow users to retake a photo by ...

javascriptjqueryhtml

Using a twig loop to display just a single table cell

The following twig loop is used to generate data: {% for reservationDate, rooms in data.pricingTable %} <tr> <td> {% for room in rooms %} <tr> <td ...

htmltwig

Using jQuery to select the next table cell vertically

Is there a way to utilize jQuery to access the cell (td) directly below a given cell in a traditional grid-layout HTML table (where each cell spans only one row and column)? I understand that the code below will assign nextCell to the cell immediately to ...

javascriptjqueryhtml

Expanding divs automatically depending on the content they contain

Currently, I have been developing a template for a database-driven page that is supposed to contain four divs for content arranged like this: ----- ----- | 1 | | 2 | ----- ----- ----- ----- | 3 | | 4 | ----- ----- The information in each box will always ...

jquerycsshtml

Text that fades in and out based on scrolling past a specific point

There's a text containing <p> and <h1>. The text finishes with one <h1>. I'm looking to speed up the Y translation of the <p> twice when I reach the bottom of the document (where the last h1 is located in the middle of th ...

javascriptjquerycss

Crafting a captivating stacked image using just two segments

Recently, I designed my own personal website. To make it visually appealing, I decided to use a background picture as the header and placed my portrait as the avatar. My inspiration for the design was drawn from the sleek interface of Linkedin profiles. Ho ...

htmlcss

Troubleshooting code: JavaScript not functioning properly with CSS

I am attempting to create a vertical header using JavaScript, CSS, and HTML. However, I am facing an issue with the header height not dynamically adjusting. I believe there might be an error in how I am calling JSS. Code : <style> table, tr, td, t ...

javascripthtmlcss

How can I stop jQuery mobile from updating the document title?

It appears that jQuery mobile automatically uses the text content of data-role="header" to set the document.title. For example: <div data-position="fixed" data-role="header"> <h1>This text</h1> </div> To work around this, I ha ...

javascriptjqueryhtmljquery-mobile

Bizarre display of miscellaneous items on the monitor

Hey there, I've been working on creating a div to display information about both the Civilian and Vehicle that users input. Initially, everything worked perfectly with my HTML and CSS until I introduced two additional divs into the layout. With just o ...

htmlcss