Significant challenges with the CSS grid system

I'm brand new to the world of programming and I'm currently attempting to recreate this webpage layout using HTML & CSS: Click here for desired look. My approach so far has been utilizing CSS grid, and while I grasp the concept, I'm facing challenges in implementing it on my own page:

  .wrapper {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  grid-template-rows: 1.1fr 1.8fr 0.1fr;
  grid-template-areas: "header header" "content content" "footer footer";
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  background-color: #fff;
}

.wrapper>div {
  padding: 1em;
}

.mainheader {
  grid-area: header;
  width: 70%;
  background-color: #fff;
}

.content {
  grid-area: content;
  width: 40%;
  font-family: Trebuchet MS;
  background-color: #fff;
  color: #000;
}

.mainfooter {
  grid-area: footer;
  background-color: #854242;
  width: 40%;
  border-radius: 25px;
  padding: 20px;
  width: 800px;
  height: 30px;
  li {
    display: inline;
  }
  #h1,
  h2 {
    color: #854242
  }
  #content {}
  #footer1 {
    background-color: #999999
  }
  #footer2 {
    background-color: #999999
  }
<body>

  <div class="wrapper">
    <div class="mainheader">
      <header>

        <h1>Web Development for Mobile Devices</h1>
        <h2>Responsive Web Design</h2>

        <img src="images/header.jpg" alt="Header Image" width="960px" />

        <nav id="mainmenu">
          <ul>
            <li><a href="index.htm" title="Homepage">Home</a></li>
            <li><a href="#" title="Page Two">Page 2</a></li>
            <li><a href="#" title="Page Three">Page 3</a></li>
            <li><a href="#" title="Page Four">Page 4</a></li>
            <li><a href="http://www.example.com" title="Example Link">Example</a></li>
          </ul>
        </nav>

        <div id="search">
          <form>
            <input type="text" name="searchstring" id="searchstring">
            <input type="submit" value="Search" id="searchbutton">
          </form>
        </div>
        <!-- End of search -->

      </header>
    </div>

    <div class="content">
      <section>
        <h2>Box 1</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        </p>
        <p>
          More dummy text for illustration purposes.
        </p>
        <footer id="footer1">
          <p>
            This section should be at the start to the left.
          </p>
        </footer>
      </section>

      <section>
        <h2>Box 2</h2>
        <p>
          Another paragraph of filler text goes here...
        </p>

        <footer id="footer2">
          <p>
            This section should be at the start to the right and below.
          </p>

        </footer>

      </section>
    </div>


    <div class="mainfooter">
      <footer>
        <p>Footer - Web Development for Mobile Devices</p>
      </footer>
    </div>

  </div>

</body>

What am I missing here? Should I be tackling this differently, possibly with bootstrap instead? <-- Please note this is a very early draft -->

htmlcsscss-grid

Answer №1

One example is where I set the display of .wrapper to block and utilized 2 inline blocks for creating boxes with added margin. The adjustment needed would be on other parts where grid properties were previously used.

.wrapper {
  display: block;
  grid-template-columns: 0.9fr 1.1fr;
  grid-template-rows: 1.1fr 1.8fr 0.1fr;
  grid-template-areas: "header header" "content content" "footer footer";
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  background-color: #fff;
}

.wrapper>div {
  padding: 1em;
}

.mainheader {
  grid-area: header;
  width: 70%;
  background-color: #fff;
}

.content {
  /*grid-area: content;*/
  width: 100%;
  font-family: Trebuchet MS;
  background-color: #fff;
  color: #000;
}
.content section {
width: calc(50% - 10px);/*for margin*/
display: inline-block;
vertical-align: top;
margin: 0px 3px;
}

.mainfooter {
  grid-area: footer;
  background-color: #854242;
  width: 40%;
  border-radius: 25px;
  padding: 20px;
  width: 800px;
  height: 30px;
  li {
    display: inline;
  }
  #h1,
  h2 {
    color: #854242
  }
  #content {}
  #footer1 {
    background-color: #999999
  }
  #footer2 {
    background-color: #999999
  }
<body>

   <div class="wrapper">
    <div class="mainheader">
      <header>

        <h1>Web Development for Mobile Devices</h1>
        <h2>Responsive Web Design</h2>

        <img src="images/header.jpg" alt="Header Image" width="960px" />

        <nav id="mainmenu">
          <ul>
            <li><a href="index.htm" title="Home Page">Home</a></li>
            <li><a href="#" title="Page Two">Page 2</a></li>
            <li><a href="#" title="Page Three">Page 3</a></li>
            <li><a href="#" title="Page Four">Page 4</a></li>
            <li><a href="http://www.example.com" title="Example Site">Example</a></li>
          </ul>
        </nav>

        <div id="search">
          <form>
            <input type="text" name="searchstring" id="searchstring">
            <input type="submit" value="Search" id="searchbutton">
          </form>
        </div>
        <!-- End of search -->

      </header>
    </div>

    <div class="content">
      <section>
        <h2>Box 1</h2>
        <p>
          This is a sample text for Box 1.
        </p>
        <p>
          More text for Box 1.
        </p>
        <footer id="footer1">
          <p>
            This section appears from start to left, then on top.
          </p>
        </footer>
      </section>

      <section>
        <h2>Box 2</h2>
        <p>
          This is some sample text for Box 2.
        </p>

        <footer id="footer2">
          <p>
            This section is from start to right, then below.
          </p>

        </footer>

      </section>
    </div>


    <div class="mainfooter">
      <footer>
        <p>Footer - Web Development for Mobile Devices</p>
      </footer>
    </div>

  </div>
</body>

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

Troubleshooting issue with CSS in Django_tables2

