What steps should I take to ensure proper spacing on my website? (admin inquiry)

I'm currently working on a website called www.confiam.com.br, which is a project built with Django. While making some adjustments recently, I unintentionally broke something related to the formatting of paragraphs. Now, the spacing doesn't seem right and it's not respecting line breaks as it should.

Here is the HTML snippet:

<div class=item>
        <p><h1>{{ post.nome_evento }}</h1></p>
        <center><picture>{% cloudinary post.foto_evento %}</picture></center>
        <p><h2>{{ post.apresentacao_evento }}</h2></p>
        <br>
    </div>

and this is the corresponding CSS:

p{
    text-align:justify;
}
.item h1{
    font-family: 'Kurale';
    margin: 0 auto;
    position: relative;
    padding:20px;
    word-wrap: break-word;
    text-align: center
}

.item h2{
    font-family: 'Kurale', serif;
    position: relative;
    margin: 0 auto;
    padding:20px;
    word-wrap: break-word;
    text-align: center
}

Any help or insight would be greatly appreciated. I'm at a loss trying to figure out where I went wrong. Thank you in advance for any assistance provided.

Answer №1

When working with HTML, it's important to keep in mind that whitespace is normally collapsed by the browser (which helps with code indentation).

If you want to change this behavior, you can use a CSS rule called white-space. Make sure you set it to either pre, pre-line, or pre-wrap based on the desired outcome. (pre maintains all whitespace and newlines as they are; pre-wrap does the same but also automatically wraps lines if they exceed the node width; pre-line preserves newlines but collapses other whitespace.)

It's not clear from your explanation which DOM element requires this rule.

For more information on white-space, check out https://developer.mozilla.org/en-US/docs/Web/CSS/white-space.

div {border: 1px solid}
.demo {white-space: pre}
<div class="demo">this
will
preserve
whitespace
</div>
<div>this
will not
preserve
whitespace
</div>

(Consider implementing version control for your project so that you have the ability to revert changes and compare previous versions when needed...)

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

Responsive slide displays a unique number of items per slide depending

I created a logo slider using Bootstrap, similar to the one showcased here: http://jsfiddle.net/juddlyon/Q2TYv/10/. Currently, each slide in the slider displays 4 logos. I would like to make it responsive so that on smaller screens, only 2 logos are shown ...

Having trouble generating the django.po file

Just starting out with django web app, This is the current project structure: x ->x ->settings.py In settings.py, the following entry is present: from django.utils.translation import ugettext_lazy as _ LOCALE_PATHS = ( join (BASE_DIR, 'l ...

The paintbrush is whimsically altering its style on the canvas

My checkerboard has a unique feature where hovering over a tile will highlight it in yellow. Surprisingly, this action also turns the game border and the last white checker's border yellow as well. What's puzzling is that I never specified for t ...

How to retrieve the time duration in minutes between a start and end time in JavaScript to

I have conducted a thorough search on Stack Overflow and other platforms but could not find an answer to my specific question. While I did come across posts related to this topic, they did not address the issue I am facing. Problem: My challenge involves ...

The website is displaying a strange mix of text and HTML when viewed on a PC

While browsing the internet for C programs, I stumbled upon this particular program that caught my eye: <span style='color:#004a43'>#</span><span style='color:#004a43'>include</span><span style='color:#8 ...

Show information in a template from a Django model

When trying to extract information from my "junction" model clientvul in the template, I encountered an issue. models.py from django.db import models from django.contrib import admin class client(models.Model): client= models.CharField(max_length=50, ...

Optimal method for passing a variable with HttpResponseRedirect

Currently, I am delving into a book on Django and have some queries regarding the functions HttpResponseRedirect and render_to_response. Let's say I have a contact form that sends data to the confirm view. After passing through all the validation and ...

Troubleshooting: jQuery's AJAX load() function fails to execute

I am facing an issue where I am attempting to import an HTML file into a specific section within my webpage using the load() method. However, when I click on the link, instead of loading the HTML file into the designated div tag, it opens in a new tab. He ...

The scrolling function halts as soon as the element that was middle-clicked is deleted from the

I am knee-deep in developing my own React virtualization feature and encountering a minor annoyance. When I middle click on an item in the list and start scrolling, the scrolling stops once that item is removed from the DOM. My initial thought was that the ...

Verify if a string containing only numerical values contains any non-numeric characters

I have an input field for a phone number, but the type is set to text instead of number. I want to validate it if there are any non-numeric characters present, since I have formatted the input to look like this: 123-123-1234 Here is my input: <input (ke ...

Performing a fuzzy search with Django querysets

I could really use your help - I'm stuck on how to search for the answer. In my HTML template, I have a Django queryset that has been returned. My goal is to implement an autocomplete search feature using that queryset. For instance, if my query res ...

Having trouble with ng-class not updating properly when using setTimeout in Angular?

I am encountering an issue with my 'highlightBookmark' function that is supposed to change the background color of a list item after 2 seconds. However, it is not working as expected! The background color only changes when the function is called ...

Is there a way to output several lines from a JSON file in print form?

I'm working with HTML code that displays multiple lines from a JSON file, but it only shows one line at a time. How can I modify the code to display all users' information? <!DOCTYPE html> <html> <head> <script> function ...

Prevent the repositioning of a tooltip due to overflow in Bootstrap 5.2 and Popper JS Tooltips

Can someone please provide an example of how to create a tooltip using Bootstrap 5.x and Popper JS, where the tooltip remains fixed to the associated element even if the page overflows and scroll bars appear? I've attempted to work with boundaries an ...

Full progress sphere

Looking for some assistance with a circular progress component code that I have been working on. Despite my efforts, the circle is not completing when hovered over. Any suggestions on how to make it work would be greatly appreciated. button { bord ...

Exploring Javascript's Timing Functions: SetInterval() and ClearInterval()

Hi there, I am currently working on developing an interval timer that allows users to set the number of rounds, working interval length, and resting interval duration. For instance, if a user inputs 30 seconds for work, 10 seconds for rest, and decides on ...

Combining all elements of my application into a single HTML, JS, and CSS file

My AngularJS app has a specific structure that includes different directories for each component: theprojectroot |- src | |- app | | |- index.html | | |- index.js | | |- userhome | | | |- userhome.html | | | ...

Learn how to implement media queries using CSS3 with an HTML5 form

Struggling to implement Media Query in my HTML5 form that was styled using CSS. Any assistance would be greatly appreciated. <div class="form"> <form action="Login.jsp" method="post" > <input type="text" name="username" placeholder="usernam ...

Attempting to transfer various variables from several windows using AJAX

Is it possible to pass multiple variables from two different windows into the same PHP script? If not, what would be the best approach to take? Thank you. verifyemail.html <script type = "text/javascript" src = "js/js_functions.js"></script> ...

``There are discrepancies in the rendering of the img and button tags between Firefox and Safari

I've encountered a challenging issue that I'm struggling to resolve independently. Upon further investigation, the real problem lies in the varying rendering of the button tag in different browsers. Specifically, Firefox and Safari display the b ...