I am interested in setting the background for blogger headings H2, H3, and H4 to match the size

view the image hereI am using Blogger and have implemented CSS for H2, H3, and H4 tags with custom background and text size styles. However, I am facing an issue where I want the background size to automatically adjust according to the text size instead of spanning the entire width of the page.

Is there anyone who can provide me with a different code snippet or CSS trick to achieve this?

After replacing "display: block;" with "display: inline-block", the issue was partially resolved but resulted in some problems as illustrated in image number 2.

.post-body h3,.post-body h2,.post-body h4{background-color:#333333;width: auto;padding:10px 20px;color:#FFF;display: block;margin:5px 0 15px;border-bottom:1px solid $(post.line)}

cssblogger

Answer №1

If a heading element is found within text or between inline elements, the CSS property display: table can be utilized.

h2 {
  display: table;
  background: tomato;
}
    
<h2>Lorem ipsum dolor sit amet</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>


<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor <h2>Lorem ipsum dolor sit amet</h2> laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Answer №2

When h1 tags are set to inline-block, they will act like inline elements. This means that if the following element is also inline, they will be displayed next to each other.

You can apply inline-block to header tags, but ensure that the subsequent content has display: block. This will position the element on a new line, allowing you to achieve your desired layout with the header tags.

h1 {
  display: inline-block;
  background-color: #111;
  color: #FFF;
}

p {
  display: block; /* this is actually the default display for p tags*/
}
<h1>lorem ipsum dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga velit nulla molestiae sunt unde sint, neque optio, beatae cumque perspiciatis a quae eum omnis nesciunt minus veritatis nemo iusto soluta.</p>

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

Stop automatic scrolling when the keyboard is visible in Angular

I have created a survey form where the user's name appears on top in mobile view. However, I am facing an issue with auto scroll when the keyboard pops up. I want to disable this feature to improve the user experience. <input (click)="onFocusI ...

cssangulartypescriptforms

iOS Safari: Full-width header with fixed position exceeding viewport width

Encountered an issue specific to Safari on iOS. Creating a page with a fixed position header that spans the width of the viewport. The content consists of multiple images that should scroll horizontally while the header remains in place during scrolling. ...

htmlioscsssafari

Updating style of an element by hovering over another

What is the best way to change the CSS of one element when hovering over another element in CSS? We can achieve this using the following code: .example .example2 li:hover .element If our HTML looks like this: <div class='example'><di ...

htmlcsscss-selectors

Looking to include some extra padding when an item is displayed - jQuery

So, I'm working on a jQuery code snippet that controls the visibility of a rectangle element: $("#rectangle").hide(); $("#toggle-rec").click(function () { $("#rectangle").toggle(2000); }); This code hides the rectangle initially and toggles it ...

javascriptjqueryhtmlcss

Change the background color according to the user's input text

I want to create a text box where users can input color keywords like blue, lime, or black. When they click submit, I want the background color of the page to change accordingly. This is what I have so far: <label for="color">Color: </label> ...

javascripthtmlcss

The hovering over a table data element results in a superior transformation

I recently created a table with an interesting structure where the first <tr> contains two <td> elements (the first one having a rowspan), while the second <tr> only has one <td>. My goal is to have hovering over the <td> in t ...

csshover

The drop-down menu is misaligned from its designated position underneath the title

Trying to incorporate a dropdown menu into my website, I am structuring the HTML as follows: <ul class="topnav"> <li> SECTION TITLE <ul class="subnav"> <li>One</li> <li>Two</li> ...

jqueryhtmlcssdrop-down-menu

Modifying the background image of the <body> element in CSS to reflect the season based on the current month in the calendar

I'm struggling to change my HTML background based on the date. The code I've tried isn't working as expected and I can't seem to find any relevant examples to guide me. My goal is simple - I want the background of my HTML page to be ch ...

javascripthtmlcsscomparison-operators

Challenges with the height of the calendar component in Vuetify

I need assistance with preventing the appearance of two scroll bars while working with Vuetify's sheet and calendar components. https://i.stack.imgur.com/yBfhj.png Below is my code snippet: <template> <v-app> <v-main> & ...

cssvue.jsvuetify.jsheight

Choosing particular contenteditable divisions using jQuery

Consider the following HTML structure for a specific type of blog post editor: <div class="entry"> <div class="title" contenteditable="true"> <h2>Title goes here</h2> </div> <div class="content" contenteditable ...

javascriptjqueryhtmlcsscontenteditable

Displaying a loading screen while a jQuery ajax request is in progress

Currently, I am attempting to display a loading div while waiting for an ajax call to finish. Despite experimenting with various methods, I have not been able to consistently achieve the desired outcome. In my present code, everything functions properly o ...

javascriptjqueryhtmlcssajax

Navigational assistance on the keyboard - Improving Accessibility

My situation involves selecting an option from a dropdown menu on X-page, which triggers the opening of Modal-1 while disabling the background. If a selection is made within Modal-1, it leads to Modal-2. I am facing two issues/questions: Upon opening Moda ...

htmlcssangularaccessibility

I am trying to verify my code, but the messages are not displaying under the username. They only appear under the password field. I am not sure where I have made a mistake

Having trouble with my login form validation using jQuery. Can someone help me fix it? $(document).ready(function() { $("#form1").validate({ rules: { username: { required: true, minlength: 6 }, password: { ...

htmljquerycss

What causes the entire set of dynamically created cards to collapse when using the toggle collapse button in ngb-bootstrap's Collapse control?

I am currently implementing the ngb-bootstrap collapse feature in my Angular 9 application. Incorporating the ngb-bootstrap collapse functionality within a Bootstrap card, I have multiple cards being generated. Each card is equipped with a collapse button ...

htmlcssangulartwitter-bootstrapng-bootstrap

Is there a reason why the integration of OnsenUI with Vue using vue-onsenui and v-ons-segment is not functioning

I am experiencing an issue with OnsenUI and VUE vue-onsenui v-ons-segment. Instead of displaying a button bar in a row as expected, I am seeing standard buttons. The problematic code resides in a customized Monaca CLI project utilizing the minimal VUE tem ...

cssvue.jsvuejs2segmentonsen-ui2

Having trouble with your jQuery animation on a div?

Check out this jsFiddle example: http://jsfiddle.net/uM68j/ After clicking on one of the links in the demo, the bar is supposed to smoothly slide to the top. However, instead of animating, it immediately jumps to the top. How can I modify the code to ac ...

javascriptjquerycssjquery-animate

Break down the text of a paragraph into separate words, placing each word within its own span element, and then add animations

I am facing an issue with my paragraph element that has the display property set to hidden. I have split each word of the paragraph and placed them inside individual span elements. My goal is to create an effect where each word comes from different locatio ...

javascripthtmlcss

Show an image when hovering over a dot using CSS - without hovering directly on the image

I'm currently working on a merchandising page that involves photoshopping several products onto a background image. I want customers to be able to hover over a dot positioned on each product to reveal its information and provide a link similar to . Ho ...

htmlcss

How can I translate these JQuery functions into vanilla JavaScript?

I am currently in the process of building a configurator using transparent images. The image configurator functions through a basic JQuery function: I have assigned each input element a data attribute called data-Image. This function identifies the data-Im ...

javascriptjqueryhtmlcss

Positioning a Box tag at the bottom using MUI 5

My goal is to position a Box tag at the bottom of the page. Current Behavior: https://i.stack.imgur.com/ZupNo.png I am looking to place a TextField and send button at the bottom of the page on both browser and mobile. I want user messages to be above th ...

htmlcsstypescriptmaterial-ui