Creating adequate spacing between words in your design while also maintaining responsiveness can be achieved through these simple

I'm working on designing a box that displays a list of descriptive characteristics and their corresponding values in a responsive manner. Initially, I attempted to use two unordered lists with floated elements but encountered issues as the browser size changed.

Now, I am experimenting with adding multiple   to create space between the characteristics and values. While this method works when screen sizes are defined using media queries, I'm concerned about how it will appear on larger screens without specific queries.

Is there another way to effectively generate spacing between words?

.gallery {
  height: max-content;
  background: black;
  border-radius: 10px;
  border: solid 2px #f0c330;
  overflow: hidden;
  color: white;
  flex: 0 1 48%;
  margin-left: 1%;
  margin-right: 1%;

<div class="gallery">
  <h2>Statistics</h2>
  <p class="pdesc"> Height &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;6ft <br/> Age &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 36</p>
</div>
htmlcss

Answer №1

To achieve the desired layout, utilize flexbox for each row and apply justify-content: space-between to evenly distribute items across the edges of each box. Adjust the width of the boxes as needed, for example, setting it to 30%:

.gallery {
    background: #000;
    border-radius: 10px;
    border: solid 2px #f0c330;
    color: #fff;
    flex: 0 1 48%;
    margin-left: 1%;
    margin-right: 1%;
    padding: 10px;
}

.gallery h2{
    margin-top:0;
}

.pdesc{
    display: flex;
    justify-content: space-between;
    width: 30%;
}
<div class="gallery">
    <h2>Statistics</h2>
    <div class="pdesc">
        <span>Height</span>
        <span>6ft</span>
    </div>
    <div class="pdesc">
        <span>Age</span>
        <span>36</span>
    </div>
</div>

Answer №2

Argh! Here's a different approach:

<div class="display">
    <h2>Data</h2>
    <p class="info"><span>Weight</span><span>150lbs</span></p>
    <p class="info"><span>Gender</span><span>Female</span></p>
</div>

<style>
.display {
    height: auto;
    background: blue;
    border-radius: 5px;
    border: solid 1px #aabbcc; 
    overflow: hidden;
    color: black;
    flex: 0 1 50%;
    margin-left: 2%;
    margin-right: 2%;
}
p {
    width:90%;
    display: flex;
    justify-content: space-between;
}
</style>

Avoiding the use of variable &nbsp; completely.

Answer №3

To enhance the layout, utilize span elements for the text sections and implement 

display: flex; justify-content: space-between;
within the p tags:

.gallery {
  height: max-content;
  background: black;
  border-radius: 10px;
  border: solid 2px #f0c330;
  overflow: hidden;
  color: white;
  flex: 0 1 48%;
  margin-left: 1%;
  margin-right: 1%;
  padding: 12px;
}
.pdesc {
  display: flex;
  justify-content: space-between;
 }
<div class="gallery">
  <h2>Statistics</h2>
  <p class="pdesc"><span>Height</span><span>6ft</span></p>
  <p class="pdesc"><span>Age</span><span>36</span></p>
</div>

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

Crop the left side of an image instead of the right side to reduce its width

I have a photo that I'm working with. Currently, I am looking to add a progress bar effect where the picture starts off very short and gradually becomes longer. As of now, I have set the image as a background in a div. However, when I set a specific ...

jqueryhtmlcssweb

Combining multiple paragraphs into a single variable using Selenium

Hello everyone, I am completely new to web scraping and decided to take on a simple project, but I'm facing some challenges. Here is a snippet of the HTML code: <div id="comment-901408_wrap"> <div class="cPost_contentWrap ...

pythonhtmlseleniumxpathweb-scraping

Adjust the color of the text as it scrolls by

As I work on developing my website using the Neve Theme on WordPress, I have encountered an issue with customizing the header block. I am using a plugin to set a background color for the header after scrolling 100px down the page, but this makes the text h ...

javascriptcsswordpress

Why is the footer appearing in the sidebar section?

I have a question that I believe may be common and already answered, but I can't seem to find the solution. codepen Currently, I am working on creating a simple 2 column layout. While the columns are displaying correctly, the footer ends up in the s ...

htmlcss

What is the best way to set a fixed placeholder at the upper left corner of the input field?

I'm working on customizing an Input component from antd. My goal is to keep the placeholder text constant, small, and positioned in the top left corner of the component. So far, I've successfully moved the placeholder to the top left corner, but ...

cssreactjsantdstyled-componentsplaceholder

The solution for fixing contenteditable is as follows:

I am currently working on a script to clean up pasted text within a contenteditable div. While the script is functioning well for most part, I have noticed that in Firefox, line breaks get removed when the text is copied within or between the divs. Does ...

javascriptjqueryhtmlcss

Modifying SVG gradients with JavaScript

My goal is to modify the stop color of a gradient displayed in an SVG element. I've been trying to adjust the stop-color attribute, but so far, my attempts have not been successful: <svg><defs> <linearGradient gradientTransform="rotat ...

javascripthtmlsvggradient

JavaScript mouse and touch movement events (mousemove, pointermove, touchmove) are not always accurate

I'm currently working on developing a JavaScript whiteboard and have implemented the following code: let lastTimestamp = 0; const fps = 1000/60; document.addEventListener("pointermove", moveMouse, false); function moveMouse (e) { e.preve ...

javascripthtmlcanvas

What is the best way to incorporate a style attribute into my EJS page content?

Having trouble with adding custom style. It seems to work, but there's an error displayed. Apologies for my poor english :( <div class="card card_applicant"> <div class="card_title" style="background-c ...

cssnode.jsexpressejs

change the appearance of a link within an html div

I have a specific div where I want to customize the link style, overriding the global settings. In my code, I have two different styles for links - one is global and the other is specific. Here's how it looks: A:link {text-decoration: none; color: #F ...

csshtmlhyperlinkstylesheet

What is the best storage location for div elements used in jQuery Mobile pop-up functionality?

I'm struggling with what seems like should be an easy task. Even after reading through the documentation and grasping the JQM pop-up concept, I'm still stuck. It involves a simple link with: href="popupBasic" data-rel="popup" and a div with: ...

jqueryhtmljquery-mobilelayoutpopup

The collapse feature of Bootstrap 5 navbar is experiencing delays

Can anyone assist me with the bootstrap navbar collapse issue I am facing? When I click on the burger menu, there is a slight delay of less than a second before it fully expands. Additionally, if I click very quickly multiple times on the burger icon, the ...

cssanimationnavigationbootstrap-5

Modify one individual css style / tag

Currently, I have a large React application that is utilizing Material UI 4.3.0. I attempted to remove the margin-top style of label + .MuiInput-formControl within a select Mui component. To achieve this, I used the 'overrides' tag in my App.js ...

javascriptcssreactjsmaterial-ui

Use Html.ActionLink to trigger events in various sections of the code

I'm attempting to create an ActionLink that will trigger an action in a different section of the code. Here is what I have so far: <div class="col-md-4"> @Html.ActionLink("Click to Perform Action", "Action", "SomeController") </div> ...

htmlasp.net

Struggling to remove the image tag from the jQuery ajax response

My web app is designed to send an ajax post request to a PHP script, which then returns a chunk of HTML data. This HTML includes an image and a table of information. The challenge I'm facing is how to extract the image from the rest of the HTML so tha ...

phpjavascriptjqueryhtmlajax

Is it possible to stream audio and video independently within the same video file?

<video id="video1" width="320" height="176" controls="controls"> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.m4a" type="video/m4a"> </video> I am looking to enhance this video by incorporating an audi ...

javascripthtmlcssaudiovideo

The Handsontable popup autocomplete editor is unfortunately truncated by the horizontal scrollbar

I have implemented an autocomplete feature on all columns in my project. However, I am facing an issue where the autocomplete editor gets cut off by the horizontal scrollbar. You can see the problem demonstrated in this jsfiddle link. Here is some code re ...

javascriptjquerycsshandsontable

What is the best way to save the toggleClass value of various selectors along with their corresponding classes in localStorage?

I've been attempting to preserve the toggled class of multiple elements using local storage or cookies in order to maintain the toggled class after a page refresh. Despite trying various solutions such as js cookie and other tutorials, I've had n ...

javascriptjqueryhtmlcookieslocal-storage

What is the correct way to set up favicon.ico in a Vue.js webpack project?

After setting up my Vue webpack project with vue-cli, I encountered an issue. First, I created the project using the command vue init webpack myproject. Then, to run the project in development mode, I used: npm run dev However, upon running the project, ...

htmlvue.jswebpackfavicon

You cannot embed a YouTube video using its iframe code in an HTML document, according to YouTube's guidelines

I attempted to include a YouTube video in my HTML code, but it kept showing the message "YouTube won't allow connection." Here is the code I used: <center><iframe src="https://www.youtube.com/embed/fcPOsBCwyu8" frameborder="0&q ...

htmlyoutubeembedx-frame-options