Managing the gaps between words with CSS

Having trouble with the word spacing on your webpage bio? Check out the image below:

https://i.sstatic.net/ZyCe6.jpg

Looking for some advice on how to adjust your CSS for better word spacing? Here are some tips:

.column1 {
  float: left;
  margin-right: 40px;
}

.column2 {
            
}
     
p { 
  color: #000000; 
  letter-spacing: normal;
  font-family: 'Helvetica Neue', sans-serif; 
  font-size: 14px; 
  line-height: 24px; 
  margin: 0 0 24px; 
  text-align: justify; 
  text-justify: inter-word; 
}
<div class="column1"> 
<img alt="" src="/portals/2/Martin%20Profile.jpg" style="width: 100px; height: 100px;" title="" />
<br> Apptiv Solutions
<br> Founded 2015 
<br> Martin Muldoon
<br> Founder 
</div> 

<div class="column2">
<p>Martins introduction to the Brewing Industry first took place in 1995. While working as a Development Engineer at Trigen Energy Corporation, he was called upon to assist in the acquisition of the power plant assets of the Coors Brewery in Golden Colorado. To this day, the Coors plant is the largest single site brewery on earth providing 30% of all beer in the U.S.</p>
</div>

Answer №1

Justification is the cause of that issue. You also have a few typos, an extra ", normal-family should be font-family, and letter-spacing should have unit values such as px, em, rem, etc.

If you want to keep the justification on desktop but remove it on mobile, you can set text-align to left using a media query like this (adjust values as needed):

@media (max-width: 414px) {
  p {
    text-align: left;
  }
}

Check out this Resizable Fiddle

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

What is the process for aligning a Component to the right within the Navbar in an AppLayout

In my project, the MainView class is an extension of an AppLayout. I am attempting to populate the Navbar with a logo on the left and the user ID on the right. Despite my efforts, both components keep aligning to the left side. Desired Navbar layout: ...

Creating structured paths for retrieving data via HTTP GET requests

In my Laravel project, I have routes set up for requests in a traditional way: Route::get('edit/{user}', 'AdminUserController@getUser'); Route::post('delete', 'AdminUserController@deleteUser'); However, I am facing ...

Looking to achieve a mouse over effect in jQuery?

For the past few days, I've been grappling with a question that I just can't seem to find the right answer to. I'm trying to create a mouseover effect similar to the one on this template (the Buddha at the top of the page). Despite my best e ...

Issues with Twitter Bootstrap Tabs not functioning correctly on Ruby on Rails with HAML

I am facing an issue with twitter bootstrap tabs in my (HAML) ruby on rails project. Although the tabs are appearing, the content does not change when I click on different tabs. Additionally, some unexpected statements are showing up at the bottom of the f ...

Unsuccessful conversion of JSON data to HTML using json2html in Python

I have been experimenting with converting JSON data to HTML using json2html. The JSON data structure I am working with is as follows: json_obj = [{"Agent Status": "status1", "Last backup": "", "hostId": 1234567, "hostfqdn": "test1.example.com", "username" ...

Using an image instead of a checkbox when it is selected (Angular 4/Ionic 3)

Is there a way to swap out the checkbox for an image? I want this image to change dynamically based on whether the checkbox is checked or not. Unfortunately, adding a class doesn't seem to do the trick as it modifies all icons in the same column. The ...

Scroll bar for multiple selection select tag without using div element (not supported in firefox)

.selector select[multiple="multiple"] { border-radius: 0; height: 200px; margin: 0 0 0 -1px; max-width: 368px !important; padding-left: 3px; width: 368px !important; } <select id="id_included_packages_from" class="filtered" multiple="multipl ...

React JS Bootstrap Dropdown Troubleshooting

I'm facing a challenge in my React.js project while trying to implement a filter. The issue is that the list appears when I click on the button, but it doesn't disappear on the second click or if I click outside the list. Initially, I imported t ...

Is it possible to modify or delete the question mark in a URL?

Currently, I am working on implementing a search bar for one of my websites hosted on Github. Below is the code I have written for the search bar: <!-- HTML for SEARCH BAR --> <div id="header"> <form id="newsearch" method ...

Writing and altering content within the <code> element in Chrome is unreliable

Utilizing a WYSIWYG Editor with contenteditable functionality allows users to input "code snippets" using a <code> element. Here is an example: <div contenteditable="true"> <p> This is a paragraph with an <code>inline s ...

Transform a REACT js Component into an HTML document

I'm working with a static React component that displays information from a database. My goal is to implement a function that enables users to download the React component as an HTML file when they click on a button. In essence, I want to give users ...

Utilizing the jQuery slideToggle method on the specified target element

I'm encountering an issue with jQuery slideToggle, and here's the code I have: $(".dropdownmainmenu").click(function(){ $(this).children(".showmenu").slideToggle(); $(this).toggleClass("activemainmenu"); $(this).find(".showarrowmainmen ...

Ensure that the two background images are identical in size and content

Can someone assist me with achieving vertical equality for two background images like in this example image? Currently, I have the following styling applied: background-repeat: no-repeat, repeat-x, repeat-y; background-position: 925px center; However, t ...

Shell script for swapping all occurrences of :*; with a comma

Below are some CSS color variables defined in hex: --state-success-text: #3c763d; --state-success-background: #dff0d8; To create a comma-separated list of these color variables, the output should look like this: state-success-text, state-success ...

My presentations are not functioning as expected, could there be a problem with my HTML, CSS, or JavaScript coding?

My website utilizes a Slideshow feature to display images for blog posts. Recently, I attempted to include multiple slideshows within an article, which unfortunately caused all of the slideshows to malfunction. As it stands now, when the code is executed, ...

Bootstrap allows you to create a responsive grid

I need assistance with making my bootstrap grid responsive for multiple input search filters on mobile devices. Currently, the layout is not showing correctly on mobile phones. On desktop, the output looks fine: https://i.stack.imgur.com/bKPUv.png Howev ...

Utilizing jQuery to close a modal when clicking outside of its container

Trying to target elements in my practice layout but struggling to figure out the right approach: BASIC HTML <button id="opencontact" type="button" name="button"> <i class="far fa-envelope fa-2x"></i> </button> <section id="c ...

A photograph displayed within a container using Bootstrap, positioned on the right-hand side

I'm facing an issue with my container setup that includes row > col > img. I need the image to be positioned close to the page border. So far, I have tried making the site responsive using margin-right: -n px, but it doesn't work on mobil ...

Issue with !important keyword taking precedence not resolved

While working on a navigation bar button, I encountered a specificity conflict with the opacity property. I attempted to use the !important override but it doesn't seem to be taking effect. Any insights into why this might be happening? Here is the H ...

The dimensions of the HTML table have expanded excessively following the execution of mysql_fetch_assoc

I have encountered an issue where, after inserting the database values into an HTML table, the table becomes too large. I've tried using CSS code to adjust it, but it doesn't help. Should I consider changing something in the database value type? ...