Padding is ineffective

I am struggling to add top space to my subtitle, but for some reason, it’s not working. However, I noticed that when I apply the class spacer-top to the row class, it works fine. How can I also add spacer-top to the mainsubtitle?
HTML

<div class="container-fluid" id="about">
     <div class="row">
            <mainsubtitle class="spacer-top">Something</mainsubtitle>
     </div>
</div>

CSS

#about{
text-align: center;
background-color: #ffffff;}

mainsubtitle{
padding-top: 50px;
font-family: 'Lato Regular', 'Lato';
font-weight: 400;
font-style: normal;
font-size: 36px;
color: #000;
text-align: center;}

.spacer-top {
padding-top: 100px;
padding-bottom: 0px;}
htmlcss

Answer №1

It is recommended to avoid using custom elements as they may not always be supported. However, the following code demonstrates a working solution:

HTML:

<div class="container-fluid" id="about">
     <div class="row">
            <div id="mainsubtitle">Something</div>
     </div>
</div>

CSS:

#about{
text-align: center;
background-color: #ffffff;}

#mainsubtitle{
padding-top: 50px;
font-family: 'Lato Regular', 'Lato';
font-weight: 400;
font-style: normal;
font-size: 36px;
color: #000;
text-align: center;}

Fiddle - https://jsfiddle.net/ae5jcxe5/

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

The issue of apples failing to spawn correctly in the Snake game

My Snake game seems to have a bug that causes some strange behavior whenever an apple is collected. Upon collision, the apple disappears and a new one spawns in a new location, but then the original apple reappears in its initial spot. Subsequently, when t ...

javascriptjqueryhtmlcsscanvas

Having trouble getting the `nth-of-type` and `nth-child` selectors in CSS to function

I am attempting to apply a green color for the first nth child flag element <div id="axis"> <div class="super"></div> <div class="flag">flag 1</div><!-- I want this text to be green--> <div class="supe ...

htmlcsscss-selectors

Troubleshooting JavaScript Object allocation problem

As someone who is not an expert in JavaScript, I have a question that may seem silly. Let's say I have the following snippet of HTML: <div> <script type="text/javascript"> var variable_2 = new SomeObject(); </script ...

javascripthtmlajaxperformance

Eliminate the empty choice for Angular when dealing with dynamic option objects

Looking for assistance with this code snippet: <select ng-model='item.data.choice' > <option ng-if='item.data.simple_allow_blank == false' ng-show='choice.name' ng-repeat='choice in item.data.simple_choices&ap ...

cssangularjshtml

The title attribute in Vue3 is updated through props, but computed properties remain unaffected

I incorporated an external library into my project using Vue3. The component I am utilizing is sourced from a third-party library [Edit: Upon realizing that the GitHub repository for this library is no longer being maintained, I have updated the code to re ...

cssvue.jsvuejs3vue-reactivity

Captions in Bootstrap 4 carousel vanish when adjusting size

My Bootstrap 4 carousel is displaying GIFs with captions for different project features. The captions work well on medium/large screens, but disappear entirely on smaller screens. How can I ensure the captions remain visible on smaller screens? <div ...

javascripthtmlcssbootstrap-4

Providing the outcome in JSON format rather than HTML

Seeking assistance with calling and displaying a Java web service in ASP.NET Web API. How can I configure my ASP.NET Web API to display JSON data instead of HTML when run? Below are the relevant code snippets: DemoRestfulClient.cs public class DemoRestf ...

htmlasp.netjson

Discovering JSON data embedded within a script tag in an HTML response using Jsoup

Looking for help with extracting JSON content from script tags embedded in an HTML file. I attempted to use Jsoup without success. Can anyone provide guidance on utilizing JSOUP or another library for this task? Thank you in advance. ...

javaandroidhtmljsonjsoup

What is the best way to apply a color overlay to an image using CSS?

In my current project, I am utilizing React along with HTML, CSS, and Material UI. One of the tasks I am working on is toggling a color overlay on an image when it is clicked. Here is the snippet of JavaScript code I have implemented: const About = ({imgS ...

javascripthtmlcssreactjssass

Issue with Gulp.js- CSS not being refreshed on the browser after updates

I've encountered an issue while using gulp.js and BrowserSync. Whenever I save the CSS files, no changes are being reflected. Interestingly, there are no problems with the HTML files. It's worth mentioning that I'm not utilizing LESS or SASS ...

cssgulpbrowser-sync

I am attempting to populate a cell in a row with an image

Having trouble fitting an image into a column of a row created using Bootstrap. I want the image to be the same height as the row and any part that doesn't fit the width to be cropped out. However, the image either takes up only the width of the colum ...

cssimageflexboxbootstrap-5object-fit

Designing a unique customized top navigation bar in Magento 1.9.2

I recently attempted to create a unique top menu in magento 1.9.2 by modifying the Navigation.php file located at app/code/core/Mage/catalog/Block/. I added some custom classes in an effort to customize the menu. In order to achieve this customization, I ...

phpcsstwitter-bootstrapmagento

Create a receipt by utilizing jQuery with dynamically generated inputs

Is there a way to insert the descriptions and amounts of invoice items into the receipt, similar to the due date? The input for this section is dynamic with multiple rows that can be added or deleted. I'm considering using a counter that increments e ...

javascripthtmljquery

What is the best way to retrieve all of a user's records based on a specified selection

My HTML text input field looks like this: <input id="CustID" name="CustID" dir="rtl" value="<?php echo $CustID;?>" size="35" required="true" maxlength="9" > Whenever a user enters their number, I want a select box to display all tickets assoc ...

phphtmlajaxselect

Center user input within a div element

I am trying to achieve proper alignment of input elements within a div. When the div is clicked, the input should be displayed; otherwise, a span should be shown instead. Here is my code: <!doctype html> <html lang="en"> <head&g ...

htmlcssvue.js

Utilizing a CSS stylesheet within an ASP.NET platform

In my website, I have a reference to a CSS file like the one below: <link rel="stylesheet" type="text/css" href="http://go/css/filename.css"> Now, I want to make changes to this CSS file and upload it to a new location. Can I store the modified fi ...

.netasp.netcssvisual-studio

Is there a way to modify a CSS class in Chrome that is only visible when I perform a drag action?

For the website project I am working on, I have an element that only changes its style when I drag something over it. This is achieved by adding a CSS class to it. However, editing this style has proven to be challenging because I cannot live edit it in C ...

cssangularjsgoogle-chrome-devtools

Difficulty with positioning two divs side by side in HTML/CSS?

Hey there, I'm facing some strange CSS issues while trying to achieve a specific layout. I want to have a warning icon on the right side of each input field, which are horizontally centered: https://i.sstatic.net/IY3xp.png Currently, I have managed ...

htmlcss

Building a company hierarchy with HTML, CSS, and Bootstrap styling

I recently implemented an organization chart that I came across at the following link: Everything seemed to be working well initially, but I ran into an issue where my tree expanded horizontally and started breaking like this: https://i.sstatic.net/2pTdy. ...

htmlcsstwitter-bootstrapbootstrap-4

Is there a method to exempt a particular input field from form validation?

Is there a way to prevent a form validation error message from displaying in other input fields when using an input url field within a rich text editor component (RTE) placed inside a form element? <input type="url" v-model="state.url ...

htmlformsvue.jsvalidation