Tips for creating a mobile-friendly contact section on your website

I have encountered an issue with my Contact Us page. Although it works perfectly on desktop, the mobile view is not responsive. Is there anyone who can assist me in resolving this error?

Here is the Contact Us page that needs to function properly on mobile view: https://i.sstatic.net/VkpmE.png

Contact.html

<section id="contact">
        <div class="row mt-5 mb-5">
            <div class="col-6">
                <div class="row text-white ">
                    <div class="col-6 ">
                        <div class="row ">
                            <div class="col-3  icon-fot">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div class="col-9 text-form-footer">
                                <h3 class="font-weight-bold">Find Us</h3>
                                <p>Mreylebon Rd,Merylebon London,NW1SH,UK</p>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-3 icon-fot">
                                <i class="far fa-clock"></i>
                            </div>
                            <div class="col-9 text-form-footer">
                                <h3 class="font-weight-bold">Working Hour</h3>
                                <p style="display: inline;">Mon-Fri : 8AM-5PM</p>
                                <p>Sat-Sun : 8AM-2PM</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 ">
                        <div class="row">
                            <div class="col-3 icon-fot">
                                <i class="fas fa-phone-alt"></i>
                            </div>
                            <div class="col-9 text-form-footer">
                                <h3 class="font-weight-bold">Call Us</h3>
                                <p style="display: inline;">+123 456 7890</p>
                                <p>+123 456 7890</p>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-3 icon-fot">
                                <i class="far fa-envelope"></i>
                            </div>
                            <div class="col-9 text-form-footer">
                                <h3 class="font-weight-bold">Write To Us</h3>
                                <p style="display: inline;"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8cc3eaeae5efe9cce2e3e5ffe9a2efe3e1">[email protected]</a></p>
                                <p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7626041305053618191f05135815191b">[email protected]</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <form>
                    <div class="form-row">
                        <div class="col">
                            <input type="text" class="w-100 p-2" placeholder="Your Name...">
                        </div>
                        <div class="col">
                            <input type="text" class="w-100 p-2" placeholder="Your Email...">
                        </div>
                    </div>
                    <textarea class="w-100 p-2 mt-2" placeholder="Your Message..." rows="5" cols="50"></textarea><br />
                    <button class="btn btn-outline-primary btn-block text-white font-weight-bold">Send</button>
                </form>
            </div>
        </div>
    </section>
htmlcssbootstrap-4

Answer №1

Could you review the code snippet below? I believe it will be effective for your needs.

In order to make this work, make sure to utilize the col-md-6 class instead of the col-6 class within the parent column as demonstrated in the following code:

<section id="contact">
        <div class="row mt-5 mb-5">
            <div class="col-md-6">
                <div class="row text-white ">
                    <div class="col-6 ">
                        <div class="row ">
                            <div class="col-3  icon-fot">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div class="col-9 text-form-footer">
                                <h3 class="font-weight-bold">Find Us</h3>
                                <p>Mreylebon Rd,Merylebon London,NW1SH,UK</p>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-3 icon-fot">
                                <i class="far fa-clock"></i>
                            </div>
                            <div class="col-9 text-form-footer">
                                <h3 class="font-weight-bold">Working Hour</h3>
                                <p style="display: inline;">Mon-Fri : 8AM-5PM</p>
                                <p>Sat-Sun : 8AM-2PM</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 ">
                        <div class="row">
                            <div class="col-3 icon-fot">
                                <i class="fas fa-phone-alt"></i>
                            </div>
                            <div class="col-9 text-form-footer">
                                <h3 class="font-weight-bold">Call Us</h3>
                                <p style="display: inline;">+123 456 7890</p>
                                <p>+123 456 7890</p>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-3 icon-fot">
                                <i class="far fa-envelope"></i>
                            </div>
                            <div class="col-9 text-form-footer">
                                <h3 class="font-weight-bold">Write To Us</h3>
                                <p style="display: inline;"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d321b1b141e183d1312140e18531e1210">[email protected]</a></p>
                                <p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ecbc9e899f9fac8283859f89c28f8381">[email protected]</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <form>
                    <div class="form-row">
                        <div class="col">
                            <input type="text" class="w-100 p-2" placeholder="Your Name...">
                        </div>
                        <div class="col">
                            <input type="text" class="w-100 p-2" placeholder="Your Email...">
                        </div>
                    </div>
                    <textarea class="w-100 p-2 mt-2" placeholder="Your Message..." rows="5" cols="50"></textarea><br />
                    <button class="btn btn-outline-primary btn-block text-white font-weight-bold">Send</button>
                </form>
            </div>
        </div>
    </section>

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

ASP.NET MVC does not automatically refresh when changes are made to the CSS file

Currently, I am diving into the world of Bootstrap 4 within an ASP.NET MVC project, exclusively making changes to the index.cshtml file in JetBrains Rider. However, I've encountered a strange issue that has me stumped. Each day, when I begin writing ...

css.netasp.net-mvcbootstrap-4rider

Navigating the absence of Prismic's ability to use the <blockquote> element in their rich text editor

My experience with Prismic as a headless CMS has been mostly positive, but I recently encountered an issue that surprised me - the lack of support for a simple blockquote. It's baffling to me that such a basic HTML element is not natively supported by ...

htmlcssvue.jsprismic.io

