Contact form in Bootstrap 5 lacks responsiveness

I am currently exploring Bootstrap 5 for my website design project, and one of the features I have implemented is a contact form. While the white arrow that separates the two sections blends in seamlessly on desktop and laptop screens, it doesn't quite achieve the same effect on mobile and tablet devices.

Desktop View

https://i.stack.imgur.com/Y3ygA.jpg

Mobile/Tablet View

https://i.stack.imgur.com/9nRb8.jpg

.form-area {
    padding-top: 7%;
}
.row.single-form {
    box-shadow: 0 2px 20px -5px hsla(0, 0%, 0%, 0.5);
}
.left {
    background: hsl(210, 45%, 30%);
    padding: 200px 98px;
}
.left h2 {
    font-family: 'Montserrat', sans-serif;
    color: hsl(0, 0%, 100%);
    font-weight: 700;
    font-size: 48px;
}
.left h2 span {
    font-weight: 100;
}
.single-form{
    background: hsl(0, 0%, 100%);
}
.right {
    padding: 70px 100px;
    position: relative;
}
.right i {
    position: absolute;
    font-size: 80px;
    left: -27px;
    top: 40%;
    color: hsl(0, 0%, 100%);
}
.form-control {
    border: 2px solid hsl(0, 0%, 0%);
}
.right button {
    border: none;
    border-radius: 0;
    background: hsl(18, 100%, 62%);
    width: 180px;
    color: #fff;
    padding: 15px 0;
    display: inline-block;
    font-size: 16px;
    margin-top: 20px;
    cursor: pointer;
}
.right button:hover{
    background-color: hsl(18, 100%, 62%);
}


/*responsive*/

@media (min-width:768px) and (max-width:991px){
    .right i {
    top: -52px;
    transform: rotate(90deg);
    left: 50%;
}
}

@media (max-width:767px){
    .left {
  padding: 90px 15px;
  text-align: center;
}
.left h2 {
  font-size: 25px;
}
.right {
  padding: 25px;
}
.right i {
  top: -52px;
  transform: rotate(90deg);
  left: 46%;
}
    .right button {
    width: 150px;
    padding: 12px 0;
}
    
}

#info {
    display: flex;
    vertical-align: middle;
}
<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>Contact | </title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8cac7c7dcdbdcdac9d8e89d869a8698">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3c1ccccd7d0d7d1c2d3e3968d908d93">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<link rel="stylesheet" href="./css/contact.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="61030e0e15121513001121544f534f52">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Default"
    disabled
          href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d"
        >
        <link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Web Awesome"

          href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d"
        >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css"
          >
<link rel="icon" type="image/x-icon" href="/Bootstrap-/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="05676a6a71767177647545302b362b35">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="../css/contact-form.css">
</head>
<body>
    
    <!-- CONTACT FORM SECTION START -->
    <section class="mb-5">
        <div class="form-area">
            <div class="container">
                <div class="row single-form g-0">
                    <div class="col-sm-12 col-lg-6">
                        <div class="left">
                            <h2><span>Contact Us for</span> <br>Business Inquiries</h2>
                            
                            <div class="mt-5 text-white" id="info" >
                            <i class="fa-solid fa-phone fa-2x ms-2"></i>
                    
                            <p class="ms-2"> </p>
                            </div>
                            <div class="mt-5 text-white" id="info">
                                <i class="fa-solid fa-envelope fa-2x ms-2"></i>
                                <p class="ms-2"></p>
                            </div>
                            <!-- <div class="mt-5 text-white" id="info">
                                <i class="fa-brands fa-facebook fa-2x ms-2"></i>
                                <p class="ms-2"> Solutions</p>
                            </div>
                            <div class="mt-5 text-white" id="info">
                                <i class="fa-brands fa-instagram fa-2x ms-2"></i>
                                <p class="ms-2">@ Solutions</p>
                            </div>
                            <div class="mt-5 text-white" id="info">
                                <i class="fa-brands fa-twitter fa-2x ms-2"></i>
                                <p class="ms-2">@Solut</p>
                            </div> -->
                        </div>
                    </div>
                    <div class="col-sm-12 col-lg-6">
                        <div class="right">
                        <i class="fa fa-caret-left"></i>
                            <form action="" method="POST">
                                <input type="hidden" name="_next" value="https://patriotsforlife.github.io/Bootstrap-/thank-you.html">
                                <input type="hidden" name="_subject" value="New Contact Form Inquiry!">
                                <!-- <input type="hidden" name="_captcha" value="false"> -->
                                <div class="mb-3">
                                    <label for="Name" class="form-label">Full Name</label>
                                    <input type="text" class="form-control" placeholder="Your Full Name" name="name" aria-describedby="emailHelp" required>
                                </div>
                                <div class="mb-3">
                                    <label for="Email" class="form-label">Email Address</label>
                                    <input type="email" class="form-control" placeholder="Your Email Address" name="email" aria-describedby="emailHelp" required>
                                </div>
                                <div class="mb-3">
                                    <label for="Message" class="form-label">Message</label>
                                    <textarea type="text" class="form-control" placeholder="How can we help you?" name="message" required></textarea>
                                </div>
                                
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </form>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- CONTACT FORM SECTION CLOSE -->

    
</body>
</html>

