Grid items displaying incorrectly due to text alignment issues

I'm facing an issue where I need to separate text and the money part, and also align the text in a way that when viewed in smaller text sizes, the money part moves to the next line.

.outdoor-card {
  display:flex;
  flex-wrap: wrap;
  width: 100%;
  height:auto;
  justify-content:center;
  align-items: center;
  border-radius: 10px 10px 10px 10px;
  position:relative;
  line-height: 1.7;
}
.outdoor-card img {
  /* TO COMPLETE: MODULE_OUTDOORS_GRID */
  /* 1. Fill in the necessary properties. */
  width: 100%;
  height: 25vh;
  border-radius: 10px 10px 0px 0px;
}
 <div class="container">
    <div class="content">
      <!-- TO COMPLETE: MODULE_OUTDOORS_GRID -->
      <!-- 1. Create the grid of outdoor activities by adding child elements as needed. -->
      <div class = "row">
        <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-4">
          <a href = "resort/index.html">
            <div class = "outdoor-card border bg-light">
              <div class = "outdoor-card img-responsive">
                <img src ="/assets/outdoor/resort.jpg" alt = "tower.jpg">
              </div>         
                <p>Resort</p>
                <p>&#8377;1,200 </p>
            </div>
          </a>
         </div>
     
        </div>
        <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-4">
         <div class = "outdoor-card border bg-light">
           <div class = "outdoor-card img-responsive">
             <img src ="/assets/outdoor/mount.jpg" alt = "Skiing.jpg">
           </div>
             <p> Skiing</p>
             <p>&#8377;1,900 </p>
         </div>
        </div>
      </div>
      <div class = "row">
       <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-4">
        <div class = "outdoor-card border bg-light">
          <div class = "outdoor-card img-responsive">
            <img src ="/assets/outdoor/canopy.jpg" alt = "tower.jpg">
          </div>         
            <p>Canopy</p>
            <p>&#8377;1,800 </p>
        </div>
       </div>
       <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-4">
         <div class = "outdoor-card border bg-light">
           <div class = "outdoor-card img-responsive">
             <img src ="/assets/outdoor/beachside.jpg" alt = "canopy.jpg">
           </div>
           <p mb-0>Beach Getaway</p>
           <p>&#8377;2,200 </p>
         </div>
        </div>
     </div>
    </div>
  </div>

Can someone assist me with this? The text and money part are centered as expected, but I'm struggling to separate them.

htmlcssbootstrap-4

Answer №1

If you need any clarification on the code snippet provided below, please feel free to reach out.


<div class="adventure-card  border bg-light">
  <div class="adventure-card img-responsive">
    <img src="/assets/adventures/resort.jpg" alt="tower.jpg" />
  </div>         
  <div class="text-center">
    <h5 mb-0>resort</h5>
    <span>&#8377;1,200</span>
  </div>
</div>

Answer №2

Implement the following code snippet:

 <p style="padding-left:20px">&#8377;1,200 </p>

Include inline CSS within your currency paragraph tag.

Answer №3

To change the layout of your elements, include "flex-direction: column;" in your CSS:

.adventure-card {
  display:flex;
  flex-wrap: wrap;
  width: 100%;
  height:auto;
  justify-content:center;
  align-items: center;
  border-radius: 10px 10px 10px 10px;
  position:relative;
  line-height: 1.7;
  flex-direction: column;
}

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

"Efficiently trimming off any text past the final character using

I have a variable in Smarty named {$url} which contains the following URL: $url = https://www.example.com/?parameter=hello:world:itsme I need to remove everything after the last ":" in the URL. The desired output is: $result = https://www.example.com/? ...

phphtmlurlsmarty

The pseudo class remains unaltered

I've been experimenting with creating pop up links that appear next to a button when the button is clicked. So far, I've tried using various CSS selectors like :active and :hover without success. Additionally, I attempted to use selectors such a ...

htmlcsscss-selectors

Highlighting table rows using jQuery on click and restoring them on change by toggling between alternating

Hey there, I'm a newbie to jQuery and this is my first post. Spent some time searching but couldn't find exactly what I needed. I'm trying to have alternating row colors in a table; one class as NULL/empty and the other as alt. My jQuery sc ...

phpjqueryhtmlcss

Button located beneath or above each individual image within the *ngFor loop

With the *ngFor loop, I am able to populate images but now I want to include a button below or on each image. Unfortunately, my CSS knowledge is limited. Below is the code I have: HTML Code <div class="container"> <div ...

cssangular

Placing a div with position:absolute inside another div with position:absolute and turning them into position:fixed

