I am having difficulty organizing my text into two grid columns and aligning it in the center

.hero {
  display: grid;
  grid-template-columns: repeat(2, 33.45rem);
  grid-template-rows: 12.5rem;
  border-bottom: .05em solid #05d31f;
  width: 69.8rem;
  height: 16.5rem;

}

.hero-title {
  grid-row-start: 1;
  grid-column-start: 1;
}

.hero-title h2 {
  margin: 0;
  line-height: 0.2rem;
  letter-spacing: 0.3rem;
}

.hero-text {
  grid-row: 1;
  grid-column-start: 1;
  grid-column: span 2;
  align-items: center;
}

.hero-text p {
  font-size: .7rem;
  line-height: 1.5rem;
  letter-spacing: 0.2rem;
}
<div className="hero">
      <div className="hero-title">
          <h2>FrontEnd Development with CLASS</h2>
      </div>
      <div className="hero-text">
          <p>
          I am a Front End Web developer with a passion for 
          building scalable, maintainable, and accessible 
          web applications. I have a strong background in
          HTML, CSS, Javascript, and REACT. I am always looking
          for new challenges and
          opportunities to grow and learn.
          </p>
      </div>
</div>

I am attempting to center the text within my grid columns, but struggling with making it span both columns. Do I need to use positioning? I've experimented with options like align-items: width: 100% and specifying width and height.

htmlcssreactjs

Answer №1

Consider adopting this strategy:

.hero {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  border-bottom: 0.05em solid #05d31f;
  width: 70%;
  margin: auto;
  padding: 1rem;
}
.hero-title,
.hero-text {
  text-align: left;
}
.hero-title h2 {
  margin: 0;
  line-height: 1.5rem;
  letter-spacing: 0.1rem;
}
.hero-text p {
  font-size: 0.9rem;
  line-height: 1.5rem;
  letter-spacing: 0.1rem;
}
<div class="hero">
  <div class="hero-title">
    <h2>FrontEnd Development with CLASS</h2>
  </div>
  <div class="hero-text">
    <p>
      I am a Front End Web developer with a passion for 
      building scalable, maintainable, and accessible 
      web applications. I have a strong background in
      HTML, CSS, Javascript, and REACT. I am always looking
      for new challenges and opportunities to grow and learn.
    </p>
  </div>
</div>

Upon reviewing your situation once more, the following statement caught my attention (was not very clear to me):

I am trying to display the text in the middle of my grid columns; but I can't get it span both columns; do I need to use positioning ?

.hero {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  border-bottom: 0.05em solid #05d31f;
  width: 70%;
  margin: auto;
  padding: 1rem;
}

.hero-title,
.hero-text, {
  text-align: left;
}

.centered-text {
  text-align: center;
  color: #05d31f;
}

.hero-title h2 {
  margin: 0;
  line-height: 1.5rem;
  letter-spacing: 0.1rem;
}

.hero-text p {
  font-size: 0.9rem;
  line-height: 1.5rem;
  letter-spacing: 0.1rem;
}

