HTML mobile buttons showcase

I have been developing an incremental game using HTML, CSS, and JS. The issue I am facing is that the buttons for buildings and other clickable features appear properly on a laptop or desktop but only display one line of text when viewed on a tablet or phone.

How can I ensure that the button displays the same way on mobile devices as it does on a desktop computer?

EDIT: I suspect the issue may be with the Chrome browser on mobile devices as friends testing on iPhone and tablets experienced the same problem. Currently, there are no CSS styles applied to the buttons.

Here is an image illustrating the problem:

This is the HTML code in question:

<button onclick="buyDirtHut()">
  Buy Dirt Hut<br />
  Each Dirt Hut gives you 2 population per second<br />
  Dirt Huts: <span id="dirtHuts">0</span><br />
  Dirt Hut Cost: <span id="dirtHutCost">1000</span> Gold
</button>

javascriptcsshtml

Answer №1

If you want a consistent look across all browsers and mobile devices, it's best not to use the default button tag. Instead, consider using simple styled divs for your buttons. Using the default button tag can result in different appearances on various browsers, especially mobile ones. If you need assistance customizing your own button styles, don't hesitate to reach out.

Here's an example of how you can create a custom button:

<div class="building" onclick="myfunction();">
   <!-- Add your content here -->
</div>

To style this button, you can use the following CSS:

.building {
     cursor: pointer;
     background-color: #AFAFAF;
     color: #000000;
     width: 200px;
     height: 70px;
     float: left;
     margin: 5px;
}

.building:hover {
     background-color: #8F8F8F;
     color: #111111;
}

Feel free to adjust the CSS properties to match your preferences.

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

Verify that a certain number of checkboxes are left unchecked

I have a collection of checkbox input elements in my HTML: <input type="checkbox" id="dog_pop_123"> <input type="checkbox" id="cat_pop_123"> <input type="checkbox" id="parrot_pop_123"> My requirement is to check if none of these checkbo ...

javascriptjquerycheckbox

Is there a way to horizontally center Material UI Switch and its icon props?

I'm using Material-UI to implement a Switch component on my project. This particular component allows for the addition of icons, however, I've encountered an issue with alignment when including them. Is there a way to horizontally center align b ...

javascripthtmlreactjsmaterial-ui

Using JQuery to dynamically set dropdown option values from a JSON object

I have an HTML code snippet: $.ajax({ type: "POST", url: "hanca/hanca_crud.php", dataType: 'json', data: { id_hanca: id_hanca, type: "detail_hanca" }, //detail_hanca success: function(data) { var teks = ""; $.each( ...

javascriptjqueryhtmljsonajax

changing background color smoothly in a short time without using JQuery

Check out this link for some code .back { margin: 20px; padding: 100px; background: yellow; font-size: 30px; } <div class="back"> Fun place to stay. We got a golf cart to see the rest of the island, but the ...

htmlcss

What is the process for incorporating a function into the prototype of an interface that functions as a class?

Adding a function to the prototype of a value is simple. For example: Array.prototype.removeAt = function (index) { if (index >= 0 && index < this.length) { this.splice(index, 1); } return this; }; declare global { export interfa ...

javascripttypescriptvue.jsvuejs3vue-router

Cleaning up HTML tags from API search results in a React application

Using React to fetch and display search results from the Wikipedia API const resultsList = results.map((result) => { return ( <div key={result.pageid} className="item"> <div className="content"> <div classNa ...

javascripthtmlreactjsapi

Multiple presentations on a single webpage

I'm encountering some difficulty trying to incorporate multiple slideshows onto a single page. Currently, I am able to successfully add two operational slideshows, but as soon as I attempt to introduce a third one, everything becomes unstable. Would ...

javascripthtmlcssslideshow

Creating dynamic visual effects using Jquery to showcase a sequence of outcomes

I am currently working on animating the results of a database query using jQuery. My goal is to have it display similar to Soh Tanaka's web tutorial example, where the element expands when hovered over and fills the parent element when clicked. I wa ...

jquerycssanimation

What is the best way to combine XHTML files in Java while handling any potential CSS conflicts that may arise

Looking for a way to concatenate XHTML files in Java and resolve CSS collisions at runtime? The challenge is to merge files with different style definitions without losing any content. JSoup seems promising but falls short on managing style conflicts autom ...

javacsshtmlxhtmlconcatenation

Failed to successfully sort several distinct lists using the ng2-dnd sorting library

Recently, I came across a fantastic drag-and-drop library on GitHub that I decided to use. In my current project, I have created a view with three different buttons, each revealing a list when clicked at the same position but not simultaneously. However, ...

javascripthtmltypescriptangularangular2-routing

What is the process for loading the chosen option JSON object from an array when a button is clicked?

I have a TypeScript file containing JSON objects that can be selected as options from a dropdown list. I am looking for guidance on how to load/instantiate the selected JSON object when the user clicks a button to proceed. Specifically, I would like to le ...

htmlarraysjsonangularobject

Extract information from the table using $_POST

I possess a datatable within a form. Inside that table, there is a column designated for setting a price. Upon submitting the form on the same page, the $_POST data fails to populate. Consequently, I am in need of inserting it into the MySQL db post-submit ...

phphtmlmysqldatatable

Issue with Jquery Fly To Cart Animation on Mobile Devices

On desktop view, I successfully added a 'fly to cart on click' function, but when switching to mobile view, it flies to the left side of the screen where my cart icon is not located. It essentially flies to the 'hamburger menu.' I' ...

javascriptjqueryjquery-uishopifyliquid

Error: the function method is not declared in the JavaScript/jQuery code

Within my main.js file, there is a method outlined as follows: ;(function ($, window, document, undefined) { 'use strict'; var testing = function(d) { //irrelevant code }; })(jQuery, window, document); In the HTML of my pr ...

javascriptjqueryhtml

The static files for the icon CSS (404 Error) from Flaticon and Font-mfizz are failing to load properly

When I was designing a website, I needed an icon of Python, so I turned to Flaticon and found what I was looking for. This snippet shows the HTML code I used: {% load static %} <!DOCTYPE html> <html lang="en"> <head> <li ...

javascripthtmlcssdjangoweb

What is the process for utilizing JEST to test a REST API built with Express?

Is it possible to solely use JEST for testing my rest API endpoints in express? I've undertaken various articles and browsed through questions on Stack Overflow to explore how this can be achieved. However, it seems like most individuals prefer using ...

javascriptnode.jsunit-testingexpressjestjs

Having trouble aligning text in the middle?

I can't seem to get my text centered on my landing page, despite using top: 50%; left: 50%; in my HTML. Here's the code I have after the <body> tag- <div style="position: absolute; top:50%; left:50%; width:500px; height:25px"><fon ...

csshtmltextcenter

I possess a JSON array object and need to identify and extract the array objects that contain a specific child node

const jsonArray = { "squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "secretBase": "Super tower", "active": true, "members": [ { "name": "Molecule Man", "age": 29, "secretIdent ...

javascripttypescript

When the navbar is expanded, a right-aligned image is visible; however, it becomes invisible when the

My website has a navigation bar with two logos - one in the left corner (the coat of arms) and one in the right corner (the scout lily), along with text links in between. The coat of arms uses the "navbar-brand" class. To see how it looks, click here: htt ...

htmlcsstwitter-bootstrapbootstrap-5

Tips for generating numerous sub div tags using jQuery

Is there a way to achieve this output with jQuery? I have working code here: . (See image for reference: https://i.stack.imgur.com/eOXiN.png) When trying to replicate the same using jQuery, I encountered an issue where there is no spacing between two imag ...

jqueryhtmlcss