htmlcssresponsive-designfrontendbootstrap-5

Answer №1

When viewing on mobile, the arrow element has a top: -52px;, but adjusting it to top: -50px; will make it look correct.

.form-area {
  padding-top: 7%;
}
.row.single-form {
  box-shadow: 0 2px 20px -5px hsla(0, 0%, 0%, 0.5);
}
.left {
  background: hsl(210, 45%, 30%);
  padding: 200px 98px;
}
.left h2 {
  font-family: "Montserrat", sans-serif;
  color: hsl(0, 0%, 100%);
  font-weight: 700;
  font-size: 48px;
}
.left h2 span {
  font-weight: 100;
}
.single-form {
  background: hsl(0, 0%, 100%);
}
.right {
  padding: 70px 100px;
  position: relative;
}
.right i {
  position: absolute;
  font-size: 80px;
  left: -27px;
  top: 40%;
  color: hsl(0, 0%, 100%);
}
.form-control {
  border: 2px solid hsl(0, 0%, 0%);
}
.right button {
  border: none;
  border-radius: 0;
  background: hsl(18, 100%, 62%);
  width: 180px;
  color: #fff;
  padding: 15px 0;
  display: inline-block;
  font-size: 16px;
  margin-top: 20px;
  cursor: pointer;
}
.right button:hover {
  background-color: hsl(18, 100%, 62%);
}

/*responsive*/

@media (min-width: 768px) and (max-width: 991px) {
  .right i {
    top: -50px; /* THIS LINE WAS CHANGED */
    transform: rotate(90deg);
    left: 50%;
  }
}

@media (max-width: 767px) {
  .left {
    padding: 90px 15px;
    text-align: center;
  }
  .left h2 {
    font-size: 25px;
  }
  .right {
    padding: 25px;
  }
  .right i {
    top: -50px; /* THIS LINE WAS CHANGED */
    transform: rotate(90deg);
    left: 46%;
  }
  .right button {
    width: 150px;
    padding: 12px 0;
  }
}

#info {
  display: flex;
  vertical-align: middle;
}
<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>Contact | </title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b7974746f686f697a6b5b2e3529352b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b4944445f585f594a5b6b1e0518051b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
...and so on
...
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- CONTACT FORM SECTION CLOSE -->

    
</body>
</html>

Answer №2

Here's another suggestion to consider: you can achieve a similar outcome by including a CSS square after the right column and then adjusting its rotation as necessary. This approach could simplify issues related to sizing and positioning.

Feel free to review this implementation: https://codepen.io/panchroma/pen/YzRMgpz

I have removed your caret and introduced this new CSS code starting from line 90:

/* Create a pseudo-element square after the .right element */

/* default styling, pointing up on mobile and tablet */
.right::after {
  content: "";
  height: 40px;
  width: 40px;
  position: absolute;
  background-color: white;
  /* background-color: pink; */ /* set color to pink for debugging */
  top: -20px;
  left: calc(50% - 20px);
  transform: rotate(45deg);
}

/* on tablet and desktop, point to the left */
@media (min-width: 992px) {
  .right::after {
    top: 40%;
    left: -20px;
  }
}

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

Difficulty understanding JavaScript sum calculations

I am currently working on a website project. Seeking assistance to enable an increment of one when clicked. Also need guidance on calculating the total price of items collected in a designated section under "number of items selected". Goal is to display ...

javascripthtmlcsscumulative-sum

Is there a way to transfer a value set from one tpl file to another tpl file in cscart using smarty template engine?

I am trying to retrieve the value of a variable set using an input tag from one tpl file. Here is the input tag in A.tpl file: <input type="checkbox" class="checkbox" name="payment_data[processor_params][enable_addbillcard]" id="optional_enable_addbil ...

phphtmlsmartycs-cart

Ways to utilize jquery to limit the length of an editable div and prevent it from exceeding our specified restriction

Imagine a scenario where you have the following code snippet: <div id="editing" contenteditable onclick="document.execCommand('selectAll',false,null)">Put text here...</div> In this situation, let's say you want to impose a r ...

javascriptjqueryhtmlcontenteditablemaxlength

Displaying text underneath an image

Hey everyone, I'm currently working on getting some text to show up below an image using Bootstrap 3. Here's what I have so far: <div class="row"> <div class="col-xs-12 col-sm-6 col-md-3"><img alt="my image" class="img-about" ...

htmltwitter-bootstrapcss

Positioning a secondary div beside a primary div that is centered on the page

