What is the best way to ensure that two contact fields are capable of adapting

Looking for a way to center two fields ("Call Us" and "Our Email") while also ensuring they are responsive on different screen sizes? The goal is to have them stack one on top of the other when viewed on a small screen. Even though inline CSS has been used to position them correctly on large screens, they fail to stack as intended on smaller screens. Since no CSS file was found to place the code in, the current solution involves using inline CSS. Is it feasible to utilize inline CSS to address this issue? If so, here is the existing inline CSS that successfully centers the two fields on a large screen.

<div style="justify-content: center; display:flex;" class="row"> 
  <div class="col-xl-4 col-xs-4 col-lg-4 col-md-4 col-sm-4 col-12 footer_contact_info">

However, this setup does not ensure that the fields are responsive and stacked properly on smaller screens. Initially, there were three fields with "Our Address" being the third field which has since been removed.

Attempting to make the layout responsive for small screens by adding additional inline CSS did not yield the desired outcome.

htmlcsstwitter-bootstrapbootstrap-5responsive

Answer №1

It seems like you are utilizing the Bootstrap framework. The row class already includes display: flex, so your inline style is unnecessary. It's recommended to utilize the justify-content-center class instead of using inline styles.

Your current code:

<div style="justify-content: center; display:flex; class="row">

Should be updated to:

<div class="row justify-content-center">

Refrain from specifying the same number of columns at every breakpoint. Use the appropriate class only for the breakpoints where you want the changes to take effect, as it will automatically apply to all larger breakpoints.

Your current code:

<div class="col-xl-4 col-xs-4 col-lg-4 col-md-4 col-sm-4 col-12 footer_contact_info">

Should be updated to:

<div class="col-sm-4 col-12 footer_contact_info">

As you have not provided a reproducible example, I am inferring what your structure might be.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0c2cfcfd4d3d4d2c1d0e0958e938e90">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row justify-content-center"> 
    <div class="col-sm-4 col-12 footer_contact_info">Call Us</div>
    <div class="col-sm-4 col-12 footer_contact_info">Our Email</div>
  </div>
</div>

Answer №2

To fix the issue, try adding flex-direction:column to the style attribute of your initial div. If that doesn't work, remove the class="row" from the first div and any other classes from the second div.

For example:

<div style=" display:flex; flex-direction:column; align-items:center"> 
<div>

Additionally, keep in mind that when using column order, the property justify-content will not have an effect. If you want your items to be centered on the page, replace justify-content with align-items as demonstrated above. However, if centering is not desired, feel free to ignore or remove that portion.

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

Dropping anchor whilst skipping or jumping

One of my website elements is a drop anchor that connects from a downwards arrow situated at the bottom of a full-page parallax image to another section on the same page. The HTML code snippet for the drop anchor is as follows: <section id="first" cla ...

javascriptjqueryhtmlcsswordpress

The CSS JSON code I have written is not having any impact on the appearance of my div

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles/common.css"> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script type='text/javascript'> ...

cssjsonjsonp

What is the best way to align content in the middle of a containing div?

I am struggling with centering text and images inside a div that is 190px x 190px. Despite searching on various platforms, including SO and Google, I have not found a simple solution. Can someone please provide guidance on the easiest way to achieve verti ...

csshtml

What causes pagination to be displayed outside of the main section in Firefox when using swiper?

When using swiper, why does pagination display outside of the main section in Firefox when inserting slides with different content lengths? This issue seems to only occur in Firefox and not in other browsers like Chrome. I have noticed that using two boots ...

htmlcssbootstrap-4swiper.js

Error in THREE.js: Failed to retrieve object at http://192.168.8.104:8080/[object%20Object] (Error code: 404) - Module: three.module.js

During my attempt to create a text loader in THREE.js, I encountered an error instead of getting the expected text output. three.module.js:38595 GET http://192.168.8.104:8080/[object%20Object] 404 (Not Found) I made various efforts to resolve this error ...

javascripthtmlcssthree.js

Preventing the use of double-click on Grooveshark

I am currently in the process of creating a webpage to serve as a jukebox for parties. My goal is to have the page load Grooveshark with a transparent overlay (or any other necessary method) that can prevent users from forcefully adding their song to the f ...

