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

Expanding on the specific properties of a parent component to its child, using SASS's extend feature

Can selected or specific properties be shared/extended from the parent to the child without the need to create a variable? .main-container { padding: 20px; margin: 20px; ul { padding:$parentPadding(); margin: 0; } ...

htmlcsssass

Show different text or letter when hovering

Is there a way to hide one letter and display another in a link, with a different style on hover? For example: This is a... ...regular link. And this is a... ...hovered link. Any ideas on how to make this happen? Thank you. Edit: Just to clarify — ...

jquerycsseffect

Insects featuring a button and tooltip duo creating a captivating "pull-effect"

Why is the button pulling when I move the cursor over a camera? Is there a way to solve this issue? <div class="input-group-btn advanced-group"> <button class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Send Imag ...

javascripthtmlcsstwitter-bootstrap

Is it possible for 'will-change' to achieve the intended outcome when implemented using the Web Animations API?

Google recommends: Google suggests that if an animation may occur within the next 200ms [...] it's a good idea to use will-change on elements being animated. In most cases, any element in your app's current view that you plan to animate should ...

cssanimationweb-animationswill-changeweb-animations-api

Issue with Dynamic Image Path in Require Function: Unable to locate the relative module

I've been struggling with an error in VueJs require function for the past two days. I'm attempting to pass a prop to the Home component and then display the image. Home.vue <template> <BlogPost :post="welcomeScreen"/> <B ...

javascripthtmlvue.js

The custom CSS file is not being recognized

I am facing an issue while trying to integrate two CSS files into my website. The second CSS file seems to be ignored, even though both files are properly loaded when inspecting with the Development Tool in Chrome. Here is a snippet from my Header: <l ...

htmlcss

Animation of CSS with an image depicting a leaf swaying gently in the breeze

This project was a personal challenge for me, and I am quite satisfied with the approach I have developed. However, I am open to exploring alternative methods if there are any. The website I am working on features a logo that includes an image of a leaf. ...

csscss-animationskeyframe

Samsung devices exclusively showcase background in responsive design

I am encountering a major problem with my website design, specifically with its compatibility on mobile devices. To ensure its responsiveness, I have tested the design on my iPhone, iPad, and Windows Phone. Unfortunately, since I lack an Android device, I ...

androidhtmlcssbrowser

Aligning the wp_nav_menu vertically within the site-header

Is there a way to vertically center the WordPress function wp_nav_menu in my site header? Although I followed the learnWebCode tutorial for the menu, I am struggling to implement it successfully. Is there anyone who can provide guidance or a solution? ...

csswordpress

What is the best way to modify CSS and HTML with a post request?

I'm currently in the process of working on a webpage with multiple sections. One section includes a form that sends a POST request. Once this form is successfully submitted, I want to update the CSS style of another element to make it visible. Given ...

cssnode.jsexpresspost

Using CSS, you can utilize a three-dot pattern to create a unique X

Hey there! I've got a menu with three dots that animate, and when I click on them, I want them to transform into an X shape. You can check out the demo here: demo Here's the HTML: <div class="dots"> <div class="dot"></div> & ...

htmlcsscss-animations

Twig: A guide to showcasing HTML content within block titles

Within my Symfony2 project, I am utilizing various twig templates. One of these templates contains a block labeled title. {% block title %}{{ announcement.title }}{% endblock %} The issue arises when the variable {{ announcement.title }} contains HTML ta ...

phphtmlsymfonytwig

Troubleshooting problem with responsive image display and blurred effects

Initial problem I have a photo gallery on my website. When you click on a photo, you can view a larger preview. To cater to mobile users, I set the following CSS: .overview img { height: auto; width: 90%; } However, I am facing an issue where the hei ...

htmlcss

React Application not reflecting recent modifications made to class

My current project involves creating a transparent navigation bar that changes its background and text color as the user scrolls. Utilizing TailwindCSS for styling in my React application, I have successfully implemented the functionality. // src/componen ...

javascripthtmlcssreactjstailwind-css

Gather information from "div" tag with the class attribute using Python

I am looking to extract specific financial data (referred to as the Key data) that is housed within <div> </div> tags. I then aim to consolidate this extracted information into an excel sheet which already contains additional harvested data. Th ...

htmlpython-3.xbeautifulsoup

Tips for creating td/th elements with a consistent width?

I am currently working on a website where I need to create a table with fixed width td tags, rather than the entire table having a fixed width. This is necessary because I will be dynamically showing and hiding columns using jQuery, and also using a jQuery ...

htmlcsstablelayout

The Jssor bullet navigator is not visible on the webpage

Currently, I am working on implementing a full-width slider with arrow navigators, bullet navigators, and captions using the Jssor plugin. Rather than copying and pasting example code, I decided to tackle this project independently with just a little guida ...

javascriptjqueryhtmlcssjssor

Hide the parent div element if the nested unordered list does not contain any items

I transformed an HTML template into a typo3 template using automaketemplate. Within the HTML code, there is a structure of divs like this <div class="bigPostItWrap">1 <div class="postit">2 <div class="p ...

templateshtmltypo3typoscript

How do Box and Grid components differ in Material-UI?

Can you please explain the distinction between Box and Grid in Material-UI? How do I know when to use each one? I'm struggling to understand their differences. ...

cssreactjsmaterial-ui

floating containers aligned side by side in a perfectly positioned parent container

I'm currently working on aligning a set of buttons within a DIV popup that I've created. My goal is to have the buttons positioned next to each other, but I'm having trouble achieving this. I've attempted using 'float: left', ...

htmlcss