I am experiencing issues with my basic website, specifically with the functionality of my articles not meeting my expectations

Can anybody provide some assistance? I have a total of four articles that I would like to organize in the following manner:

                           first one 
second one                 third one                    fourth one

But for some reason, I am unable to understand what the issue might be?

body {
    background-color: #edefee;
    font-family: serif;
    margin-top: 3rem;
    margin-bottom: 3rem;
    margin-left: 5%;
    margin-right: 5%;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2rem;
}

header > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

nav ul{
    list-style: none;
    text-align: center;
}

nav li {
    display: inline-block;
}

section {
    display: flex;
}

article {
    flex: 1;
}

footer {
    display: flex;
}

footer div {
    flex: 1;
}

The issue is with organizing the articles https://i.sstatic.net/JdUiw.png

Is there anyone who can offer me some help with this matter? I am aiming for a specific result and below is the CSS code that I have utilized.

javascripthtmlcss

Answer №1

If you're looking to create a layout using grid, consider utilizing a tool like which can help you visualize and implement your design easily.

.container {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 0px 0px; 
  grid-template-areas: 
    ". a1 ."
    "a2 a3 a4"; 
}
.a1 { grid-area: a1; }
.a2 { grid-area: a2; }
.a3 { grid-area: a3; }
.a4 { grid-area: a4; }

https://i.sstatic.net/IHhD6.png

Answer №2

this is the HTML code I have created:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="description" content="">
 <meta name="author" content="">
 <link rel="stylesheet" href="style.css">

 <title>Document</title>
</head>
<body>

<header>
    <img src="logos/logo3.png" alt="" width="300px" height="100px">
</header>



<nav>
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">Book</a></li>
        <li><a href="">About</a></li>
    </ul>
</nav>



<main>
    <section>
        <article class="art-fle">
            <h1>Header 1</h1>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat 
corporis voluptate vel ab consectetur repudiandae sunt accusantium. 
Perspiciatis, minima voluptatem!</p>
        </article>
    </section>
    <section>
        <article class="art-fle">
            <h2>Header 2</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
Similique, enim ad architecto necessitatibus consectetur tempora.</p>
        </article>
    </section>
    <section>
        <article class="art-fle">
            <h2>Header 3</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, 
autem! Modi voluptate officia facere voluptatibus!</p>
        </article>
    </section>
    <section>
        <article class="art-fle">
            <h2>Header 4</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
Perferendis, veniam nam! Dicta dolorum officiis quas?</p>
        </article>
    </section>
</main>

<footer>
    <div>
        <img src="">
    </div>
    <div>
        <p>Copyright Little Lemon</p>
    </div>
</footer>
</body>
</html>

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

Tips on modifying the message "Please fill out this field" in the JQuery validation plugin

Is there a way to customize the message "This field is required" in the Jquery form validation plugin to display as "このフィールドは必須です"? Changing the color of the message can be achieved using the code snippet below: <style type="tex ...

javascriptjquerylocalizationjquery-pluginsjquery-validate

Setting character limits when defining string variables in TypeScript

Upon reviewing the documentation, it appears that there is no straightforward method to perform type checking for the minimum and maximum length of a string data type. However, is there a possible way to define a string data type using custom types in ord ...

javascriptstringtypescriptvalidationconstraints

Struggling to Adjust Image to Fit Within Parent Element

I recently started using bootstrap 4 to create a responsive website for practice. However, I encountered an issue with my image not resizing properly to fit the screen. <html lang="en"> <head> <!-- Required Meta Data --> ...

htmlcssbootstrap-4flexbox

Can a scope variable be passed from a controller to a service function in Angular?

