Topic: H3 not on new line after H2
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>
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 6 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 6 years ago
@DailyOps as I can see, your snippet is empty. Did you click on "Publish" on it?
DailyOps pro commented 6 years ago
I did now and tested it. It should work now. Can you try again? Thanks!
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
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
Hi,
in my snippet here: https://mdbootstrap.com/snippets/jquery/marta-szymanska/264612 you can see correctly working headings.
Best,
Marta
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
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?
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 4 years 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
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 years ago
Hi @bvelare,
Thank you for this helpful explanation :)
Keep coding, Marcin
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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