The layout of the divs becomes distorted when the window is resized

When adjusting the window size, all elements in the center become cramped and unresponsive. Even the navigation items in the header do not resize properly.

Here is my Triangle.js file:

 import React from 'react'
import { motion } from 'framer-motion'
import './styles/triangle.css'

const Triangle = () => {
  const transition = { duration: 8, ease: "easeInOut"}
  return (
    <>
      <div className='parent'>
        <div className='svgPath'>
          <svg xmlns="http://www.w3.org/2000/svg" width="900" height="685" viewBox="0 0 1600 800" fill="none">
            <motion.line y1="234.5" x2="1600" y2="234.5" 
              fill='transparent'
              stroke='white'
              strokeWidth={2}
              strokeLinecap
              initial={{ pathLength: 0 }}
              animate={{ pathLength: 1 }}
              transition={transition} />
            <motion.path d="M626.64 7.19272L1059.32 500.806C1063.57 505.654 1060.13 513.25 1053.68 513.25H188.318C181.871 
              513.25 178.428 505.654 182.678 500.806L615.36 7.19271C618.348 3.78441 623.652 3.78441 626.64 7.19272Z" 
              fill='transparent'
              stroke='white'
              strokeWidth={2}
              strokeLinecap
              initial={{ pathLength: 0 }}
              animate={{ pathLength: 1 }}
              transition={transition}/>
          </svg> 
        </div>
        <motion.div 
          className='text1'
        >
          EVERY PRODUCT AND SERVICE CREATED TO BE SOMETHING LARGER THAN ALL OF US.
        </motion.div>
        <div className='text2'>
          We have a very unique model. While we aspire to be achieving players in the markets, 
          we also invite investors and partners to grow our brands together and make a difference as one. 
        </div> 
        <div className='text3'>
          12
        </div>
        <div className='text4'>
          Projects and more upcoming.....
        </div>
      </div>
      
    </>
  )
}

export default Triangle

And here's my triangle.css file:

@font-face {
    font-family: Coda;
    src: url(../../../public/fonts/Coda/Coda-Regular.ttf) format('trueType');
}

.parent{
   padding-left: 200px;
   position: relative;
}

.svgPath{
    position: absolute;
    z-index: 1;
}

.text1{
    font-family: Coda;
    color: whitesmoke;
    font-size: xx-small;
    opacity: 0.7;
    font-size: medium;
    letter-spacing: 0.05em;
    position: absolute;
    z-index: 2;
    margin-top: 225px;
}

.text2{
    font-family: Coda;
    color: whitesmoke;
    font-size: medium;
    width: 460px;
    word-wrap: normal;
    position: absolute;
    z-index: 3;
    margin-top: 300px;
    margin-left: 500px;
}

.text3{
    font-family: Monument Extended;
    color: black;
    font-size: 6rem;
    background-color: transparent;
    text-shadow: -2px -2px 0 white,
    2px -2px 0 white,
    -2px 2px 0 white,
    2px 2px 0 white,
    -3px -3px 0 white,
    3px -3px 0 white,
    -3px 3px 0 white,
    3px 3px 0 white;
    position: absolute;
    z-index: 4;
    margin-left: 24%;
    margin-top: 6%;
}

.text4 {
    font-family: Coda;
    color: whitesmoke;
    font-size: medium;
    word-wrap: normal;
    background-color: transparent;
    position: absolute;
    z-index: 5;
    margin-top: 10.5%;
    margin-left: 35%;
}

Answer №1

To achieve the desired result, simply include width:100% within the .container class.

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

No code is appearing on the page, just a blank space

Whenever I visit this page on the web, the screen shows up as empty and I've encountered similar issues with other JavaScript pages that I've created. This makes me wonder if there might be a missing piece of code or something else causing the pr ...

The curious conduct of wild safari creatures

I have been using JavaScript to split my ePub chapter into pages by wrapping the code with new divs that represent separate pages. I have also created CSS styles for these new divs. Everything works perfectly when the file has a filename extension of &apos ...

Creating a PDF from dynamic HTML and transferring it to an AWS S3 bucket without the need to download the PDF

We have created a web application using React JS where we attempted to generate a PDF. Instead of downloading or opening the PDF in a new window, our goal is to directly upload it to an AWS S3 bucket. We have researched and tried various samples but have n ...

Guide to embedding a component within another component using route based rendering

