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

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

`Using a PHP function parameter within an array: An essential guide`

I'm encountering an issue while declaring a function parameter within my array. Here is the simplified version of what I have: function taken_value($value, $table, $row, $desc) { $value = trim($value); $response = array(); if (!$value) ...

Creating a HTML5 canvas animation of an emoticon winking to add a fun touch to your

Currently, I am facing a challenge in animating an emoticon that was initially sketched on canvas. While following a tutorial to implement draw and clear animations using frames, I haven't been able to achieve the desired outcome. With 6 frames of the ...

Align both text and images in the middle using HTML/CSS

I attempted to align an image next to text and center everything, but I'm facing some challenges. The arrow indicates where I would prefer the image to be placed. HTML <!DOCTYPE html> <head> <title>Simple Page</title> ...

Tips for optimizing search functionality in Angular to prevent loading all data at once

An exploration for information within vast datasets is triggered by AngularJS when the input contains more than 3 characters. var app = angular.module('test_table', []); app.controller('main_control',function($scope, $http){ $scope ...

Ribbon design in LESS/CSS does not maintain its structure when resized in Google

My CSS/LESS ribbon is displaying perfectly in Firefox, but encountering issues in Chrome when resizing the window. At 100% zoom, everything looks good, but adjusting the zoom causes elements to become misaligned. To make it easier to troubleshoot, I' ...

What are the solutions for addressing popping behavior during hover effects?

Hello everyone, I am experiencing an issue with the image hover effect on my website. How can I make it enlarge smoothly instead of just fading in and out? To better demonstrate, I have provided a helpful example https://i.stack.imgur.com/TcZKy.jpg Any as ...

Firefox not rendering responsive YouTube embed properly

This method of embedding seems to be functioning well on all browsers except for Firefox; I took advantage of a free trial at crossbrowsertesting.com to verify. I’m not using a direct iFrame embed, and all the solutions I’ve come across are related to ...

Angular Bootstrap Modal not Displaying

<img id="1" data-toggle="modal" data-target="#myModal" data-dismiss="modal" src='assets/barrel.jpg' alt='Text dollar code part one.' /> <div id="myModal" class="modal fade" *ngIf="isModalShowing"> <div class=" modal-lg ...

Customize the colors of the arrows in Bootstrap's carousel

There seems to be a simple solution that I'm missing here. I have images with white backgrounds and I want to customize the arrows on Bootstrap's Carousel to make them more visible. I need help changing the color of the arrows (not the background ...

Exploring the boundaries of HTML data manipulation using JavaScript or jQuery

In my HTML (within a Twig template), there is the following code snippet: <li id="{{folder.id}}" data-jstree='{"icon":"glyphicon glyphicon-tags", "type":"folder"}' ><a href="#">{{folder.name}}</a> I'm attempting to extrac ...

Alignment of close button in modal for IE7 using Bootstrap

While using Bootstrap 2 modal, I encountered an issue with the close button not being placed correctly in IE7. Given the popularity of this CSS library, I am curious if anyone has found a solution to align it properly in IE7. It seems to be related to floa ...

What is the proper way to mention "a" within an unsorted list?

I currently have a div section with the following content: <ul id = "issues"> <li> <h1>title</h1> <p>text text text </p> <a class="next" href="#">next</a> </li> <li> <h1>title</h1> &l ...

CSS - Issue with table cell height exceeding in Mozilla Firefox and Internet Explorer

Examining the code below <div style="border:solid 5px orange;width:400px;height:400px"> <div style="display:table;border:solid 1px red;width:100%;height:100%"> <div style="display:table-row;border:solid 1px blue"> <div sty ...

Unable to save cookies using AngularJs

Currently, I am immersed in a small project utilizing AngularJs. The main objective of this project is to save a user's username and password within browser cookies. Here is my snippet from app.js where you can observe ngCookies being injected as a d ...

Is creating an expanding tab in CSS a difficult task?

I am in the process of developing a college website and I am curious about the difficulty level involved in creating an expanding tab on the side of the webpage. The idea is that when users hover over the tab with their mouse, it would expand to reveal add ...

Live updates for downloads page menu using HTML and Bootstrap

I'm currently working on a menu page that features 3 tabs: Windows, Linux, Mac. When you click on the Windows tab, it will not only download the windows installer but also display installation instructions specific to Windows. Similarly, when you sele ...

Tired of searching for a way to activate the Inspect function in the right-click menu on a custom dialog while debugging Google apps

I'm currently working on implementing a file picker function within Google Sheets by using the Google Picker API. Although I have managed to display a customized dialog window for selecting files from my Google Drive, the output is not exactly what I ...

Obtain the precise X and Y coordinates of a <li> element regardless of where the mouse is clicked using Typescript

I'm stuck and could really use some assistance! Hey there, I have a simple question but I seem to be missing a crucial element. Here's my fiddle where I can detect the clicked item but that's as far as I've gotten: http://jsfiddle.ne ...

Can a sophisticated text editor be utilized without a content management system?

Many website builders utilize rich text editors as plugins to enhance content creation, such as in CMS platforms like Joomla and WordPress. However, can these same editors be easily integrated into a custom website built from scratch using just HTML, PHP ...

I am looking for JavaScript or jQuery code that allows me to incorporate a "Save This Page As" button

Is there a way to enhance the saving process for users visiting an HTML page, rather than requiring them to go through File > Save As? I am interested in implementing a "Save Page As" button on the page that would trigger the save as dialog when clicke ...