HTML <div class="box1"></div> <div class="box2"> <div class="box3"></div> </div> CSS Properties of box1, box2 and box3 are: box1 { position: absolute; z-index: 100; background-color: rgba(39, 39, 39, 0.3) ...

javascriptjqueryhtmlcss

2-panel accordion interface

Hello there, I've encountered a problem that seems to be related to CSS. Here is the project I'm currently working on: My main focus is on the News accordion menu. The goal is to display a small image (50x50 with padding) next to a large headlin ...

jquerycsshtmlaccordion

Unable to update content within the `style` attribute when the HTML is stored in a variable

I am attempting to make changes to the style html - specifically by replacing a string, but unfortunately it is not functioning as expected. I am struggling to obtain the final updated html. Below is my attempt: var html = "<style>043BF83A8FB24A418 ...

javascriptjqueryhtmlregex

Implementing Custom Font Awesome Icons in Your Angular Project

I recently upgraded to a fontawesome subscription with a paid plan and have successfully created some custom icons. Now, I'm looking to integrate these icons into my angular app. Here are the dependencies listed in my package.json file: "@fortawe ...

javascriptcssangularfont-awesome

The click event will not be triggered if the element is removed by my blur event

My dropdown list is dynamic, with clickable items that trigger actions when clicked. Upon focus, the list displays suggested items When blurred, the list clears its contents The issue arises when blur/focusout events are triggered, causing my element to ...

javascripthtmldom-events

Resizing a floated div causes the image to break out

My webpage has a container div with two floated left divs inside, positioned side by side. The right div contains a YouTube video and an image. However, when I resize the page, the video and picture flow out of the containing floated div instead of dropp ...

htmlcss

What is the best way to locate a div element with a specific style?

What is the method to locate a div element by its style? Upon inspecting the source code in IE6, here is what I find: ...an><div id="lga" style="height:231px;margin-top:-22px"><img alt="Google"... How can this be achieved using JavaScript? ...

javascripthtml

The system has detected an invalid NSStringEncoding value of 0x8000100 while converting NSAttributedString to HTML

I encountered a warning in the debugger while using XCode: It detected an incorrect NSStringEncoding value of 0x8000100 when converting an NSAttributedString to html data. I am unsure of what is causing this issue or how to resolve it. Below is the code sn ...

htmlnsattributedstring

The menu will expand to full width, with each list item evenly sharing the width to achieve full coverage

I am currently facing an issue with my horizontal menu on my website. I want the menu to stretch across the full width of the site, but I can't seem to get it right. Here is the code for my menu: <nav> <ul id="menu" class="menu"> &l ...

htmllistcssresponsive-design

What is the best way to ensure that all components within a Container automatically inherit its calculated width?

Check out my tab panel setup on Sencha fiddle. The buttons are dynamically added to a tabs container with a layout of hbox within a vbox. The width of the tabs container is determined by the flex property. I attempted to set each button's width to &a ...

javascripthtmlcssextjsextjs4

Vertical Alignment Challenge in Bootstrap Container

I'm struggling with formatting my simple website. I have a navbar, footer, and a centered container where I want to display text and buttons. However, I can't seem to get the elements to appear on separate lines - I want the text on one line and ...

htmlcssbootstrap-4

Creating a vertical gradient that repeats horizontally using CSS

Looking for a creative solution using only CSS to achieve a specific background pattern. I envision a gradient that stretches horizontally and repeats vertically with gaps in between each repetition. Here's an example: https://i.sstatic.net/7DLf1.pn ...

cssgradient

Adjust the size of h1 headings to be smaller than 768px within the

My goal is to have an h1 header within a row, with font awesome mark quotes displayed on the left and right. I am attempting to resize it once the screen width goes below 768px. Here's what I have so far: @media screen and (max-width: 768px) { h1 ...

twitter-bootstrapcss

Developing an interactive website utilizing AngularJS, WCF Service, and SQL Server

Exploring the possibilities of creating a web application, I stumbled upon AngularJS. With plans to incorporate WCF Service and SQL Server into my project, I am intrigued by what these technologies can offer. I want to ensure that AngularJS aligns with my ...

javascriptjqueryhtmlwcfangularjs

Retrieve the text input from its respective radio button

There are two radio buttons, each accompanied by an input text field. When a user selects a radio button, they can also enter some corresponding text. My inquiry is: What is the best method to retrieve the entered text for the selected radio button? ...

javascriptjqueryhtml

Overlapping background images of flex elements in Safari

This webpage is designed as a single-page layout using Gatsby: <div className='mainContent'> <section className='contentSection'> <h1 className='header'>Heading</h1> <div c ...

javascripthtmlcssflexboxgatsby