Adding a <div> below an <h1> heading within a <section> portion

In my current HTML setup, I have a section structured like this:

.projhero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 24px;
  max-width: 1200px;
  width: 100%;
}

.projcard {
  position: relative;
  height: 350px;
}
<section class="projects projhero" id="projects">
  <h1> Title </h1>
  <div class="card-grid">
    ........
  </div>
</section>

However, the issue I'm facing is that the title appears next to the contents of the div (which contains cards in a grid representing books) instead of appearing at the top as desired when entering the section. I want the grid of cards to be displayed underneath the title.

I attempted various CSS techniques found on platforms like YouTube and chatgpt, but unfortunately, none of them provided a solution to my problem.

htmlcss

Answer №1

Here is a suggestion for you:

.projhero {
  text-align: center;
  min-height: 100%;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 24px;
  max-width: 1200px;
  margin: auto;
}

.projcard {
  position: relative;
  height: 350px;
}


/*testing boxes*/

.box {
  background-color: tomato;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
<section class="projects projhero" id="projects">
  <h1>Title</h1>
  <div class="card-grid">
    <div class="box">Box</div>
    <div class="box">Box2</div>
    <div class="box">Box3</div>
    <div class="box">Box4</div>
  </div>
</section>

Answer №2

To achieve the desired layout, simply include flex-direction: column; in the projhero style

.projhero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  flex-direction: column;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 24px;
  max-width: 1200px;
  width: 100%;
}

.projcard {
  position: relative;
  height: 350px;
  text-align: center;
}
<section class="projects projhero" id="projects">
  <h1> Title </h1>
  <div class="card-grid">
    <div class="projcard">Card</div>
    <div class="projcard">Card</div>
    <div class="projcard">Card</div>
    <div class="projcard">Card</div>
  </div>
</section>

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

Updating the color scheme of the selected nav-item and showcasing the corresponding page in relation to the navbar selection

I have been trying various methods, but I am unable to change the background color of an active navigation item and also display the corresponding page. Important: The jQuery code below successfully changes the background color of the navbar list item. Ho ...

jquerycssnode.jsbootstrap-4ejs

Script modifies div dimensions independently of CSS styling

Recently, I received assistance from this community in creating a script that displays random images from an array within 4 divs. Each image changes upon refresh or with a timer. HTML: <section> <div id="square_1" class='box'> ...

jqueryhtmlcss

Enable vertical scrolling on a container of undetermined height

Can a vertical scroll be implemented on a container with an unknown height using flexbox? The use of max-height is not feasible, as it would limit the height to a specific number that may not work for all screen sizes. Here is a basic example of what is ...

htmlcssflexbox

Mobile Image Sizing with Bootstrap 4 Cards

I am currently developing a responsive web application using Bootstrap 4 and incorporating cards with images on one of the pages. The layout functions properly when resizing the window on desktop view; however, upon viewing it on mobile devices, I noticed ...

htmlcssbootstrap-4

Assigning a class to an li element once the page has finished loading

I am facing an issue with my navigation bar where the links are dynamically loaded from a database using a foreach loop. Although the nav bar is static, I want to apply an 'Active' class to the link when it is currently active. Despite trying to ...

javascriptphpjqueryhtml

Firefox experiencing glitchy rotation in CSS animations

I attempted to create a rotating div using a simple code snippet: <!DOCTYPE html> <html> <head> <style> .spinner { width: 100px; height: 100px; margin: auto; border-radius: 50%; border-bottom: 1px solid #f00; animation ...

htmlcss

Raphael JS Path Animation: Wiping Away

I have successfully created a line animation using RaphaelJS, which can be viewed on this jsfiddle link - http://jsfiddle.net/7n040zdu/. My next challenge is to create an erasing animation that follows the initial one. This erasing animation should mimic t ...

javascriptjquerycssanimationraphael

The issue I'm facing is that the ng-click functionality in Angular JS is not functioning properly when the

Upon loading the page, my JavaScript function creates a tree structure from JSON data and generates a list of anchor tags which look like this: <a ng-click="shareParent(4619)">Some data</a> Despite associating the ng-click directive with the ...

javascripthtmlangularjs

Storing css data for iPhone Facebook application

Currently, I am in the process of developing a webpage specifically for the iPhone Facebook app wall link. Interestingly, when attempting to apply the margin attribute to a div within the webpage, the margin doesn't seem to have any effect when clicki ...

iphonecss

Using DataTable with backend processing

Has anyone successfully implemented pagination in DataTable to dynamically generate the lengthMenu (Showing 1 to 10 of 57 entries) and only load data when the next page is clicked? I'm currently facing this challenge and would appreciate some guidance ...

javascriptjqueryhtmljsondatatables

What is the best way to make the Nav bar overlap instead of shifting content to the right?

Is there a way to open the nav bar and have it overlap on the right without pushing content to the right? I tried experimenting with position and z-index, but it didn't work. Thank you! Link <div id="mySidebar" class="sidebar" ...

javascripthtmlcssbootstrap-4nav

Generating a hyperlink to a specific user ID within a data table

I'm facing an issue with the formatting of my simple table when trying to navigate to user.id. Is there a better approach to this or should I consider moving LinkToUser? All styling has been removed to avoid any conflicts. import styled from 'st ...

javascripthtmlcssreactjsstyled-components

Why must we always begin rotating with 0 in CSS Animation's webkit transform rotate?

Can anyone assist me with this issue? I have created a jsfiddle with an example. In summary, I am trying to rotate an "orange dart" in a circle every time the user clicks on a link. The rotation works fine, but the problem is that the "orange dart" always ...

javascriptjquerycssrotationcss-animations

Event Listener for Spelling Quiz Buttons: Check Correct and Incorrect Answers

I am currently in the process of developing a spelling quiz for a project website using HTML, CSS, and JavaScript. The idea is to present the user with a word that has two missing letters indicated by underscores. The user then selects the correct answer ...

javascripthtmlfunctionbuttonaddeventlistener

Resolving the Issue of CSS Image Overlapping Text on Mobile Devices

I'm facing a CSS issue regarding the positioning of an image on small screens. The image is not responsive and I've tried using position:relative; and adjusting margins manually, but it hasn't resolved the problem. Below is my HTML Code: & ...

cssimagetwitter-bootstrapposition

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

Utilizing JQuery for Redirection

I need help with a specific issue on my website. Visit this link On the webpage, there is a button labeled "get a quote". When users click on this button, I want them to be redirected to google.com. I attempted to achieve this using the following JavaSc ...

htmlcss

Iterate through each image within a specific div element and showcase the images with a blur effect applied

I have a div with multiple images like this: <div class="am-container" id="am-container"> <a href="#"><img src="images/1.jpg"></img></a> <a href="#"><img src="images/2.jpg"></img>< ...

javascriptjqueryhtmlcss

When I incorporate a gradient, the background of my Bootstrap button flickers when clicked

I have implemented Bootstrap 4 with the following code snippet: <!-- Flickers on click --> <a href="javascript:void(0)" class="btn btn-primary">.btn .btn-primary</a> <!-- Does not flicker on click --> <a href="javascript:void(0 ...

twitter-bootstrapcssbootstrap-4

"Selecting elements with CSS using the 'element'

While exploring some websites for studying purposes, I came across this code snippet. .site-header .widget-area span.but As a beginner in CSS, I'm curious to know more about the span.but part. Is it similar to the :not pseudo selector? ...

csscss-selectors