Leveraging the power of a grid system

.containers {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 10rem auto 10rem 10rem;
}

.top-section {
  background: #9575cd;
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
<div class="containers">

  <section class="top-section">
    <h1>Zodiac Signs</h1>

  </section>
</div>

Here is a screenshot from Chrome tools

My issue is that after implementing the codes above, my website appears to have an unresponsive design despite using grid styling. I'm not sure where I'm going wrong.

htmlcssresponsive-designcss-grid

Answer №1

Your coding technique appears to be solid, and there is no need for additional adjustments to make it responsive. You are effectively creating a grid with 4 rows where the height of three rows is set to `10rem` and one row is set to `auto`. Additionally, you are dividing the layout into 12 equal columns, with a header that spans from the first to the last column. If you wish for the header to fit within the `.wrappers` container, simply adjust the `header` properties as shown below:

.wrappers {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 10rem auto 10rem 10rem;
  height: 40rem;
}

.header {
  background: #9575cd;
  grid-column: 1/-1;
  grid-row: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
<div class="wrappers">
  <header class="header">
    <h1>Earthly Branches </h1>
  </header>
</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

Can you recommend a resource that provides a comprehensive breakdown of which CSS elements are compatible with each internet

Can anyone recommend a comprehensive resource, such as a book or website, that provides a complete list of CSS elements and their compatibility with the major web browsers? Specifically, I am interested in information regarding compatibility with IE8 and F ...

htmlcssbrowsercross-browser

sequential organization paired with double-column format

Looking for a CSS-only method to arrange an ordered list (ol) into two columns if it exceeds the height of its container. The number of items in the list can vary, and so can the height of the container. When attempting to set li with properties like widt ...

htmlcsshtml-listscss-multicolumn-layout

What adjustments do I need to make to my code?

In my current setup, when I click on a label within a sub-level element, everything works perfectly as expected. However, if I directly click on a checkbox (not the label), the checkbox should be checked or visually represented with a filled check mark. Co ...

javascriptjqueryhtmlcsscheckbox

Utilizing Jquery to toggle collapsed divs with a click event

Here is how my HTML appears: <h3><a href="#" title="story title">Story Title</a> <img class="expandstory" src="/images/plus.png" /></h3> <div class="description">Short description about the story</div> <h3 ...

jqueryhtml

What is causing the discrepancy in functionality between these two HTML/CSS files with identical code?

In this codepen, you'll find the first example: Subpar Pen: https://codepen.io/anon/pen/jGpxrp Additionally, here is the code for the second example: Excellent Pen: https://codepen.io/anon/pen/QqBmWK?editors=1100 I'm puzzled why the buttons l ...

javascripthtmlcss

anchor text substitution for hyperlink

I currently have a code snippet that replaces a span class with a hyperlink. The hyperlink contains an abbreviation, and the alternate text for the link also includes the same abbreviation. Now, I am looking to replace the second abbreviation in the alte ...

javascripthtmlaliasalternate

Resetting the Countdown Clock: A Transformation Process

I have implemented a countdown timer script that I found online and made some adjustments to fit my website's needs. While the current setup effectively counts down to a specific date and time, I now require the timer to reset back to a 24-hour countd ...

javascriptjqueryhtmlcsstimer

The Pop up does not appear outside the boundaries when implementing column resizing in PrimeNG Table

I am currently integrating PrimeNG components into my Angular 5 project. On the landing page, I have specific requirements such as column resizing and filter pop-ups. The pop-up displays correctly on the table without using the pResizableColumn class. How ...

cssangularprimengprimeng-turbotable

Whenever I try to use a component again, the CSS styling I applied to it doesn't show up

In my attempt to understand a puzzling occurrence, please bear with me as the details may be a bit messy. I have created a Header Component that occupies the entire viewport and includes a NavigationBar Component. The Header Component functions perfectly ...

cssreactjscomponentsreact-bootstrapnavigationbar

What is preventing me from adding a margin to the div directly? Why must I apply a margin to the child in order to affect the div's margin

I've encountered a strange situation with 2 fixes that seem rather unusual to me. 1: By removing the #MARGIN-30 tag and deleting the #Nav-bar tag under margin-3, the issue resolves itself when I reapply those tags. 2: Another fix is achieved by addi ...

cssmargin

Adjusting the size of a division element to match the dimensions

Currently, I am still in the process of finalizing the remainder of the page, but I have encountered a minor issue. The problem lies in my image div not matching the height of the container. Although the image itself is the correct size, the image div appe ...

htmlcssfrontend

Modify the CSS styles of inner elements dynamically

Within my code, I have implemented a SplitPane and included a CSS file that contains the following styling rules: .split-pane > .split-pane-divider { -fx-padding: 0 0 0 1; -fx-background-color:-fx-background; } However, during runtime, I e ...

javacssjavafx

What is the best way to minify and concatenate multiple CSS files only after converting SCSS to CSS with Gulp?

When attempting to convert my scss files to css files using gulp, I encountered an issue. After writing the scss code, it is easily converted to css. However, I wanted to minify this css and save it in a different folder called 'min'. Within the ...

javascripthtmlcsssassgulp

Using automatic margins with tabs in the latest version of Bootstrap, known as Bootstrap

Currently exploring Bootstrap 5 and still getting the hang of it - so please bear with me if this question seems a bit rudimentary! I've been experimenting with tabs to create tabbed panes of local content. I've followed the code provided in the ...

csstabsautomarginsbootstrap-5

Customize the focus color of mat-label within a mat-form-field in Angular

Within my mat-form-field, I have a mat-chip-list set up similar to the example provided in this link. When I click inside the field, the mat-label and what appears to be the border-bottom (not entirely sure) change color when focused. How can I customize t ...

htmlcssangularangular-material

Using Django templating, you can incorporate other templates with the `

Check out my Directory Tree. The structure of the directory is as follows: {% load static %} <!DOCTYPE html> <html lang="en"> {% include 'weapons/head/head.html' %} {% include 'weapons/body/body.html' %} </html ...

htmldjangodjango-templates

Need jQuery solution for changing CSS in numerous locations upon hover

Currently, I am working on a WordPress website and I am trying to figure out how to change the CSS color of a side navigation element when a remote image is hovered over. In a typical scenario, I would accomplish this using CSS by assigning a hover class ...

javascriptjquerycss

Using JavaScript/jQuery to implement a mouseover effect with a delay

I'm struggling with a code that reveals hidden divs after a slight delay on mouseover. The issue I'm facing is that I lack expertise in CS, and within that code, there are elements as follows: $(document).ready(function() { var timer; var ...

javascriptjqueryhtmlcssmouseover

iOS 8: mysterious void found at the bottom of the Safari home screen page in full screen mode

Hello everyone, I hope you can assist me with a dilemma I am facing. Despite being a long-time reader of this forum, this is my first time posting here. I have searched extensively online for solutions to my issue but have not found anything recent or effe ...

javascripthtmlios8fullscreenstatusbar

The subsequent menu selection will be based on the chosen menu value

I am attempting to accomplish the following: https://i.sstatic.net/JffUWC02.png Essentially, I need a select options menu with labels where selecting an option will display a corresponding value. These values should then become labels for a second selec ...

javascripthtmltypescriptnext.js