.centered-text {
  grid-column: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="hero">
  <div class="centered-text" span-columns>
    <p>
      I am trying to display the text in the middle of my grid columns;
      but I can't get it to span both columns; do I need to use positioning? 
      I have tried using align-items: width 100% and also making it a certain width and height.
    </p>
  </div>
  <div class="hero-title">
    <h2>FrontEnd Development with CLASS</h2>
  </div>
  <div class="hero-text">
    <p>
      I am a Front End Web developer with a passion for 
      building scalable, maintainable, and accessible 
      web applications. I have a strong background in
      HTML, CSS, Javascript, and REACT. I am always looking
      for new challenges and opportunities to grow and learn.
    </p>
  </div>
</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

Endless Loop Caused by Material-UI Data Grid's onSortModelChange Event

I have been referring to the Sort Model documentation (https://material-ui.com/components/data-grid/sorting/#basic-sorting) and following the instructions for using sortModel and onSortModelChange. Despite this, I am encountering an infinite loop immediate ...

reactjsmaterial-uinext.js

The scrolling function of the jQuery UI select menu is not working properly on the Android browser

I am currently developing a mobile application that utilizes the jQuery UI select menu. The functionality works well, but I have encountered an issue with certain drop downs being too long to display properly. While my PC shows scrollable floating divs as ...

androidcssjquery-uihtmloverflow

What is the best way to send FormData from a React JS axios post request to a Node server?

I am facing an issue where the form data is not reaching the node server even though it shows in the network payload at the time of request. Below are the snippets from different files involved in the process. let formData = new FormData(); // fo ...

javascriptnode.jsreactjsmongodbexpress

Configuration options for Path Aliases in TypeScript

In my Next.js project, I am utilizing TypeScript and have organized my files as follows: |-- tsconfig.json |-- components/ |---- Footer/ |------ Footer.tsx |------ Footer.module.sass My path aliases are defined as:     "paths": {       ...

reactjstypescriptnext.js

ReactJS encountered an error of type ERR_INVALID_ARG_TYPE

Hello there! I recently purchased a template from ThemeForest and everything was working perfectly with the previous version. However, upon updating to the new version, I encountered an error that looks like this: > TypeError [ERR_INVALID_ARG_TYPE]: Th ...

javascriptreactjs

Unable to view the most recent state

Looking at the code below: export function loginUserRequest() { console.log('ACTION INITIATED'); return { type: LOGIN_USER_REQUEST, }; } we can see the matching reducer: export default function loginReducer(state = initialState, acti ...

javascriptreactjsreduxreact-reduxredux-form

Reduce the use of if statements

Is there a way to optimize this function by reducing the number of if statements? The currentFeatures are determined by a slider in another file. The cost is updated if the currentFeatures do not match the previousFeatures, and if the user changes it back ...

javascriptreactjstypescript

Step-by-step guide to creating a dynamic button that not only changes its value but also

I am trying to implement a translation button on my website that changes its value along with the text. Currently, I have some code in place where the button toggles between divs, but I am struggling to make the button value switch as well. Given my limit ...

javascriptjqueryhtmlcss

Blurry text can be a common occurrence when applying the transform(-50%,-50%) function to center

I have found a way to center a section using the following code: <div class="clock-section"> <h5 id="clock-title">We will be arriving soon</h5> <hr class="hr" id="cdhr"> </div> Here is ...

htmlcsstransformblur

Using jQuery to make a PNG image draggable and allow it to overlap with

Can jQuery's Draggable be used with an overlapping PNG image (not as a background image, but for printing purposes)? I attempted using the CSS style "pointer-events: none," however this solution does not function correctly in Internet Explorer. <d ...

jquerycssuser-interfacepngdraggable

A guide on extracting data from a Script element in an HTML file and saving it to a CSV file using Python Selenium

Looking for help with optimizing a Python script that extracts data from the Script tag on an HTML web page. The current output saved in a CSV file is not meeting my requirements: (1) the format is incorrect, and (2) there is unnecessary content included. ...

pythonhtmlseleniumcsvweb-scraping

jQuery width property does not seem to be functional on menus that do not contain any dropdown

I am currently working on creating a menu that displays arrows underneath the items when hovered over or when the .active class is added to the menu. Everything is working fine, except for the fact that it only works on menus with drop-downs and the child ...

javascriptjqueryhtmlcss

Tips for looping through a list in React components?

Currently, I have a function that filters specific cities into the "citiesList" array and then attempts to map them into a dropdown component. However, while the filtering part is successfully executed, the mapping part seems to be failing. citySearched ...

reactjs

Column div being obscured by footer

My footer is causing overlap issues with the div above it on my mobile website. Here's a visual representation: Current view on my phone: https://i.stack.imgur.com/RpvWM.png Desired view: https://i.stack.imgur.com/KHVcm.png The code for the are ...

htmlcss

Utilizing AJAX to showcase individual PHP files

My PHP elements are not being displayed in the code, and I need to figure out why. Below is the HTML code I am currently using: <div class="tablocation"> <ul class="css-tabs"> <li><a class="current" href="/wp-content/themes ...

phpjqueryhtmlajax

Wheelnav.js implementing a dynamic bouncing animation

I'm currently in the process of working on a pie menu with wheelnav.js and everything is going smoothly so far. However, I can't seem to find any information in the wheelnav.js documentation on how to eliminate the bouncing effect when a menu cho ...

javascripthtmluser-interfacewheelnav.js

The dynamic design of the webpage allows for a fluid layout, where the navigation bar smoothly adjusts its position when

I anticipate receiving criticism from certain users for not conducting enough research. However, I have dedicated two days to this issue and the lack of guidance is starting to frustrate me. Therefore, I offer my apologies if this question has already been ...

csshtml

Discovering the largest element within a group to establish the height for the rest

There is a component mapping card elements that look like this: https://i.stack.imgur.com/CktsE.png The topmost, leftmost card appears to be missing some height compared to others. Is there a way to determine the height of the tallest components and then ...

cssreactjsnext.jstailwind-cssnext.js13

Assistance needed with dynamically resizing a background image

Is there a way to automatically adjust the size of a background image for an element? For instance, I want my links in HTML to have a background image with slanted borders and rounded corners. Usually, you would set the width of the anchor element to fit t ...

javascriptcss

I encountered a "TypeError: Unable to access property 'name' of undefined" error when attempting to export a redux reducer

UPDATE: I encountered an issue where the namePlaceholder constant was returning undefined even though I was dispatching actions correctly. When attempting to export my selector function, I received an error: Here is the component code: import React, { ...

javascriptreactjsreduxjsx