What is the best way to incorporate a label onto the border of a div while ensuring responsiveness?

I am struggling to design a straightforward appreciation screen with bordered text. The current css I have does not adjust responsively when the screen size changes, causing it to appear misaligned. Below are my CSS and component codes. React JS is being used to build this screen.

.thankYouParent {
    display: flex;
    border: 1px dotted red;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    justify-content: space-between;
    justify-content: center;
}

.thankYouBox {
    display: flex;
    position: relative;
    text-align: center;
    border: 5px solid #ffffff;
    text-transform: uppercase;
    height: 40vh;
    width: 75vw;
    justify-content: center;
}

.thankYouText {
    font-family: interstateBold;
    font-size: 10vw;
    color: white;
    align-self: center;
}

.borderText {
    font-family: interstateRegular;
    display: flex;
    position: absolute;
    color: white;
    font-size: 3vh;
    background-color: black;
    align-self: flex-end;
    bottom: -25px;
    padding-left: 1vw;
    padding-right: 1vw;
}

import React from 'react'
import "../css/ThankYou.css"

export default function ThankYou(){
    return(
        <div className="thankYouParent">
            <div className="thankYouBox">
                <label className="borderText"> For visiting us </label>
                <label className="thankYouText">Thank You</label>
            </div>

        </div>
    )
}

Initial Design: https://i.sstatic.net/MjZN2.png

Design After Resizing Screen:

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

htmlcssreactjs

Answer №1

The text size is determined using the vh unit, which is based on the height of the page. The position is also linked to the height with bottom: -1.5vh;. To account for the border width, we use margin-bottom: -3px;.

function Gratitude(){
  return(
    <div className="gratitudeParent">
      <div className="gratitudeBox">
        <label className="borderedText"> For stopping by </label>
        <label className="thanksMessage">Thank You</label>
      </div>
    </div>
  )
}

ReactDOM.render(
  <Gratitude />,
  root
)
.gratitudeParent {
  display: flex;
  border: 1px dotted red;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  justify-content: space-between;
  justify-content: center;
}

.gratitudeBox {
  display: flex;
  position: relative;
  text-align: center;
  border: 5px solid #ffffff;
  text-transform: uppercase;
  height: 40vh;
  width: 75vw;
  justify-content: center;
}

.thanksMessage {
  font-family: interstateBold;
  font-size: 10vw;
  color: white;
  align-self: center;
}

.borderedText {
  font-family: interstateRegular;
  position: absolute;
  color: white;
  font-size: 3vh;
  background-color: black;
  padding-left: 1vw;
  padding-right: 1vw;
  bottom: -1.5vh;
  margin-bottom: -3px;
}

body {
  background: black;
}