As I work on my website, I have a container that encompasses the entire design and is perfectly centered using margin:auto. Now, I am looking to float specific content to the right of this central container in a way that it stays attached to the side reg ...

csshtmlcss-floatcenter

Instruct the VirtualHost DocumentRoot to redirect the HTML from "/" to a subfolder within the WWW directory

Apologies for repeating this question, but despite extensive discussions on the topic, I am struggling to find a solution for setting up a local development environment using VirtualHost. Currently, I am using XAMPP Portable for Windows, but I believe the ...

htmlapache.htaccesshttp-redirectvirtualhost

The CSS command for displaying additional content is not functioning within table elements

I'm attempting to add a 'read more' arrow to the third column, which should expand the text in the first column when clicked. I have the following code, and it works fine outside of a table but not inside one. Where am I going wrong? I prefe ...

css

Guide on submitting a reply to Harvard's "Guess my Word" challenge using JSoup

I am currently working on developing a bot to enhance my gameplay in Harvard's intriguing "Guess my Word!" game. After some exploration, I found out about a post request feature available through Chrome's "inspect element" functionality when a pl ...

javahtmlhttpnetworkingjsoup

AngularJS function orderBy reverses the array instead of sorting it

I encountered an issue where, after clicking the 'order button', the table does not order as expected. Instead, it reverses all the td elements. For example, 'A', 'C', 'B' becomes 'B', 'C', "A". I ...

javascripthtmlangularjsangularjs-orderby

Creating multiple versions of a website based on the user's location can be achieved by implementing geotargeting techniques

It may be a bit challenging to convey this idea clearly. I am interested in creating distinct home pages based on the source from which visitors arrive. For instance, if they come from FaceBook, I envision a tailored home page for FaceBook users. If they ...

javascripthtmlcssfacebook

Verify the HTML embed code with either PHP, JavaScript, or the Zend PHP framework

I have a quick question: Are there any effective methods for validating an HTML embed code? I am currently using Zend Framework and prototype+scriptaculous and would appreciate any hints or tips related to this environment. Thank you! ^^ ...

phphtmlzend-frameworkembedvalidation

How to position the navigation bar to the right using bootstrap

I have been experimenting with moving the navigation bar to the right side of the screen in bootstrap4 by using float: right; on the nav a element, but it doesn't seem to be having any effect. I am developing my project using a codepen app. Here is t ...

htmlcsstwitter-bootstrapweb

Fixed position scrollable tabs with Material UI

I recently implemented material-ui scrollable tabs in my project, referencing the documentation at https://mui.com/material-ui/react-tabs/#scrollable-tabs. Here is a snippet of the code I used: <Tabs value={value} onChange={handleChange ...

javascriptcssreactjsmaterial-ui

Applying a variety of elements to a single function

I am in the process of creating a mini-survey and I want the buttons to change color when clicked, but return to normal when another button is selected within the same question. Currently, clicking on a button turns it red while leaving the others clear. H ...

javascripthtmlcssfunction

Is there any method to ensure that IE8 properly displays opacity for a `:before` pseudo element?

Here is a simple CSS snippet that I am working with... div:before { content: "Hello there"; filter: alpha(opacity=40); -moz-opacity: .4; opacity: .4; } Check it out on jsFiddle. In Firefox 6, the :before pseudo element displays with t ...

cssinternet-explorer-8opacitypseudo-element

Is there a way to transform this JavaScript function into a jQuery plugin?

Hey there! I've been using this JavaScript function to print a div, but now I realize that I need to switch to jQuery. Can someone lend a hand in helping me convert this to jQuery code? $(document).ready(function(){ function printData() { ...

jqueryhtml

Guide on utilizing the h function in Vue3 for seamless binding and passing of properties and events from parent to child components

Utilizing Vue3 and naive ui for front-end development has been a challenge for me as I primarily focus on back-end development and lack expertise in front-end technologies. To enhance user interaction, I incorporated naive ui’s BasicTable along with an ...

javascripthtmltypescriptvue.jsvuejs3

Why is the 3D CSS transform (translateZ) feature malfunctioning on Android 4.0.3?

I have this HTML code that is functioning well on Chrome, Safari, and Mobile Safari. However, when testing it on Android 4.0.3, the translateZ property does not seem to have any desired effect on the div element. While everything else works as expected, ...

androidcss3dwebkittransform

Creating a table from a PHP associative array

I've been attempting to organize an associative array in ascending order and then display it in an HTML table, but I've hit a roadblock with an error. I tried searching for solutions here on SO and followed the advice provided in some threads: P ...

phphtmlarrays

Align the text in the center of the button vertically

Struggling to vertically center text on a button? I understand the frustration! I've been working on this issue for a whole day with no success. My setup involves NEXT.js and TailwindCSS. <main> <div class='flex justify-center ite ...

cssreactjsnext.jstailwind-csscentering