Why doesn't the size of my container match the size of the text inside?

<section id="slide-2" class="homeSlide">
    <div class="bcg"
        data-center="background-position: 50% 0px;"
        data-top-bottom="background-position: 50% -100px;"
        data-bottom-top="background-position: 50% 100px;"
        data-anchor-target="#slide-2"
    >
        <div class="hsContainer">
            <div class="hsContent"
                data-center="opacity: 1"
                data-center-top="opacity: 0"
                data--100-bottom="opacity: 0;"
                data-anchor-target="#slide-2"
            >
            <h2>UniqueTextUniqueTextUniqueTextUniqueText
                UniqueTextUniqueTextUniqueTextUniqueText</h2>
          </div>
          </div>
      </div>
 </section>

What could be causing my container size not to adjust according to the text size? Why is it spanning the entire width? How can I limit the width of the container that holds the h2 text?

http://jsfiddle.net/bMCb8/

csstwitter-bootstrapsass

Answer №1

The div and h2 elements are both block elements by default. This means that they will take up the full width of their container if no width is specified. To achieve a different layout, you can try setting the display: inline; property on the h2 element. However, this may not work if the element has position: fixed; in such cases, you may need to apply the fixed position to a wrapping element instead.

Check out this example on JSFiddle.

For more information on the issue with position fixed and display inline, visit this link.

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

How can the color of glyphicons be adjusted within an AngularJS ng-class that is constantly changing?

I am currently facing an issue with my function called lessThan(a,b) that checks if "a" is less than "b" and returns a boolean value. I have added a glyphicon to a form to display a check mark when true and an X when false, but I can't get the colors ...

javascripthtmlcssangularjs

Why is my md-button in Angular Material displaying as full-width?

Just a quick question, I created a simple page to experiment with Angular Material. On medium-sized devices, there is a button that toggles the side navigation, but for some reason, it expands to full width. There's no CSS or Material directives causi ...

javascriptcssangularjsmaterial-designangular-material

Is it possible to automatically adjust the size of components on a html/cshtml page based on the current window size?

Currently, I am facing an issue with my website where multiple panels are created using a foreach loop that includes textareas/textboxes. Whenever I resize my browser window, it messes up the UI by shifting the position of the textareas and other elements. ...

javascripthtmlcssrazorasp.net-mvc-5

Optimizing CSS Styles for Mobile Devices

I am having trouble adjusting the CSS on my website to make it more mobile-friendly. The site renders correctly in major desktop browsers like Chrome, IE, and Firefox, but there are issues with the rendering when viewed on mobile Safari or Chrome. Interest ...

htmlcss

Having difficulty displaying this code accurately on Google Chrome

I managed to create a hover effect over a series of images that displays additional information when hovered over. Below is the code I used: HTML <ul class="photo-grid"> <li> <a href="https://www.abglobal.com/" target="_blank"& ...

htmlcssgoogle-chromemousehover

What is the best way to hide a dynamically generated class using CSS display property?

Is there a way to hide a dynamically generated class in a table row? I am trying to figure out how to hide this dynamic class that appears on the table row. In other words, I need to hide a row in the table that includes this dynamic class. Even when I add ...

javascriptjquerycss

Retrieve text from an element using jQuery when triggering "mouseenter" on a different element

Is there a way to retrieve the text from an element while simultaneously triggering a 'hover' action on another element? Here is an illustration: I am trying to gather all available colors, but the color names are only visible upon hovering ove ...

javascriptjqueryhtmlcss

Making ASP.NET textbox wider to fit entire row using bootstrap css

This is my first time working with ASP.NET and I must admit, my HTML skills are still pretty basic. Currently, I am using the Bootstrap grid system to create a form that follows this structure: <div class="container"> <div class=" ...

htmlcssasp.netbootstrap-4

Managing dependencies within my company's shared npm package

Within my company, we have a shared package that has bootstrap as a dependency, and the directory structure is as follows: + - my-shared-package + - node_modules + ... + bootstrap + scss --_mixins.scss --_functi ...

npmsassbootstrap-4shared-libraries

Issue of Modal not hiding persists despite attempted solutions using JS, jQuery, and CSS

I am attempting to display a modal exclusively on mobile devices. Despite my confidence in the correctness of my JavaScript, it is not functioning as expected. Would anyone be willing to review and provide assistance? <div class="col-5 col-sm-2 ml-au ...

jqueryhtmlcssbootstrap-modalbootstrap-4

Table Structure Misalignment Issue

Below is the code used to align contact details: <html> <body> <table width="900" class="contact-details"> <tr> <td><img src="./images/Mobile.png"></td> <td> <p> ...

htmlcsshtml-table

Place a check mark in the corner of the button

I am looking to add a checkmark on my button in the right corner. I have set the input value and it displays a button with a check mark, but I want it to be positioned in the right corner. .buttoner{ background-color: #4CAF50; b ...

javascripthtmlcss

Hover effect not functioning as expected on Mobile Safari

Looking to create a hover effect for images on an HTML website. The idea is to have the image shade and display details when hovered over. Here is the CSS code: /* Hover overs */ .folio4:hover .face { opacity:1; cursor: pointer; } ...

csswebviewsafaricss-transitions

Incorrect behavior of responsive background images

For the first time, I am working on a school project that requires me to create a responsive website. I am following the "mobile first" approach. On stackoverflow, I came across a helpful way of making background images responsive: background-image: url(. ...

javascripthtmlcssbackground-imageresponsive

What could be the reason behind the malfunctioning of my media query in the

I am trying to connect an external stylesheet to my React component in order to apply different styles based on screen width. Specifically, when the screen width is less than 300px, I want the logo to have a height of 100vh. However, it seems that the medi ...

htmlcssreactjs

The embedded video on Youtube is not extending to fill the entire screen

Currently, I am in the process of creating a website for a friend's upcoming wedding using Bootstrap 5. However, I have encountered an issue where the embedded video is not expanding to fill the entire screen size. For reference, you can view the live ...

htmltwitter-bootstrapyoutubebootstrap-5

Generating PDFs with multiple pages using android.graphics.pdf

Currently, I am facing an issue while attempting to generate a PDF using android.graphics.pdf. The problem arises when dealing with multiple pages in the document. While I can provide android.graphics.pdf with HTML content that could be converted into a PD ...

androidhtmlcsspdftcpdf

The drop-down menu keeps flickering instead of remaining open when clicked

I am facing an issue with a dropdown menu in my webpage. The menu is initially hidden, but should become visible when the list element containing it is clicked. I have written JavaScript code to add a class that changes the visibility property to visible u ...

javascripthtmljquerycss

Customizing the positioning of a dropdown menu to the right in WordPress

I've encountered an issue with the native dropdown menu in Wordpress. The menu is dropping elements on the left side, but I need them to appear on the right side. Below is the CSS code I'm currently using: div#navigation { float: left; p ...

csswordpressdrop-down-menu

Editing text using jquery

I'm currently working on creating a basic product list with the ability to edit each product. My challenge right now is figuring out how to enable editing by double-clicking on a product. Since English isn't my first language, I hope you can unde ...

javascriptjqueryhtmlcss