What are the negative effects of placing an external CSS stylesheet link outside of the <head>

At the outset, it is well-known that the <link> tag used to connect an external CSS style sheet should ideally be placed within the <head> section of an HTML document. It is considered unconventional to place it elsewhere. However, due to my u ...

csshtmldomhyperlink

What is the best way to position two text fields next to each other on a webpage?

As I design a form for a landing page, my goal is to arrange the text input fields side by side in order to avoid making the form too lengthy. I am striving to achieve a layout similar to this: https://i.sstatic.net/PTCr4.png However, the task seems quit ...

htmlcss

Pressing the enter key will submit the form

After receiving feedback from users in my live chat room, one common request was to add a feature that allows them to send a message by pressing the enter button, instead of creating a new line in the text box. Despite attempting to implement some jQuery ...

javascriptphpjqueryhtmlajax

What are the best ways to engage with a div element using keyboard shortcuts?

Is it possible to enable keyboard shortcuts for interacting with div elements? I am working on a project tailored for seniors who may have difficulty using a mouse. Is there a way to utilize keyboard shortcuts to click on divs and access their contents? H ...

javascriptjqueryhtmlcss

Compatibility issues with jQuery observed in Firefox and Internet Explorer 11

Check out the code here: jsfiddle demo HTML CODE: <div class="first"> <!-- Part one --> <div class="acord_col"> <div class="img_class" id="exist_site"></div> <div class="intro_text"> </div> </div&g ...

javascriptjqueryhtmlcssfirefox

Preventing Context Menu from Appearing on Long Click in HTML5 Games

I'm attempting to utilize a similar technique as demonstrated in this stackoverflow post: How to disable the 'save image as' popup for smartphones for <input> However, I am encountering an issue where my button is not displaying at ...

javascriptjqueryhtml

Utilize JavaScript to load an external script at the bottom of the body for improved website performance

On my website, I am utilizing the Mobile ESP script to determine whether visitors are accessing it from a mobile device or desktop. Depending on the type of device, I dynamically load the necessary scripts and CSS stylesheets for optimal navigation. Howev ...

javascriptjqueryhtmlcss

"Enhance your website with a backspace button using jquery - here's

Recently, I delved into the world of jQuery and decided to test my skills by creating a jQuery calculator. Everything worked perfectly except for the backspace button. This is what I tried: if (value === backspace) { $(input).val($(input).val().substring ...

javascriptjqueryhtmlcss

Is there a way to set a higher priority over the "!important" rule on my website?

I'm encountering a strange issue with my website. I have been working on this website and am looking to change the color of the main menu hover links from white to orange. Here is the CSS related to that section: .darkheader .navigation > ul > ...

csswordpressthemesoverriding

Prevent the colorpicker feature for the <input type="color"> element on Google Chrome

When using Google Chrome, the <input type="color"> element creates an input field with a color bar inside it. By default, it opens a colorpicker that may vary in appearance depending on the operating system (mine has a Windows theme). I have implemen ...

jquerycsshtmlgoogle-chrome

CSS dimensional changes

I am currently working on developing an application that involves incorporating a perspective map with the ability to add map markers represented by absolutely positioned DIVs. However, I seem to be encountering challenges related to transformations and 3D ...

csscss-transforms

If a number already exists, create 3 tables using MySQL and PHP

Currently facing an issue, I am in the process of developing a custom registration form for a browser game. I need to assign planets upon registration to users. Here's the breakdown: 9 galaxies, each galaxy consisting of 400 systems with each syste ...

phphtmlmysqlrandom

`No valid form submission when radio buttons used in AngularJS`

Within my form, I have a single input text field that is required (ng-required="true") and a group of radio buttons (each with ng-model="House.window" and ng-required="!House.window"). Interestingly, I've discovered that if I select a radio button fir ...

javascripthtmlangularjs

Designing CSS elements that flow from top to bottom, left to right, and extend to the right when overflowing

I'm attempting to create a layout where divs are displayed from top to bottom, but once they reach the bottom of the browser window, any additional divs will overflow to the right. You can take a look at the desired layout here: https://i.stack.imgur. ...

javascriptcsshtmloverflow

Ajax calls within nested functions are not being executed in the correct sequence

Currently, I am utilizing the geonames API to retrieve geographical information. My objective is to extract the names of states within a country using the getStateInfo function and subsequently obtain a list of cities in each state through the getCityInfo ...

jqueryhtmlajaxpromisegeonames

Displaying nested arrays correctly

My latest endeavour involves constructing a data tree in Vue, utilizing components. Let's examine the provided data snippet: "data": [ { "id": 1, "name": "foo", "children": [ { "id": 2, "name": "bar", "children": [] } ...

javascripthtmlvue.jsvuejs2

Discover how to apply unique styles to specific HTML elements using their index values in jQuery

In the process of creating a party game similar to Tambola or Housie, I am faced with the challenge of automatically detecting and highlighting the numbers called out on each ticket in the game. For instance, if number 86 is announced, I aim to visually di ...

javascripthtmljquerycsshtml-table

Struggling to synchronize animation timing between elements using jquery

When you navigate to an album (for example, Nature because I'm still working on the others) and select one of the images, they all gradually fade out while the selected image appears on the screen. What's actually happening is that the selected i ...

javascriptjqueryhtmlcss