Working with the django_tables2 plugin for the first time has been an interesting experience. I followed the installation and quick start guide provided in their documentation. After pip-installing django-tables2, adding 'django_tables2' to my ...

pythoncssdjango

What could be causing the horizontal scroll bar to appear on the Web Page, even though it should fit perfectly on

I've designed this website to perfectly fit within the browser window, but for some reason, there's a horizontal scrollbar appearing. When a site fits properly, there shouldn't be a need for a horizontal scroll bar. I double-checked my zoom ...

htmlcssbootstrap-4

Height not being generated by Div element

I am encountering an issue with a div element that contains an h2 and three nested div elements. Despite not explicitly setting a height for the container div, it is not expanding to accommodate the varying heights of the inner divs. This problem is causin ...

csshtmlheight

I am struggling to save the value from my input field into the app.component.ts file

Having some trouble storing an input from my form into a property. After submitting, the console.log is showing undefined in the console. I've experimented with different variations, but none seem to be working as intended. <form> <input #i ...

htmlangular

Disappearing table borders in print view on Firefox

I have been working on creating a printable table that displays correctly in Chrome. However, when viewed in Firefox, the table borders are not showing up. <body> <table> <tbody> <tr> ...

htmlfirefoxprinting-web-page

Using JQuery and/or Selenium/WebDriver to ascertain the visible color of elements on a webpage

Is there a way to accurately determine the visible color of page elements? When using JQuery, I can retrieve the background-color of an element with the following code: $('#foo').css('background-color'); However, the background-color ...

jqueryhtmlcsscolorsselenium-webdriver

Grid X Transformation 3: Dynamically alter grid cell background based on value (no need for CSS classes)

While working with GXT2, it was possible to dynamically change a cell's background color using the GridCellRenderer's render method. However, in GXT3, this feature no longer exists. The suggested approach is to utilize a GridViewConfig and overri ...

cssgxt

CSS can always surprise with its unexpected animations

Currently developing a static website with CSS animations: * { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease- ...

htmlcssanimation

Place a fresh banner on top of the Ionicon icon

I recently started using Ionicons from and I am not too familiar with css. My question is, can a banner that says 'new' be overlaid on the top right corner of the Icon? Is there a simple or standard method to achieve this? (whether it's an ...

htmlcssfaviconionicons

Intermittent Z-index conflicts in need of a solution - seeking guidance

Is there a way to make the h1 heading and img image elements appear on top of the opaque div they are enclosed in? I want them to look unaffected by the transparency of their parent div. Here is a Fiddle demonstrating my issue: <div id="main"> ...

htmlcsslayout

The AJAX functionality seems to have broken following the switch from php5 to php7

When I initially wrote my code in php5, the index page would make an ajax call to check if $_SESSION['user'] was stored. If a session existed, the user's information would be displayed; otherwise, the page would redirect to the login page. H ...

phphtmlarraysajaxsession

Unable to navigate through images on Bootstrap Carousel using previous and next buttons

Despite following tutorials and examining the HTML code on bootstrap, I'm facing issues while trying to create a carousel. I believed that everything was done correctly, but when I click on the next button, nothing happens. <!DOCTYPE html> < ...

javascripthtmlcssbootstrap-4carousel

Tips on displaying the file names when uploading multiple images

In this Vue.js code snippet, I have implemented a feature for multi upload using a single input field. While the functionality works fine, there is an issue with displaying the number of uploaded files instead of their names. I would like to show the actu ...

javascripthtmlvue.jsvuejs2

Floating multiple block-level elements within an <li> tag in HTML allows for greater control over the layout and

I am facing a complex issue that requires attention. Let me explain the situation: There is an unordered list consisting of list items displayed vertically with alternating background colors, all having the same width within a fixed-width div. Some list i ...

htmlcssblockhtml-listsfixed-width

Access data from an array using xpath in Chrome Console

Currently, I am utilizing the Google Chrome Console to extract an array of elements that are tagged with the class name attrValue. This is the line of code I am using: $x('//*[@class="attrValue"]'); Below is the output of my code: <td class ...

htmlgoogle-chromexpathgoogle-chrome-devtools

Creating a responsive container in Bootstrap that adjusts height dynamically, featuring a text input box positioned at the bottom

I am currently using Bootstrap 4 to design a desktop chatbot inspired by Google's Bard. My goal is to have a container that spans the height of the screen, with the text input located at the bottom of the container. Additionally, I want the container ...

htmlcssbootstrap-4

Unusual CSS anomalies encountered on iPhone devices

Having an issue with the animation on my homepage where the logo spins into place. It works fine on desktop and in Chrome and Firefox mobile simulators, but on actual phones it rotates an additional 90 degrees. Included are screenshots from the Firefox mob ...

cssmobilesafarimobile-safari

Using jQuery's .html() method will remove the selected attribute from the dropdown menu option

When generating HTML dynamically, a select element is included. After choosing an option inside it, everything works fine. For example: <div id="test"> <select> <option value="1">1</option> <option value="2" selec ...

jqueryhtml

Utilize Python and BeautifulSoup for parsing HTML with multiple tags and classes

I am currently attempting to navigate through a complex HTML structure. Here is the snippet of the HTML code: <div class="example one"> <ol class="example two"> <li class="example three"> My object ...

pythonhtmlbeautifulsoup

Unable to see or play local mp4 file in Ionic iOS application

I am facing an issue with my Ionic app where I am trying to show a video playing in the background. The Jaeger25 HTMLVideo plugin works perfectly for Android, but when it comes to iOS, the video simply refuses to play. The video file is located in the www/ ...

javascriptioshtmlionic-frameworkhtml5-video