My routing configuration looks like this: <Provider store={store}> <BrowserRouter> <Route path="/" component={App} /> <Route path="/customers" component={Customers} /> <Route path="/tickets" componen ...

"Accessing your account only requires a simple two-click login process

Why do I need to click the log in button twice for data validation on my forum website? While designing a forum website, I noticed that users have to click the log-in button twice before the system validates and processes the input data. Below is the code ...

Utilizing KeyboardDatePicker with React Hook Form: A Guide to Retrieving Dates in YYYY-MM-DD Format

For my form, I am utilizing material ui along with react hook form <MuiPickersUtilsProvider utils={DateFnsUtils}> <Controller name="date_of_birth" control={control} defaultV ...

Collapse the mobile nav bar upon clicking an item

I'm currently facing a challenge with the navigation bar on my event landing page. The issue is that when I open the navbar in mobile view, it does not collapse back after clicking on an item. Instead, it remains open and covers almost 3/4 of the scre ...

Utilize Reactjs and Firebase to transform a string into a map structure

I am facing an issue with my reactjs app where I have a "steps" array for users to input recipe preparation steps. Currently, the steps are stored as strings directly in the array on Firebase. However, I want them to be structured within a map. Can someone ...

Steps for capturing a screenshot of the canvas while utilizing the react-stl-obj-viewer component

I recently started using a component called react-stl-obj-viewer to display a 3D STL image. The rendering of the image itself is working fine. However, I encountered an issue when trying to move the rendered image around and implement a button for capturin ...

Error message: `ForwardRef(Portal)` is receiving an invalid prop `container` when attempting to open a Material UI menu

I am currently using a simple menu demo provided in the Material UI demos. Upon opening the menu for the first time on the page, I encountered a warning as shown below. https://i.stack.imgur.com/1O7ga.png Below is my code snippet: const classes = useSty ...

Selecting multiple elements with the same attribute value using jQuery

I am looking to target specific DOM elements using jQuery. Below is the HTML code: <li> <span class="node> <span class="con"></span> <span class="check"></span> <img> <a title="high">abc&l ...

Encountering persistent issues while attempting to integrate socket.io into my Node.js application with Express

Recently, I've been exploring ways to create a textbox that allows multiple users to type simultaneously. Below is the HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> ...

<container> rectangular form

.products { width: 100%; height: 500px; background: gray; } .box { width: 250px; height: 300px; background: darksalmon; border: 1px solid #000; } <div class="products"> <div class="box"> <p>Ola</p> </div> ...

Do you think there might be an issue with the CSS coding?

I have designed a user-friendly responsive login form that allows users to easily log in and reset their passwords. However, I am facing an issue where the username and password fields are not displaying on separate lines as intended. I have thoroughly ins ...

Tips for Eliminating Unnecessary Space Above the Navigation Bar

I have a problem with the top navbar on my test site. There is some extra space above it that I want to remove so that the navigation extends all the way up to cover the viewport. Here is an image of what I'm trying to achieve: https://i.stack.imgur.c ...

Tips for centring navigation horizontally and making it responsive using CSS

Is there an effective way to horizontally center the navigation within a div using responsive CSS? HTML: <nav id="centermenu"> <ul> <li><a href="#">Business</a></li> <li><a href="#">Spec ...

Fixing the double firing of the onClick event when the "Enter Key" is pressed in material-ui (bug)

I am utilizing the cljs-react-material-ui library within my project sourced from re-frame. While working with a flat-button, I noticed that clicking on it triggers the :on-click event as expected. However, when I tab to focus on the button and then press ...

Can someone explain the significance of the symbol "tagname" when styling with CSS in material UI? For example, using "&div: { display: 'flex' }"

While working on my React Material UI project, I came across a CSS style that includes the symbol &div:. Can someone explain to me what this symbol means in the context of styling a component? The CSS snippet is provided below. contactWrapper: { ...

CSS - Mysterious Gaps Found in Div Block

Below is the code snippet I am currently working with: html { height: 100%; overflow: hidden; } body { height: 100%; color: #bdc3c7; font-family: Montserrat; background-color: #3E4651; } .nav { ...

Experiencing problems with jQuery drop-down menus - added arrows to menu links, but menu disappears when arrows are hovered over

My website has a drop-down menu implemented using jQuery, and it works well. However, I'm facing an issue where I want to add an arrow to the links that have sub-menus. The problem is that when you hover over this arrow, technically you're not ho ...