The official sign-in buttons for Facebook, Google, and Twitter are all neatly aligned on the same row with a sleek and

https://i.sstatic.net/bXOMb.pngHello, I am currently working on integrating social media sign up functionality into my Oracle Apex login page. To achieve this, I am utilizing JavaScript APIs for various social media applications. However, I'm facing an issue with the design of the buttons as they are not appearing in a visually appealing manner. My goal is to have all the buttons aligned in the same row and of equal width and height.

You can track my progress below

<div class="g-signin2" onclick="gmailLogin()" data-onsuccess="onSignIn" data-width="200" data-height="30" data-longtitle="false"></div>
</br> 
<div id="fb-root" ></div>
<script async defer crossorigin="anonymous" src="my link></script><div class="fb-login-button fb_iframe_widget" data-width="" onlogin="facebookLogin()" data-size="medium" data-button-type="continue_with" data-auto-logout-link="false" data-use-continue-as="false"></div>
javascripthtmlcssresponsive-design

Answer №1

<div class="" style="width:100%">
    <div style= "width:100%" class="g-signin2" onclick="gmailLogin()" data-onsuccess="onSignIn" data-width="200" data-height="30"
        data-longtitle="false">
    </div>
</div>

<div class="" style="width:100%">
    <div style="width:100%" id="fb-root"></div>
</div>
<script async defer crossorigin="anonymous" src="my link></script><div class=" fb-login-button fb_iframe_widget"
    data-width="" onlogin="facebookLogin()" data-size="medium" data-button-type="continue_with"
    data-auto-logout-link="false" data-use-continue-as="false">

Update the code as per below

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

What is the process for downloading an image in MobileSafari?

I'm currently working on an iOS website and I am facing a challenge in retrieving recently copied images using JavaScript. When you press and hold your finger on an image within a website, a menu appears with options to either Save the image or Copy. ...

javascriptiphoneipadweb-applicationsclipboard

Navigating nested JSON objects using D3 - A guide

I have a problem in my REACT application where I am trying to implement Mike Bostock's Multi-Series Line Chart using D3 v4. I am reading JSON response with axios and passing it to a component using react-faux-dom, but even though the object seems corr ...

javascriptjsonreactjsd3.js

Troubleshooting CSS navigation bar hamburger dilemma

Currently, I am facing an issue with a toggle button on my website. When I click on the hamburger menu, the navigation bar does not show up even though the toggle feature is working perfectly fine. I have tried combining different sources to solve this pro ...

htmlcsshamburger-menu

Creating a progress bar with a mouse listener in React Material Design

I encountered an issue while working with React and React Material-UI components. Here is what I'm trying to achieve: 1) When the user clicks a button in my component, I want to add a mousemove listener to the page and display a ProgressBar. 2) As ...

javascriptreactjsreact-hooksmaterial-ui

Using JQuery to switch out images that do not have an ID or class assigned

Currently, I am using a Google Chrome Extension to apply an external theme to a website. Unfortunately, the logo on the site does not have an ID or class that can be used to call it. I am searching for a solution to replace it with a different image. My ...

javascriptjquerycssgoogle-chrome-extension

The map functionality is failing to render on the three.js object

function generate_geometry(scene) { var mesh; var material; var texture; var geometry; geometry = new THREE.BufferGeometry(); geometry.attributes = { position: { itemSize: 3, array: ...

javascriptthree.js

Struggling to make HTML5 validation function properly

I'm struggling to make HTML5 validation work in conjunction with AngularJS. Instead of displaying the error message, the form is submitted even when a field is required. If anyone has any insights on how to successfully implement HTML5 validation wi ...

angularjshtmlvalidation

Creating an empty array within an object in JavaScript

Consider the following scenario: var form = { header: { value: null, isValid: false, type: 'textinput', rules: { isRequired: true, ...

javascriptreactjsreact-native

Creating custom shaders in three.js that can receive shadows involves a few key steps. Let

For more information, you can visit the original post here. The task at hand seems to be quite complex due to the lack of documentation and examples on this specific topic on the three.js website. Currently, I am able to render the correct image and, with ...

javascriptthree.js

What is the best way to streamline JSON file data by selectively extracting necessary information?

After exporting my user data from Firebase, I am looking to streamline the JSON file by filtering only the necessary fields for my data model. The format of the file obtained from Firebase is as follows: { "Users": { "00uniqueuserid3& ...

javascriptnode.jsjsonmongodbfirebase

JavaScript can be utilized to alter the style of a cursor

I'm currently developing a browser game and incorporating custom cursors into it. To ensure the custom cursor is displayed throughout the entire page, I've applied it in my CSS (though setting it up for 'body' occasionally reverts back ...

javascriptcursor

Ensure that the URL is updated correctly as the client navigates between pages within a Single Page Application

Seeking a solution for maintaining the URL in a Single Page application as the client navigates between pages, with the URL changing in the background. I attempted using @routeProvider but it doesn't seem to be suitable for my situation. Any suggestio ...

angularjshtmlcssurl

Understanding the process of extracting HTML tags from an RSS feed using Python

I am looking for a way to create a plain text readout of an RSS feed using a small utility. Below is the code I have: #!/usr/bin/python # /usr/lib/xscreensaver/phosphor -scale 3 -program 'python newsfeed.py | tee /dev/stderr | festival --tts' ...

pythonhtmlparsingrss

In the Android Chrome browser, the settings of the meta viewport attribute do not take effect when the device is in full screen mode

While using the fullscreen api in Android, I noticed that the values of meta viewport attributes like initial-scale and user-scalable are not reflected in the browser when in full screen mode. However, when not in full screen mode, these values work as exp ...

javascriptcssfullscreenviewportresponsive

Is it possible to create a functional component inside the body of another functional component in React?

Recently, I've noticed some of my team members utilizing the following code structure which has prompted me to question our current approach. It's a method I haven't come across before and it raises concerns about whether we are coding in th ...

javascriptreactjsjsxreact-functional-component

"Vue3 offers the ability to return a multi-layer object through the Provide-Inject

While implementing provide-inject in my personal project, I encountered an issue where the value returned by inject() was a RefImpl Object. This meant that I had to access the actual value using inject().value.value instead of just inject().value. Here is ...

javascriptvuejs3

Is it possible to use function declaration and function expression interchangeably?

As I dive into learning about functions in Javascript, one thing that's causing confusion for me is the difference between function declaration and function expression. For example, if we take a look at this code snippet: function callFunction(fn) { ...

javascriptnode.jsfunctionfunctional-programming

Is there a simple way to set the form inputs to right-to-left without excessive duplication?

Is there a way to apply the right-to-left (RTL) direction to a form without duplicating code for every input, based on the locale of the language being used? Can the locale be changed in CSS to make the form RTL more efficiently? For example: <div ...

csslaravelbootstrap-4

How can a tab be created using a link within a tab using jquery easyui?

Tabs documentation My goal is to add a new tab from a link within an existing tab. For instance, in tab A, there should be a link "open tab B" that when clicked, adds tab B. I have attempted to create a tab with a link outside of the tab (which works). ...

javascriptjqueryjquery-easyui

Opacity is causing issues with hover effects in CSS

I'm facing an unusual CSS challenge. Check out this simple code snippet below that showcases the issue: <html> <head> <style> .hover { float: right; } .hover:hover { background-color: blue; ...

csshoveropacity