angular.module('store_locator') .constant("baseURL","http://locator.sas.dev.atcsp.co.za/api/") .service('stationsService', ['$http', 'baseURL', function($http,baseURL) { this.getStations = ...

javascriptjqueryangularjs

Using Vue.js to Delete an Element from an Array

I am facing an issue with my form value where the IDs are not getting deleted when I remove data. Each time I save data, a new ID is added to the list in the form value. But when I delete any of those data entries, the corresponding ID is not removed from ...

javascriptvue.jsvuejs2

The output does not show the response from the method in React Native

I am facing an issue with a method in my code (React Native). I have an array of IDs and I need to send a 'GET' request for each ID to display a preview card for each. To achieve this, I have used the 'map' method on my array. The req ...

javascriptreact-native

Obtaining a value from a protractor promise within a function and returning it

Is there a way to extract text from a webpage and use it for asserting on another element in the specification? Here is a simple example that demonstrates how you cannot return a value from a function within a Protractor promise: describe('My Test&a ...

javascriptnode.jstestingselenium-webdriverprotractor

Obtaining JSON values by key name using JQuery

I am trying to extract JSON data using an HTML attribute How can I retrieve JSON values based on the translate attribute and "ed" key? JSON FILE { "open" : [ { "en": "Open", "ed": "Opened ...

javascriptjqueryjson

Create a Bootstrap modal that includes an object tag to embed a PDF file

I'm currently working on displaying a PDF file within a Bootstrap modal using the "object" HTML tag. However, I am facing an issue where the PDF file is not showing up. To demonstrate this problem, I have created a jsFiddle (http://jsfiddle.net/mV6jJ ...

javascriptjqueryhtmlcsstwitter-bootstrap

utilizing geographical coordinates in a separate function

I have a program that enables users to access the locations of communication cabinets. I am attempting to utilize html5 to transmit latitude and longitude information to a php script (geo.php) in order to update the database record with map coordinates. Ho ...

javascriptjqueryajaxgoogle-maps

AJAX request stops functioning once the page is reloaded

As a beginner in JavaScript, I am facing an issue with my AJAX call. I have set up the call to process a back-end function when a button is clicked and expect to receive a response once the function is completed. However, whenever I refresh the page whil ...

javascriptnode.jsajaxexpress

Troubleshooting AngularJS: Resolving Issues with ng-model

Our website is experiencing issues with AngularJS functionality. Here's an example of the code we tested: register.html: <form name="register_form"> <ion-view view-title="Login" align-title="center"> <ion-content style="ba ...

javascripthtmlangularjsdata-bindingangular-ngmodel

Is it possible to use Vuejs v-model for a complete form instead of individual inputs?

Note: This solution is applicable for Vue 2.X I am currently working on a unique Vue.js component that has the ability to generate "custom" forms. This component essentially functions as a standalone form with multiple input fields. Users have the option ...

javascriptvue.js

Having trouble retrieving cookie in route.ts with NextJS

Recently, I encountered an issue while using the NextJS App Router. When attempting to retrieve the token from cookies in my api route, it seems to return nothing. /app/api/profile/route.ts import { NextResponse } from "next/server"; import { co ...

javascriptreactjstypescriptnext.jscookies

Exploring the power of Mongoose with GraphQL queries

Below is a mongoose Schema I have created: name : String, class : String, skills : [{ skill_name : String }] I want to convert this Schema into GraphQL inputs so that I can save them to MongoDB. Can someone help me with this? Something like: input Stud ...

javascriptnode.jsmongodbmongoosegraphql

Exploring ways to cycle through an array using Handlebars

Struggling to find the right way to loop through an array using Handlebars. There must be a step that I'm overlooking. Node: Docket.find({}, function(err, dockets){ for(var i = 0; i<dockets.length; i++){ var doclist = dockets[i]; ...

javascriptarraysnode.jsmongodbhandlebars.js

The functionality of CSS Inline Block display is not displaying inline as expected

I have the following HTML and CSS code, but I am having issues getting the dropdown to display inline. .project Type{ display: inline-block; } <form class="smart-form"> <div class="row"> <div class="col col-sm-6 col-md-2 col-lg- ...

htmlcssangularformsbootstrap-4

Execute a function for each template or controller when the page loads

I recently developed a function for my application that verifies the users' information. I implemented this in my authentication controller within the $rootScope. However, I am facing an issue where I need to manually invoke this function in all of m ...

javascriptangularjs

Leveraging Three.js Raycaster for a seamless PDF download functionality

Is there a way to trigger a PDF download when clicking on a 3D object in a Three.js scene? Below is an example of how I have set up the Raycaster: var raycaster; var mouse = { x: 0, y: 0 }; init(); function init() { raycaster = new THREE.Raycaster() ...

javascriptthree.js

The structure of NodeJS Express API calls revolves around handling asynchronous events

Currently, I am working on a hobby project using NodeJS and Express, but I am finding it challenging to manage asynchronous calls. There is a bug that I would like the community's help in resolving. I have set up an Express layout where I send post r ...

javascriptnode.jsapiexpressasynchronous