H3 not on new line after H2


Topic: H3 not on new line after H2

DailyOps pro asked 3 years ago

Hi, 

I seem to have an issue with a template I used: https://mdbootstrap.com/previews/templates/magazine/html/postpage/v-1.html

If an H3 directly follows an H2, somehow a new line is prevented by (I assume) the CSS. 

<h2>Titel h2</h2>
<h3>Titel h3</h3>

 


Marta Szymanska staff pro premium answered 3 years ago

Hi,

I'm not sure what you mean. Would you provide a snippet showing the problem here: https://mdbootstrap.com/snippets/?

Best,

Marta


DailyOps pro commented 3 years ago

Hi Marta, 

The snippet can be found on: 

https://mdbootstrap.com/snippets/jquery/dailyops/259731

Kind regards, 

Ronald. 


Bartłomiej Malanowski staff pro premium commented 3 years ago

@DailyOps as I can see, your snippet is empty. Did you click on "Publish" on it?


DailyOps pro commented 3 years ago

I did now and tested it. It should work now. Can you try again? Thanks!


Marta Szymanska staff pro premium answered 3 years ago

Hi,

here you can see correctly working Magazine Post Page: https://mdbootstrap.com/snippets/jquery/marta-szymanska/264612. But I still don't know what is exactly your problem? Which specific element of this page do you have a problem with? Please, point it.

Best,

Marta


DailyOps pro answered 3 years ago

Hi Marta, 

My problem is in the title: "H3 not on new line after H2". 

So, if you take a look at the snippet, you see an H2 heading, followed by a H3 heading.

The H3 heading is not on a new line, as a heading should be. That is the issue. 

Here is a screenshot of the issue.

Hope this helps!

Kind regards, 

Ronald


Marta Szymanska staff pro premium answered 3 years ago

Hi,

in my snippet here: https://mdbootstrap.com/snippets/jquery/marta-szymanska/264612 you can see correctly working headings.

Best,

Marta


DailyOps pro answered 3 years ago

Hi Marta,

Thank you for your answer. Unfortunately it happens also after an image, the h3 is also not placed on a new line see screenshot.  The only thing that works is to remove the row class from the HTML, but I don't want to change anything in the HTML. In the row class there is a display:flex which I think makes the wrong aligning happen.

I prefer to add some styling in my style.css which solves all of this.

Hope you can help me with this.

Best,

Ronald


Piotr Glejzer staff answered 3 years ago

Did you try to create new div and put that code inside. This div should have classes 'flex-column'.

<div class="flex-column">

<h2>This is a H2</h2>

<h3>And this is a H3</h3>

</div>

Is this what you are looking for?
Best,
Piotr

Gaurav Jain answered 10 months ago

i am facing same issue.

i have following code

<p>How a fresher can get job?</p>
<p>The usual stuff: Resume </p>

and in output both lines are coming in same line.

output is following of above code

How a fresher can get job? 1. The usual stuff: Resume

Why both are not coming in new lines even p tag is use for new line


Marcin Luczak staff commented 10 months ago

Hi @Gaurav Jain,

Which MDB Package are you using? Please check if all content for MDB Package has been downloaded and installed properly into your project directory. Optionally you can download and add the package to your project once again.

Also please paste a screenshot from the developer tools in your browser showing the style for those lines.

Regards, Marcin


bvelare answered 3 months ago

This happens when you use the row class, but don't put a container inside of it.

Instead of this:

<div class="row">
    <h2> Heading!</h2>    
    <h3>Heading3</h3>
</div>

You need this:

<div class="row">
    <div class="container">
        <h2> Heading!</h2>    
        <h3>Heading3</h3>
    </div>
</div

Marcin Luczak staff commented 3 months ago

Hi @bvelare,

Thank you for this helpful explanation :)

Keep coding, Marcin


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: Macbook
  • Browser: Chrome Version 71.0.3578.98
  • OS: MacOS
  • Provided sample code: No
  • Provided link: Yes
Tags