* {
  box-sizing: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></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

Incorporating a loading screen on route changes using Redux in Next.js

I'm attempting to implement a loading screen that detects URL changes, so I'm looking to incorporate this code into my _app.js file. import Router from "next/router"; export default function App({ Component, pageProps }) { const [loa ...

reactjsreduxnext.js

The nested dynamic route in the remix triggers the correct loader for the specific file, all while still rendering the parent page

https://i.sstatic.net/KNIYH.gif When accessing the route /events/23/sections/38-service-2, the remix is loading the file /events.$eventId.services.$serviceName.tsx but displaying the default function in /events.$eventId.tsx, resulting in the same output a ...

reactjsremix.run

steps to overlay an image over another in bootstrap:

I am trying to place an image over another image. Here is the code I have used: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8> <meta name="viewp ...

htmlcsstwitter-bootstrap

Is there a way to create a blurred background effect while the popup is in use?

I prefer my popup to have a dark or blurred background when active. The popup itself should remain the same, with only the background being darkened. I would like a dark layer overlaying the entire page. This script should be compatible with any website wh ...

javascriptcss

"React and Next.js are causing a return value of undefined on

After spending a few hours working with NextAuth and utilizing the Twitter API for login and tweet searching, I have encountered a minor issue. Setting up most of the things was smooth, but I am facing some problems with fetching API routes on the client ...

javascriptreactjsnext.js

eliminate gaps between hyperlinks using cascading style sheets

I developed a webapp for iOS which has a specific page containing a centered div with 3 buttons. Inside this div, there is a total of 460px with each link measuring as follows: the first and last are 153px while the middle one is 154px. The main issue ar ...

htmlcss

Changing the position of the checkbox label to be above the checkbox

Can you help me with rearranging the checkbox label position to be above the checkbox instead of on the left side? I currently have the labels appearing on the left-hand side of the checkboxes, but I would like them to be positioned above the checkboxes. ...

htmltwitter-bootstrap

What is the best method for enlarging the central image in Owl Carousel?

Could someone help me with implementing Owl Carousel to achieve this design? I have attempted it, but unfortunately, it is not working as expected. Your assistance in fixing the issue would be greatly appreciated. Please find the necessary code below: ...

jqueryhtmlcss

Fonts displayed on websites may look different on Mac compared to Windows

After carefully selecting a Google Web Font to use as the main font for my website, I noticed that it appears slightly different in terms of dimensions and spatial conformations when displayed on both Mac and Windows computers. For more information about ...

cssmacosfonts

PHP, CURL, JSON, AJAX, and HTML - unable to fetch the required data

I am faced with the challenge of transferring data from server 2 to server 1, filling up a form, and submitting it without redirecting the user to server 1. Once the form is submitted, I need the PHP script on server 1 to be executed and send back the resu ...

phphtmlajaxjsoncurl

The error message "Your session has expired" is displayed by the Wysiwyg

The WysiwygPro editor displays a dialog error message stating, "Your editing session has expired. This is usually caused by a long period of inactivity. Please re-load the page," when clicking on any controls such as Image, Media, Emoticon, etc. This iss ...

phphtml

Ways to enable users to input grammatical equations while verifying certain rules in a text box

I am looking for validation of equations in HTML, not evaluation. I want to allow users to input equations like the following in a textbox, with validation: 400 - IF(age > 32, 6, 4) + 10 The 'age' is a fixed string, and there will be other ...

javascriptjqueryregexhtmlgrammar

Achieving vertical and horizontal centering of content using tailwind.css in React with Next.js

Struggling to align an svg component at the center of a parent div element both vertically and horizontally using tailwind.css in a React project. Seeking feedback on my code below to identify any mistakes. The current issue, as shown in the included png ...

cssreactjssvgnext.jstailwind-css

The application appears differently on a phone compared to how it looks on the ripple platform

Recently started experimenting with Apache Cordova, attempting to create a basic application. Here is how it looks in Google Chrome using Ripple for PhoneGap/Cordova emulation: https://i.sstatic.net/2MSwl.png When I click on the button, this is the resul ...

androidhtmlcsscordovaripple

Tips for keeping a div element at the top of the page

I am looking to have a div stick to the top of the page when someone scrolls down When the page is scrolled, the green div with class stickdiv should automatically stick to the top var left = document.getElementsByClassName("stickdiv"); for( var i = 0; ...

javascripthtmlcss

Populate an HTML select with data as users click the create button

Encountering an issue when loading data into an HTML select after users press or click a button. The situation is as follows: A button is available to create another button dynamically Upon clicking the created button, a form is displayed Once the form i ...

phpjquerymysqlhtmlajax

Is There a Way to Conceal Content in Material-UI TextField?

How can I format a TextField for phone numbers in a short form to display like (0)xxx xxx xx xx? I've been attempting to implement a masking functionality using the react-input-mask plugin with Material-UI components. However, when trying to update t ...

reactjsmaterial-uiinput-mask

The function "AAA" is utilizing the React Hook "useState" in a context that does not fit the requirements for either a React function component or a custom React Hook function

Upon reviewing this code snippet, I encountered an error. const AB= () => { const [A, setA] = useState<AT| null>(null); const [B, setB] = useState<string>('0px'); ..more} ...

reactjstypescriptfunctionreact-hooks

A guide to implementing previousState in React hooks with TypeScript

I am trying to grasp the concept of using previous state with react hooks in typescript. The code snippet provided below does function, however, it throws an error stating: Type 'number' is not assignable to type 'HTMLDivElement'. Whi ...

reactjstypescriptreact-hooks

Tips for implementing permission-based functions in a React frontend with a Django Rest API

I am currently using Django Rest Framework in conjunction with React on the frontend. Utilizing Token Authentication has been successful for me thus far. Now, I am looking to add permission-based functions to my React frontend. Specifically, I want only th ...

javascriptdjangoreactjsdjango-rest-frameworkpermissions