javascripthtmloverlay

Build interactive web pages using Python scripts

By utilizing the Python scripts provided below, you can generate an HTML file with pre-set global variables (a, b, c, d). However, there might be instances when certain variables are not set globally, resulting in errors like "global 'a' is not d ...

pythonhtmlpython-2.7

The div background image in Vue.js is displaying a 404 not found error

I've encountered an issue while trying to set a background for a div. Strangely, when using the same relative path with an img tag everything works fine, but as soon as I try to achieve the same result with a div, I receive a 404 error. This img tag ...

htmlcssvue.js

Trouble with Displaying HTML Table in Bootstrap 4.3.1 Tooltip

Struggling for hours to set up a custom HTML table in a tooltip box, I finally found that the Bootstrap version solves the issue. Surprisingly, it works perfectly under Bootstrap 4.0.0 but fails under Bootstrap 4.3.1. Could this be a bug or am I overlooki ...

javascripthtmlcssbootstrap-4

Vue.js does not support using nested v-for loops with p tags

I'm facing an issue with nesting 2 v-for loops in Vue.js. It seems simple, but for some reason, it's not working as expected and I can't figure out why. Looping through the users and displaying their names works perfectly. Even extracting t ...

htmlvue.jsvuejs2vue-componentv-for

Issue with readonly is preventing the ability to alter the font color of the input

I need to change the font color of a disabled input. When it is disabled, it appears gray and I want it to be black instead. I attempted to use readonly but that did not have the desired effect, and now the input is showing [object Object]. Below is my HTM ...

javascripthtmlcssangulartypescript

I'm having some trouble with my jQuery.get() function in the javascript Saturday(), can anyone help me figure out what I'm doing wrong?

Can anyone help me troubleshoot my jQuery.get() method in the saturday() JavaScript function? Here is the code snippet I have been working on. This is what I have in my index.html file: <html> <head> <title>jVectorMap demo</title> ...

javascriptjqueryhtmlajaxhighcharts

Implementing an unordered list in an inline format, even when it is collapsed with Bootstrap

Recently, I've been delving into Bootstrap and experimenting with coding a basic website. Below is the code for the navbar: <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class ...

htmlcsstwitter-bootstrapnavbar

Website loses its css after printing

I'm having trouble printing a website with a simple layout featuring two columns, each containing tables. The website I want to print is located at the following link: . However, when I try to print it using the JavaScript function window.print(), the ...

javascripthtmlcssprinting

Leveraging JavaScript along with the jQuery library and API to showcase information related to

Hey there! I have been working on this API that shows upcoming concerts, but I'm struggling to display the images associated with each concert. I've tried using for loops to iterate through the objects, and it seems like every sixth element has ...

javascriptjqueryhtmlajaxobject

Keeping your Contact Form 7 perfectly centered on your WordPress website

Currently, I am utilizing the contact form 7 plugin on my Wordpress website. While I have two forms set up, I only want to center align one of them. To achieve this, I initially added the following CSS code in my additional CSS: div.wpcf7 { text-align: c ...

csswordpress

I am interested in updating the color of the navigation bar displayed on this website

I am having some trouble with manipulating the appearance of - Specifically, I'm struggling to change the color of the black bar at the top to blue. I have scoured the CSS files and examined the HTML, but I can't seem to locate the relevant code ...

htmlcsstwitter-bootstrap

Utilize the return function in a separate PHP file

I wanted to create a basic login form as a way to dive into learning php. After setting up the form, I wrote a function that sends a query to a MySQL database to fetch the username and password (stored in md5 encryption) for comparison with user input. T ...

phphtmlmysql

Developing a custom mixin to alert a banner at the top of the webpage

I currently have a feature on my website that triggers a pop-up notification whenever a message is received from another user. The pop-up consists of a div displaying the content of the message along with a close button. After exploring various methods to ...

htmlcsscss-transitions

What to do when CSS Overflow doesn't work as expected?

Are there any alternatives for browsers that don't support CSS overflow? I am working on a new layout that heavily relies on the overflow property, however it seems like android browsers do not handle it well and as a result, my layout is broken. I am ...

javascriptjqueryandroidcss