CodePen displaying CSS errorsI'm having trouble getting my CSS

I'm facing an issue with my CSS code and I need your help to figure out what's wrong. I believe it's a simple problem that someone can quickly identify just by looking at the code. Any assistance would be greatly appreciated!

Here is the code snippet:

<head>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
  <style>
    body {
      background-color: blue;
    }
    .container-fluid {
      margin: 5%;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
  </div>
</body>

If you'd like to view the code on Codepen, here is the link: http://codepen.io/benyaaalex/pen/BRBMeW?editors=1000

htmlcss

Answer №1

The div you are attempting to customize is currently empty. Add some text inside and then rerun the code to see how it changes.

Answer №2

Everything is functioning correctly. However, your div will not display any background color, margin, or other styling until it contains content. An empty div does not have any visual properties in the Document Object Model (DOM).

Answer №3

I can't figure out why my CSS isn't working!

It seems like the issue is not with your CSS.

  • The problem might be that there is no content inside the div tag, which means you won't see any changes.

  • You also need to include the necessary html tags for proper structure.

<html>
    <head>
      <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
      <style>
        body {
          background-color: blue;
        }
        .container-fluid {
          margin: 5%;
          background-color: red;
        }
      </style>
    </head>
    <body>
      <div class="container-fluid">
        What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
    </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

Combining various array values into a single key in JSON格式

Issue: I am working on a sign-up form for new users using HTML. The goal is to store multiple arrays (each containing "username: username, password: password, topScore: 0) within one JSON key ("user" key). However, the current functionality only allows f ...

javascripthtmlarraysjsonobject

Display Email content within a bootstrap modal using CSS styling

Is there a way to prevent CSS from overwriting tags on my original page when loading an email body into a modal via ajax call? The email body has its own CSS styles that are affecting the layout of my current page. I've considered renaming all the tag ...

jquerycsstwitter-bootstrap

What are the steps to view my HTML webpage on a smartphone?

Recently, I successfully created an HTML webpage with CSS and JS that looks and functions perfectly on my PC. However, when attempting to access it on my phone, I encountered some issues. Despite transferring all the necessary files to my phone, only the ...

javascriptandroidhtmlcss

The mouseover and mouseleave functions remain active even during window resizing

I wish to create a dynamic menu that appears when hovering over a user, but only if the window size is above 977 pixels. Take a look at my code below: $(document).ready(function() { $(window).on("load resize", function(event){ var windowS ...

jqueryhtmlcssjsfiddle

React-Native-Web generates default classes for inline styles and erroneously applies them in a jumbled sequence

Currently working on a project involving react native web and NextJS. I have encountered an issue with inline styles in React that seems to be caused by RN-Web. It appears that there is a mechanism within the framework that automatically generates classes ...

cssreact-nativenext.jsreact-native-web

The fixed position setting does not anchor the elements to the bottom of a container

When applying the following styles: #fullpage-menu > .gradient { position: fixed; bottom: 0; left: 0; width: 100%; height: 0.3rem; } To the element with ID #fullpage-menu, which is styled as follows: #fullpage-menu { height: 100 ...

javascripthtmlcss

Automatically adjust the image size in CSS to fit the screen when the iPhone is rotated from portrait to landscape

I am trying to create a responsive design where an image will fit the screen without being cropped in both portrait and landscape mode. I have attempted the following code: <!doctype html> <html> <head> <style> img { max-height ...

htmlioscssiphone

What is the reason why the show() function in JQuery only applies to one specific element, rather than all elements selected with the same selector?

JSFiddle. This example code features a nested <table> within another <table>. The main issue concerns the click listener for the #add button. Specifically, the final if/else statement in the function. When you execute this code and click the ...

javascriptjqueryhtmlcss

What is the best way to arrange these elements and a sidebar to achieve this specific layout?

Need help aligning items in CSS to achieve this layout using flexbox. Thank you. | Text A | text B | text C | video | | text d | text E | text F | video | The video is the same in both rows and should extend along the side as a sidebar. ...

htmlcssflexboxgrid

Can someone explain why the min-width property is not being respected by the <input> element?

Visit this link for the code The text field in the provided link should only be 10px wide but it is currently displaying a width of 152px. Here is the code snippet: .input { width: 100%; box-sizing: border-box; } .cont { padding: 2px; } .main ...

htmlcss

The proper approach is using CSS for linking pseudo-classes

Look what I stumbled upon: Important: Remember, a:hover MUST be placed after a:link and a:visited in the CSS code to work properly!! Remember: Place a:active after a:hover for it to have an effect in the CSS code!! Note: Pseudo-class names are not case- ...

htmlcsspseudo-class

HTML5 sortable lists, ajax posting, and inactive elements are not functioning correctly

I'm currently utilizing a fantastic plugin for jQuery known as HTML5 Sortable. It can be found at . I am attempting to disable certain items using this plugin. My approach involves adding the class="disabled" to the <li> tag and including items ...

jqueryajaxhtmljquery-ui-sortable

display the information stored within the sports attribute using React

I am attempting to display the values stored in the sports property. So, I inserted a console log within the sports property. However, an error is being thrown: Syntax error: C:/codebase/src/containers/sports.js: Unexpected token, expec ...

javascripthtmlcssreactjsredux

Activate a side navigation bar in AdminLTE-3

I am using AdminLTE3 as my admin panel in Laravel, but I am facing an issue with the nav-item links not activating when clicked. Even though I have all the required assets for AdminLTE3 and used the starter.html file, the navigation items are not working p ...

phphtmlcssadminlte

Tips on overriding the outline:none property in CSS

Is there a way to overwrite the 'outline: none' property in CSS? I have a parent class that has this property set, but I want to remove it in the child class. ...

htmlcss

Tips for choosing the parent's parent and applying a width of 100%

I am currently facing some challenges while creating a simple navigation bar from scratch. I am struggling with setting specific widths, especially wanting .navbarDropBtn to align its width with .navbarMain. However, it seems to only match the width of the ...

htmlcss

Issues with link behavior when using Angular UI-Router

I am just starting to learn AngularJS and I'm trying to figure out how to pass a parameter using anchor tags within the $stateProvider code. I've been attempting to do so, but it doesn't seem to be working. Can someone guide me on the correc ...

javascripthtmlangularjs

Flask does not provide a direct boolean value for checkboxes

After struggling for a week, I am still lost on where to make changes in my code. I need the checkbox to return a boolean value in my Flask application. Below are snippets of the relevant code: mycode.py import os, sqlite3 from flask import Flask, flash ...

javascriptpythonhtmlcssflask

Optimizing CSS table styles for larger cell width

In my CSS file, I have defined the following style: .ES{ max-width:20px; word-wrap:break-word; } However, when I apply this to my table... <table border="1" cellpadding="2" class="ES" > <tr> <td><input name="rbeso" type="radio" ...

htmlcsshtml-table

What is the optimal method for delivering HTML content in a Node.js application using Express.js?

My current approach involves serving all HTML content directly from my app.js/server.js file, as shown below: app.get('/', function(req, res) { res.render('index.html'); }); app.get('/about', function(req, res) { res. ...

htmlnode.jsexpressstatic-files