Check out the following code playground: https://jsfiddle.net/x1aevoy9/
An issue arises when the screen width decreases, causing excessive spacing between words in the <h3> element before they eventually shift under the image. My goal is to prevent these gaps and maintain consistent alignment of words without significant spacing. This seems to occur when the second word or phrase is longer than the first. I've experimented with padding but haven't been able to find a solution.
Give this a shot.
h3 { visibility: visible }
Implement the given styles for the <h3> tag.
h3{
-ms-word-break: break-all;
word-break: break-all;
/* Not standard for WebKit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
Link to learn more: https://css-tricks.com/almanac/properties/w/word-break/
Fiddle demonstrating the styles: https://jsfiddle.net/g4ar6s9r/
You should group the two top elements inside a div element (the b and .pull-right).
https://example.com/code-sample
<div>
<b style="color:goldenrod; padding-right:5px;">Gold Member</b>
<div class="pull-right" style="padding-top:5px; padding-bottom:5px;">
<a href="/listings/ListingID"><img alt="Chief Bean Counter" width="160" height="120" src="listing.PhotoURL" /></a>
</div>
</div>
Have you considered restructuring your code by utilizing bootstrap columns?
<div class="row" style="padding: 10px;">
<div class="col-sm-4">
<b style="color:goldenrod; padding-right:5px;">Gold Member</b>
<h3><a href="/listings/@listing.ListingID">Chief Bean Counter</a></h3>
<p><em>This is a subtitle</em></p>
</div>
<div class="col-sm-3 col-sm-offset-5 text-right col-xs-3">
<a href="/listings/ListingID"><img alt="Chief Bean Counter" width="160" height="120" src="listing.PhotoURL" /></a>
</div>
</div>
At a wider width, it shifts to a second row without affecting the text layout.
Attempting to showcase only the <div> that aligns with the dropdown options selected in the form. The form is dynamically created through a Form class, with options pulled from tables in the database (race, class). The final form structure appears a ...
For the div element in my code, I want to allow users to input a URL that will be applied as a CSS background image, like this: background-image: url("/* user specified URL here*/") I'm concerned about security. How can I properly escape the URL to ...
I have a basic CSV file with 6 columns. EDIT: I'm having trouble finding the error in the code below, specifically with selecting a key and using it as a variable: $handle = fopen('hire_pa_amps.csv',"r"); while($values = fgetcsv($handle)) ...
I recently created a table by extracting data from a database using a loop to retrieve all the necessary information. However, I encountered an error after calling a javascript function in the HTML onClick event of an input element. The function itself wor ...
When a <table> is placed within an inline-flex container that has a flex-direction of column, Safari displays the table with a different cross-size compared to Chrome and Firefox. This discrepancy makes me question if Safari's default display fo ...
I recently started working with Django and I'm trying to figure out how to display all comments related to a specific listing on an online auction site. Can anyone help me find a solution for this? Models.py class Listing(models.Model): title = m ...
I am looking to create a form with multiple input fields, where I want to display a div only when all the input fields are filled. If any of the input fields are empty, the div should disappear. I have managed to achieve this functionality for one input f ...
One of the challenges I am facing is managing a view with multiple projects, some of which are active while others are not. In my function, if a project's deadline has passed, it displays '0' days left on the view, indicating that these are ...
Creating a room allocation page with multiple panel boxes using Bootstrap. Each box represents a bed - highlighted in red if occupied and green if vacant. Clicking on a green panel redirects to the room allocation page, while clicking on a red panel goes t ...
I have created a jQuery code that includes 3 pre-existing rows with a text box to add more similar rows. The jQuery functions are initially applied to the first 3 hard-coded rows. I am looking to extend this functionality to dynamically added rows later on ...
Here is a sample code snippet demonstrating how data is fetched from the database: <table class="table table-bordered"> <thead> <tr><th>User ID</th><th>Account Number</th><th>Accou ...
I've noticed that the style nav-tabs left isn't functioning in Bootstrap versions 3.3.0 and 3.3.2. I'm curious if anyone has found a way to re-enable this style so that tabs can run vertically with content displayed on the right. For those ...
I have integrated Kendo controls into my application, specifically a Menu control with a datasource in my controller. Currently, I am passing the relative path of URL for imageUrl. However, as the application has grown, there are multiple calls being made ...
There seems to be an issue with this code as it's not displaying an unordered list of HTML elements as intended. I've written the script and HTML code using Sublime Text, but even after trying to run the script in Chrome's developer console ...
I am currently developing a system that enables users to add notes over an image they upload. Presently, I have a note div that, upon clicking, opens a text box for editing. When hovering over this div, I utilize Bootstrap Tooltip to preview the contents o ...
As a novice in web page coding, I am seeking assistance with centering elements on my master page. The layout includes a banner at the top and an ASP menu control on the left side. To achieve center alignment, I have created an "outer_div" with CSS attribu ...
I have been attempting to extract a data attribute from a link within a list when it is clicked on. $(document).on('click', "ul.pagination li a", function(e) { e.preventDefault(); var page = $(this).attr("page"); var article_id = get ...
I'm facing an issue with integrating multiple UI-views in my AngularJS dashboard app. Despite following the directory structure, I am unable to get it working as expected. This is how my directories are organized: index.html app/ app.js dash ...
Here is how my current dropdown menu looks like: https://i.sstatic.net/evv1I.png The "Home" option is not positioned correctly at the top left as I would prefer. How can I adjust this? Thank you for any assistance. * { margin: 0; padding: 0; } nav ...
I have implemented a feature that allows me to change the category of photos without having to leave the page and it works perfectly. My next goal is to create a button system where the pre-defined category of a photo is indicated by a button with a green ...