I am having trouble aligning my div perfectly and ensuring its responsiveness

I am working on a school project using HTML and CSS. The upper parts above the buttons are centered and responsive, but I am having trouble with the buttons. They are not centered (I adjusted the width to 60%) and they are not responsive. Any assistance would be greatly appreciated.

image here

Below is the CSS code:

.Sports-type{
    padding: 10px;
    width: 60%;
    margin: auto;
    text-align: center;
    display: grid;
    grid-template-columns: auto auto auto;
}

I have tried various display commands and experimented with width, padding, and margin, but haven't achieved the desired results.

htmlcssresponsive-designcenter

Answer №1

To align the buttons in the center and ensure they are responsive, you can use display: flex instead of display: grid.

.Sports-type {
    padding: 10px;
    width: 60%;
    margin: auto;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* Adjust as necessary */
}

.Sports-type button {
    width: calc(33.33% - 20px); /* Adjust width and spacing accordingly */
    margin: 10px; /* Adjust margin as necessary */
}

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

Struggling with developing a straightforward application with Angular-Material

My goal is to develop an application that utilizes the Angular Material navigation bar, as showcased in this example. Being relatively new to AngularJS, I'm facing an issue where my app loads but only displays a blank page. Below is the code snippet ...

javascripthtmlangularjstwitter-bootstrapangular-material

Transfer the html div element to the ajax request

My server-side code runs multiple bigquery queries and organizes the results in a table. The client calls this code via an ajax request. I want to send the table/div generated by the server-side code to the client so that it can be rendered there. Is this ...

javascriptjqueryhtmlnode.jsajax

Stylized border on grouped sections

I am facing a design challenge with 2 columns, floated to each side, and I am looking to incorporate a 1px width line separator that extends from the top to the bottom of the longest column. I am avoiding the use of TABLE layouts and I am unsure of which ...

css

Delete a div when a button is clicked through JavaScript

I'm having an issue with a form I created that duplicates itself - I can't seem to get the 'x' button to remove the corresponding div as needed. I have placed both buttons outside of the div like this: <button type="button" id="cro ...

javascriptjqueryhtmlcss

Is has-danger feature no longer supported in the latest version of Bootstrap v4 beta?

The Bootstrap migration guide mentions: The .has-error class has been renamed to .has-danger. However, I have found that this change does not seem to take effect. The border and text are not colored as expected. For instance: <div class="form-grou ...

twitter-bootstrapcssbootstrap-4

Switch the displayed image(s) based on the radio button selection made by the user

I need help implementing a feature on my website where users can change an image by selecting radio buttons. For example, there are three options: 1) Fox 2) Cat 3) Dog When the user chooses "Fox," I want an image of a fox to be displayed. If they then sw ...

javascripthtmlcsscolorsradio-button

Is it possible to keep my JavaScript scripts running continuously within my HTML code?

I recently set up a JavaScript file that continuously queries an API for updates. It's currently linked to my index.html, but I'm looking for a way to keep it live and running 24/7 without requiring the browser to be open. Any suggestions on how ...

javascripthtml

Dynamic Material UI TextField underline width using JSX in React

I recently encountered an issue while trying to add padding to my TextField component. I applied the padding to the root 'style' property, but it caused the underline to overflow beyond the designated area to the right by the same amount as the p ...

cssreactjsmaterial-uijsx

Seeking suggestions for an HTML line graph to visually represent the status of devices

Seeking advice on the best chart library for displaying device states (on/off) across a timeline in an HTML page. The graph should resemble a logic analyzer display with each device represented by a separate line on the Y axis, toggling between high and lo ...

javascripthtml

Footer not adhering to the bottom of specific pages

I have been using the code snippet below to ensure that most of my pages stick to the bottom. However, I've noticed that the ones that don't are sub-menu items that contain a contact form with captcha. I'm not sure what's causing this i ...

css

Middle position of the rotating display

Currently working on a shop's image carousel where I'm implementing scroll-snap-type: x mandatory; for the container and scroll-snap-align: center; for the images. However, running into a challenge where the container sometimes exceeds the width ...

htmlcss

Convert a String to JSON using either JavaScript or jQuery

Currently, I am developing a JavaScript animation script and I am aiming to allow individuals to define behavior declaratively within the HTML. This is the format I envision for my HTML: <div data-animation="top: 600, left: 600, opacity: 1, start: 0.2 ...

javascriptjqueryhtmljson

HTML formats for tables in Google Chrome

Having trouble pinpointing the error in this code. It works perfectly in Firefox and IE, but in Chrome, the inner cells are not centered as intended. <table cellpadding="0" cellspacing="0" style="width: 100%"> <tr> <td rowspan=" ...

htmlhtml-table

``Troubleshooting: Problem with Rails checkboxes and error-ridden fields

Hello there! I've encountered an interesting problem that I've traced back to using a custom bootstrap checkbox. Everything works fine, except for when I try to submit the form without checking the checkbox and receive an error message. After thi ...

htmlruby-on-railsbootstrap-4

A guide on retrieving values from programmatically created input elements in Java

Here's the HTML code that I am currently working with: <form method="get" action="#" id="startForm"> <input type="text" name="period" id="period" placeholder="The number of days"/> <input type="submit" name="submit" value="subm ...

javascripthtmlfor-loopdom

Having trouble loading the linked CSS file in the Jade template

My directory structure is organized as follows: --votingApp app.js node_modules public css mystyle.css views test.jade mixins.jade In the file mixins.jade, I have created some general purpose blocks like 'bo ...

javascripthtmlcssnode.jsexpress

Tips for creating responsive images when using two images stacked on top of each other:

One of my challenges with using Bootstrap is trying to place an image on top of another image. Here's the HTML code I currently have: <section id="test"> <div class="row"> <div class="imgbg"><img src="img/bg_pres.png ...

cssbootstrap-4

Tips for retrieving HTML file content as a string using JavaScript

I'm looking to retrieve the contents of an HTML file using JavaScript and store it as a string. I tried writing some code for this purpose, but unfortunately, I encountered an error: Error: Cannot find module 'xmlhttprequest' Could someone ...

javascripthtmlnode.js

What is the process for loading a PHP page dynamically within the <DIV> of another PHP page?

At this moment, I have two PHP pages named test1.php and test2.php. In the test1.php page, there are 2 DIVs: one labeled "SubmitDiv" and the other "DisplayDiv". Inside the SubmitDiv resides a Submit button. The desired functionality is that when a user cli ...

phpjqueryhtmlajax

Arranging blocks within blocks? Placing additional text underneath a block

Looking to append some text at the end of a block called .label. Inside this block, there is a sub-element called .label_title, and below that is a picture/link enclosed in another block. Under the picture/link, I wish to include a short description while ...

cssblock