How to have opposite paragraphs on same line closer?

HTML-CSS
1

How to have opposite paragraphs on same line closer?
when I reduce the size of the window is ok but the item and the price are too far away from each other on full desktop view

screenshot
screenshot1262Ă—100 3.45 KB 

<body>
      <div class="menu">      
        <header>
          <h1>...TITLE</h1>
          <p>....SUBTITLE</p>
          <span class="menu-description">...DESCRIPTION</span>
        </header>
        <hr>
        <!--1st section-->
        <main>
          <section>
            <h2>1ST ITEM CATEGORY</h2><img src="..."  />
            <article class="item">
                <p class="product">Eiusmod</p><p class="cost">$16.5</p>
            </article>
            <article class="item">
                <p class="product">Tempor</p><p class="cost">$26</p>
            </article>

and here’s the related CSS:

h1, h2, p {
    text-align: center;
}

.menu {
    width: 70%;
    background-color: #EAF6F6;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    padding: 20px;
}

.product {
    text-align: left;
    width: 75%;
}

.cost {
    text-align: right;
    width: 25%;
}

.item p {
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 5px;
}
2

the problem is the width definition for .product
it says that you want that one element (the first left-hand-side paragraph) to take up 75% of available width space.
Instead of that, use auto for the width and modify the margins if you want to make a specific type of spacing.
You can alternatively look into using CSS flex layout (google for more info).

3

thanks but with width set to auto it created a bigger mess making the cost and product paragraphs aligned vertically in a different way

I added max-width

1 Like
4

Hello!

Give the parent container with the class “.item” the max width in %, how much is depending on how close you want the products and prizes togther. Here I used 75%:

distance
distance1065Ă—207 5.76 KB

Add margin: 0 auto to .item to center the products.

5

I will try it and then I will let you know here

6

I’d suggest using flexbox or grid. They both provide ways of doing space distribution.

7

thanks I tried it, basically it is either more gap that I intend to have in the desktop view or not enough gap in the mobile view between .product and .cost

The goal is to make this online menu similar to a menu you would get physically

I am re-doing the freeCodeCamp projects from Responsive Web Design Certification but giving them my personal twist writing code learnt up to that specific lesson

@lasjorg In this case I am re-doing the Cafe Menu from lesson 2. I will double-check the original project and see how it looks on mobile and desktop because in that case no flexbox and no media queries were used

I think I would need to add a media query to balance the desktop and mobile view gap between .product and .cost

8

I figured as much, but unless you want to practice using inline-block elements and widths (for whatever reason) I still suggest using modern CSS.

There is no reason to use inline-block elements for this layout. The challenge comes before flexbox has been taught so that is probably why it is doing the layout like that, or just to show it. It isn’t bad to know about, but it also isn’t how I would do it if flexbox was an option.

All the inline-block, width, and text-align can be replaced with two lines of CSS on the .item container.

I commented out the CSS that is replaced by flexbox:

/* flexbox */
.item {
  display: flex;
  justify-content: space-between;
}

.item p {
/*   display: inline-block; */
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 18px;
}

/* .flavor, .dessert {
  text-align: left;
  width: 75%;
}

.price {
  text-align: right;
  width: 25%;
} */
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.