Place a circular grid at the center of a webpage

Is there a way to align this grid in the center of a webpage? It appears skewed on mobile view but not on larger screens. The issue seems to be primarily with mobile devices. For instance, when viewed on a mobile device, the circles are positioned to the right instead of being centered on the screen.

ul {
padding:0;
margin:0;
display:grid;
grid-template-rows: repeat(auto-fill, 220px);
grid-template-columns: repeat(auto-fill, 220px);
grid-gap:0px;
}

li.small {
width:200px;
height:200px;
background-color:palegreen;
border-radius: 50%;
grid-row:auto / span 1;
grid-column:auto / span 1;
margin:10px 0;
}

li.big {
margin:0;
width:400px;
height:400px;
background-color:black;
border-radius: 50%;
grid-row:auto / span 2;
grid-column: auto / span 2
}
li {
display:block;
padding:0;
margin:0;
align-self:center;
justify-self: center;
}
<ul>
<li class="small"></li>
<li class="small"></li>
<li class="small"></li>
<li class="small"></li>
<li class="big"></li>
<li class="small"></li>
<li class="small"></li>
<li class="small"></li>
<li class="small"></li>
<li class="small"></li>
<li class="small"></li>
<li class="small"></li>
<li class="small"></li>
<li class="big"></li>
<li class="small"></li>
<li class="small"></li>
<li class="small"></li>
<li class="small"></li>
<li class="small"></li>
<li class="small"></li>
<li class="small"></li>
<li class="small"></li>
<li class="big"></li>
<li class="small"></li>
<li class="small"></li>
<li class="small"></li>
<li class="small"></li>
       

</ul>

Answer №1

To center the grid, apply the style margin: 0 auto to the classes li.small and li.big.

For an example, check out the jsfiddle here.

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

Tap the mobile menu button twice to toggle the menu

Incorporating: Visual Studio 2013, ASP.NET (VB) Webforms. Upgrading an existing WebForms website from .NET 2.0 to .NET 4.5 and implementing mobile-friendly features for better Google support. I have added a button to the top right corner as follows: < ...

Retrieve the value of a PHP array within a for loop and transfer it to JQuery

*edited format I came across a PHP code for a calendar on the internet and I am currently working on implementing an onclick event that captures the date selected by a user as a variable (which will be used later in a database query). At this point, my g ...

Incorporating Dynamic Javascript: A Step-by-Step Guide

I came across a select object that looks like this: <select id="mySelect" onchange = "start()" > <option>Apple</option> <option>Pear</option> <option>Banana</option> <option>Orange</option> < ...

Steps for Embedding an HTML Page into a Tab using jQuery

Within the tab labeled class=plots-tabs-heatmap, I am attempting to insert a new page using the code below. However, instead of seeing tmpdata/page2.html displayed on the tab, nothing appears. $('#plots-tabs-heatmap').html("tmpdata/page2.html"); ...

Choosing the attribute value using jQuery/CSS

Looking for a way to retrieve attribute value using jQuery/CSS <dt onclick="GomageNavigation.navigationOpenFilter('price-left');"> I tried using $("dt[onclick='GomageNavigation.navigationOpenFilter('price-left')']") bu ...

Ensure the item chosen is displayed on a single line, not two

I've encountered an issue with my select menu. When I click on it, the options are displayed in a single line. However, upon selecting an item, it appears on two lines - one for the text and another for the icon. How can I ensure that the selection re ...

Can a gradient box arrow be created using CSS 3?

Check out the following link to see a green box with a left-pointing arrow that floats: Is it achievable using solely CSS3? Can the arrow shape and gradient be created to appear in both the box and the arrow? If yes, how would you go about achieving this ...

efforts to activate a "click" with the enter key are unsuccessful

I'm attempting to enhance user experience on my site by triggering the onclick event of a button when the enter key is pressed. I've tried various methods below, but all seem to have the same issue. Here is my HTML (using Pug): input#userIntere ...

Showing a solo item from an array in HTML using Angular

How can I display the account name instead of the accountId property value from my list of transaction items? I have a list of transactionitems with an accountId property, and all accounts are loaded in the accounts$ array. However, I am having trouble us ...

Creating a smooth sliding textarea in HTML

I am working on creating an HTML table with numerous text input areas (textarea) that expand downwards when clicked. Currently, the textarea element expands properly but disrupts the layout of the table. My goal is to achieve a design like this Instead o ...

Track and log specific route requests with ExpressJS morgan feature

Hello, I am currently utilizing the NodeJS web framework Expressjs along with a middleware called morgan to log requests to a file. Here is my configuration: // create a write stream (in append mode) var accessLogStream = fs.createWriteStream(__dirname + ...

The HTML navbar seems to have a mind of its own, disappearing and shifting around unpredictably as I zoom in or resize

WHEN DISPLAYING THIS CODE, IT IS ADVISED TO VIEW IN FULL PAGE MODE This code includes navigation, header, and styling elements. However, when the browser is zoomed in or out, the navbar tends to move around and eventually disappears off the screen if wind ...

Adjust the color of text in an input field as you type (css)

I am trying to customize the appearance of my search box by making the text color white. However, even after changing the placeholder color and text color to white in my CSS code, the text color only changes to white when the user clicks out of the form. W ...

Guide to activating the timer specifically on select pages with jQuery Mobile

I've developed a quiz application using jQuery Mobile and I am working on implementing a timer feature. The timer should run from 0 seconds up to 1 hour but only when the user is viewing specific pages, specifically the question pages. The timer is di ...

The contact form is set up to send emails through contact.php, but I prefer not to have it redirect to another page. Sending emails works

Don't worry, I have already searched many places and tried to watch other forums and videos. I'm not looking for an easy solution. When I submit a form on my page it redirects to www.mypag.com/contact.php. I'm trying to use AJAX so that the ...

Display immersive full-screen overlays that encompass the entire vertical space without the need for scrolling

Recently, I ran into a challenge while attempting to create a CSS print style-sheet. The issue arose when I tried to print a full-screen overlay containing scrollable content. Only the content that was currently displayed would show up in the printed ver ...

Retrieve JSON data from an external link and showcase it within a div, unfortunately encountering an issue with the functionality

Encountering the error message "XMLHttpRequest cannot load . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access" Check out the plunker link for more information: http ...

Can you guide me on how to interact with a table value using Selenium WebDriver?

I am having difficulty selecting a cell within a table. The cell does not seem to be recognized as a clickable object when I attempt to locate the element. I have tried different approaches to referencing the element, but all lead to the same outcome. I am ...

CSS struggles after implementing conditional checks in return statement for an unordered list

I'm encountering a CSS issue with the header section. When I include the following code snippet in my code to display a tab based on a condition, the entire header list doesn't appear in a single horizontal line: <div> {isAdmin(user) ? ...

Getting rid of the excess space at the bottom of a Bootstrap card - tips and tricks!

I encountered an issue while developing a blog app. The problem is that instead of resizing to fit the size of the card, the content is occupying the entire column space. https://i.sstatic.net/CGRig.png Here's the code snippet (Jinja2) {% extends &q ...