Having trouble setting the width of a div. The styling keeps getting overridden by something else

I'm facing an issue where the style I need is not showing up in the source code. Specifically, I am attempting to make the .widgettext element narrower, but so far I have had no success. Unfortunately, I cannot share the entire theme on a platform like Fiddle due to restrictions on posting URLs. It seems clear that there is some other style overriding my desired one, but I can't identify what it is.

You can view the live link here.

Thank you in advance!

<div id="infocontainer">

<div class="infowidgets">
  <div class="widgettext">
 #widget
    </div></div>

<div class="infowidgets">
  <div class="widgettext">
  </div></div>

</div>

and the css

#infocontainer {
width:100%;
min-height:200px;
background-color:#222222!important;
z-index:999999;
}

.infowidgets {
width:50%;
margin-top:30px!important;
display:inline-block;
float:left;
margin:0;
text-align:center;
color:white;
}


.widgettext {
width:30%;
margin:0 auto;
}  

Answer №1

It seems like there is a typo in either your HTML or CSS, most likely in the HTML section.

The class is named as wigettext in your HTML code but it should be widgettext according to your CSS file.

Due to this discrepancy, the styles you specified are not being reflected on the web page.

Answer №2

To implement the CSS style directly within the HTML element, you can use the following code:

<div class="widgettext" style="width: 30%; margin: 0 auto;"></div>

This ensures that the styling is applied last, preventing any earlier CSS styles from being overwritten by the widget.

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

I believe I may be experiencing an issue with the use of 'style.display' in JavaScript

I'm encountering a small issue. I need a button to reveal more content. Therefore, I require a way to hide this content initially and display it upon clicking, with the ability to reverse this action by hiding it again. Despite my efforts, the conten ...

How can I incorporate a fade opacity effect into my Div scrolling feature?

I successfully implemented code to make div elements stick at the top with a 64px offset when scrolling. Now, I am trying to also make the opacity of these divs fade to 0 as they scroll. I am struggling to figure out how to achieve this effect. Below is ...

Can you inherit from a class in a different file using SASS?

All the information needed is in this question. For example, if I decide to utilize Twitter Bootstrap, would it be possible for me to create classes in my own SASS stylesheet that inherit from Bootstrap's CSS classes? Or is SASS inheritance restricte ...

Effective Strategies for Preserving Form Input Values during Validation Failure in Spring MVC

I am currently working on validating user input, and I want the user's input fields to be retained in case of any validation errors. This is how I have set up my input fields: <form:input path="firstName" class="text short" id="firstName" value=" ...

The CSS content spills beyond the edge of the screen

I am facing an issue with aligning my content in the center as it is currently shifting to the right side and going off the screen. Below is the code snippet I am working with: <?php /* Template Name: About Us */ $aboutheading = get_field('abou ...

Exploring Bootstrap datatables to search through nested table data with Codeigniter

I have implemented a table using bootstrap datatables and successfully enabled search functionality within the table. However, I have also included nested tables within each row of the main table. These nested tables are supposed to be displayed when clic ...

The inner div appears to have content but is actually measured as 0x0 in size

Despite having content, my main div doesn't have a height or width. I am trying to make the main div fill 100% of the space between the header and footer so that the background image for main is displayed across the entire page excluding the header an ...

Manipulate elements by adding and removing classes sequentially based on an array

Previously, some had difficulty understanding my question. I have an array of variables representing the ids of 5 divs. My goal is to change the color of each div sequentially for a brief moment before reverting back, mimicking the behavior of traffic ligh ...

CSS code to create a single content bar flanked by two sidebars

I have been working on a beginner-friendly webpage and have managed to style it using CSS to some extent. My goal is to have the content centered with a white background, flanked by two sidebars styled in blue. To work on this page, please visit: The ...

What is the process for adding a line of JavaScript directly into the code (instead of using an external .js file)?

I am trying to insert a script tag that will run one line of JavaScript directly into the head of a document instead of inserting an empty script tag with a src attribute. So far, I have the following code: <script type="text/javascript"> var script ...

HTML and CSS3 - styling a curved path

Can someone assist me in creating a curved line with fading edges using css3/html5, similar to the design shown in this image https://i.sstatic.net/8GFk6.png I came across this example on CodePen, but the edges are not fading as I would like them to. .bo ...

Styling a layout with two columns, centered with an offset

I have created a layout with two columns - one on the left and one on the right, with the left column containing two rows. However, I am looking to offset the center point of the column to the right so that the left column occupies about 60% of the space ...

Calculating the Vertical Size of a Component within Django Template Design

Within a div element with a fixed width, I have a p element with the following CSS properties: height:100px; overflow:hidden; I am looking to implement a functionality where a MORE button is displayed if the text within the paragraph overflows and is hid ...

Instructions for extracting the href value from an anchor tag using JavaScript within a specified string

How can I retrieve the href value of the last anchor tag in the provided content string using pure JavaScript, excluding jQuery? var contents = '<div id="content"><a href="http://www.okhype.com/wp-content/uploads/2016/12/ruffcoin-made-in-aba ...

Ensure that the "select" dropdown menu remains a constant size

One section of my Android app, powered by JQuery Mobile, displays a table with a combobox. The issue arises when selecting the option with a very long text, causing the combobox to expand and show half of the table off-screen. My goal is to set the combob ...

What technique works best for changing the visibility of an image without causing other elements to shift position?

On my webpage, I have a table cell with an image that should only display when hovering over the cell. The problem is that when the image is shown, it shifts the other text to the left because its default state is "display:none". I'm searching for a s ...

Is it possible to adjust the height of a panel in Jquery Mobile 1.4.5?

Currently working on a jqm project that is specifically for mobile devices. In this project, I have implemented two panels - one set to push and the other overlay. While one panel is positioned in the left corner of the screen, the other is located in the ...

Responsiveness of the element along the vertical axis

I have an element that, when clicked, should display additional content. However, when the headline contains a lot of text, the element does not expand vertically as it should. Thank you for your help! Check out how it looks currently This is my HTML co ...

Radio button fails to be marked as selected

Currently, I am conducting a test on , and one of the tasks involves styling Radio Buttons using JavaScript (jQuery). Despite my repeated attempts to reconstruct the code, I always encounter the same issue: although JS successfully sets the input radio but ...

Migration of Bootstrap Template to ASP.NET 4.5 Forms and Addressing Rendering Problems with Full Width Display

is a Bootstrap Template that I purchased and incorporated into my project. After migrating it to an ASP.NET 4.5 Web Forms setup, I encountered issues with the LayerSlider and Footer not rendering correctly in full width as they did on the original template ...