I'm currently working on this design concept: https://i.stack.imgur.com/wJm0t.png
Below the title, there is a particle image with half square images positioned on the top right and bottom left corners. My goal is to center the particle image below the title.
You can view my code sandbox here: https://codesandbox.io/s/nextjs-forked-xxn8g?file=/index.js
Any suggestions on the best practice to achieve this positioning? Thank you for your help.
Hey there! Here's a suggestion for you:
import React from "react";
import { render } from "react-dom";
import Head from "next/head";
const App = () => (
<div>
<Head>
<title>Testing Next.js</title>
</Head>
<div className="container">
<div className="wrapper">
<div className="innerwrapper">
<img
src="https://example.com/image.jpg"
className="title-image"
/>
<h1 className="title">Feedback Section</h1>
</div>
</div>
</div>
<style jsx>{`
.container {
width: 100vw;
height: 100vh;
background-color: #fcf7f9;
}
.wrapper {
max-width: 1440px;
margin: auto;
}
.innerwrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
font-weight: 800;
font-size: 2rem;
color: #00163a;
text-align: center;
z-index: 1;
}
.title-image {
max-width: 72px;
min-height: 50px;
max-height: 50px;
min-width: 72px;
}
`}</style>
</div>
);
render(<App />, document.getElementById("root"));
To utilize the image as a background for the "innerwrapper" element, you would need to do the following:
<div className="container">
<div className="wrapper">
<div className="innerwrapper">
<h1 className="title">What They Said</h1>
</div>
</div>
</div>
Then adjust the CSS accordingly:
.innerwrapper {
padding: 5rem;
background-image: url("https://rembux.vercel.app/_next/image?url=%2Fimages%2Fpretitle-image.png&w=96&q=75");
background-repeat: no-repeat;
background-position: left 30% top 15%;
}
If you prefer to maintain the image within an <img> tag, you can achieve this by manipulating the z-index property in the CSS rules.
I am facing an issue with sending API KEY in the headers of my request. I am using the fetch method within a Shopify module in React like this: fetch("https://shopify.mysite.fr/shopify/articles/1", { method: "GET", mode: "cors", headers: { "Cont ...
I need help with a project involving rendering previews of PDF documents in a UI similar to Google Docs. {documents.map((doc) => { return ( <div key={doc.id} className=" ...
When I try to enter text into the summernote textarea for space, I keep getting this code: <p><br></p><p><br></p><p><strong style="font-family: "Open Sans", Arial, sans-serif; text-align: just ...
Struggling to hide the request payload when using Express with React on the front end? Check out the image below for reference: https://i.stack.imgur.com/ZT7T7.png Here's a snippet of backend code for you to review: router.post('/fit_spend ...
I have a form in HTML that includes a submit button for posting status on a page. When a user clicks the submit button without entering anything into the form field, I want PHP to display a simple error message on the same page saying "This status update s ...
<div id="web-link" class="infoline"> <i class="fa fa-link fa-2x fa-fw coloriconfa"></i> <a href="<?=$data['post']['url']?>" target="_blank"><?=$data[ ...
Trying to figure out the best way to reset a react class component back to its initial state, I came across two different implementations. In my own version, I created an object with initial values and set the component's state equal to it: // My imp ...
This is my first attempt at creating a responsive design, but it's not turning out as smooth as I expected! I have set up breakpoints at 768 and 480, and the design breaks correctly when I resize the browser. However, when I tested it on my smartphon ...
After developing a TypeScript node module and integrating it into my Next.js app, I encountered an error when attempting to run the app. Are you aware of any reason why this issue may be occurring? Please refer to the information provided below. Details a ...
I am working on a function that allows users to access the content of a tab without causing the page to reload. Initially, I tried using something like $( "#tab1" ).click(function() { $("#content").load("tab1.html #content > *"); }); but unfortun ...
I have a question regarding Firefox. I often notice some peculiar pseudo elements in the debugger tool, displayed as a rectangle with a dot inside: In this particular case, I cannot fathom why there would be a pseudo element in the middle of a list. Whe ...
My goal is to center the title in the middle of the page, taking into account its alignment with the search bar. However, I want it to be centered independently and not affected by the search bar's position. Is there a way to achieve this? To better ...
I have designed a new calendar interface with dynamic functionality. When the user clicks on any time slot displayed in IMAGE1, a span element is created dynamically to represent 8 hours starting from that clicked time. My question is, how can I access th ...
I've been utilizing the Google Calendar API to insert events into Google Calendar. While the events are being added to attendees' calendars, I'm facing an issue where the notification of event creation is not showing up for both the attendee ...
I am currently working on a web application project for a clinic and laboratory, specifically focusing on sending tests. I have implemented the code below to select the test category first, followed by the test name related to that category. However, when ...
Is there a way to apply unique CSS classes to specific tags within a common layout? In my application.html.erb layout file, the application.css.scss is loaded using <%= stylesheet_link_tag "application". . . %>, which then includes all CSS files in ...
My Next.js application successfully generates URL previews for social media platforms using OGP settings, particularly for Facebook debugger and other platforms. However, I am facing an issue with LINE messenger and WhatsApp as they do not display any prev ...
One of the elements in my project is a checkbox: <div class="checkbox"> <label> <?= Html::checkbox('chocolate', false) ?> Chocolate </label> </div> In addition to that, I also have a span ta ...
With a list and an edit button, upon clicking the edit button, a new modal opens. How can I auto-populate the selected username email? The server-side response is {this.test.name}, where I provide him with the input value to auto-populate. However, when ...
While there are many tutorials available for creating Trapezoids with CSS3, I am interested in making a four-sided shape where none of the sides are parallel (trapezium), similar to the one shown in the image below. Can this be achieved? ...