How to position div elements in the center on screens smaller than 768px?

Issue: Facing trouble centering my product grid under 576px.

Question: How can I adjust the CSS to ensure the products are centered under 576px?

My goal is to have the products centered when the screen size is under 768px, particularly for mobile devices where the images are resized to fit two per row but are currently aligned slightly to the left.

Here is the HTML code snippet:

<div class="right">
   <div class="center">
      <h1>Talent</h1>
   </div>    
   <div class="product-">
      <% @listings.each do |listing| %>
        <div class="image-circle">
            <div class="listing-page-images" id="listing-image-resize">
                <%= link_to image_tag(listing.image_url(:listing_index_4), id: "listing-image-resize-2"), listing, id: "listing-image-resize", data: {id: listing.id, name: listing.name} %>
            </div>
            <div class="text-over">
               <p><%= link_to listing.user.name, listing, id: "" %></p>
            </div>
         </div>
      <% end %>
   </div>
</div>

CSS style:

.right {
  flex: 70%;
  padding: 15px;
  padding-top: 20px;
  font-family: Helvetica, sans-serif ;
  font-weight: 600 ;
}

 .product- {
   padding-top: 30px;
   display: flex;
   flex-wrap: wrap;
 }

@media only screen and (max-width: 576px) {
   #listing-image-resize {
     width:  100px !important;
     height:  150px !important;
     top: 50%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
     max-width: 100%;
     max-height: 100%;
   }
   #listing-image-resize-2 {
     position: absolute;
     width:  100px !important;
     height:  150px !important;
     top: 50%;
     left: 50%;
     max-width: 100%;
     max-height: 100%;
   }

 }

One observation I've made is that between 768px and 576px, the products are centered on the page without needing the @media 576px CSS rule.

I am using Bootstrap 4 and suspect it might automatically handle the centering within that screen size range, but I have not found clear information on this behavior within the body tag that lacks @media CSS rules.

Answer №1

To ensure that the items inside .product- are centered, include the following code:

.product- {
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;

  //Include this
  align-items: center;
  justify-content: center;
}

If you want to center .product- itself, use the following code:

.product- {
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;

  //Include this
  margin-right: auto;
  margin-left: auto;

  align-items: center;
  justify-content: center;
}

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

Dealing with clicking a button within the HTML content of a Bootstrap popover

I am attempting to display an HTML button inside a popover and when clicking on that button, I intend to invoke a JavaScript function. However, the button's onclick event is not being triggered when using the LAPTOP'S TRACKPAD. <button class=& ...

A guide to connecting keyboard events to div elements within a React application

Currently working on a basic react project to gain some practical experience with the library. I aim to develop a simple user interface with blank spaces to be filled in by typing via keyboard input. Here's a glimpse of my progress so far: function ...

Styling the background of a container in CSS using Bootstrap

Currently, I am utilizing bootstrap and trying to find an elegant solution for adding a background to my container. Specifically, I am working with the bootstrap class container, as opposed to container-fluid. The official Bootstrap documentation advises ...

What could be causing my jQuery search feature to only function properly one time?

This is a code snippet that can search for, scroll to, and highlight a specific piece of text on a webpage. For the code demo, you can check it out on jsFiddle: http://jsfiddle.net/z7fjW/137/ However, there seems to be an issue with the functionality. Af ...

I am working on an HTML form that is designed vertically, but I am unsure of how to arrange two text fields side by side on the same line

I'm struggling with formatting my HTML form to have two text fields on the same line instead of stacked vertically. In the example below, I want the Size, Width, and Height fields to be aligned horizontally rather than one below the other. <form c ...

Is it possible to change the style of an element when I hover over one of its children?

Encountered an issue while working with HTML and CSS: //HTML <div> <div class="sibling-hover">hover over me</div> </div> <div class="parent"> <div>should disappear</div> </div> ...

Aligning images with absolute CSS to text that is wrapping positions the images perfectly alongside the text content

My webpage has a long content section that resizes based on the browser width. Here's an example: <h1 id="loc1">Title</h1> <p>bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bod ...

What is the reason that setTimeout does not delay calling a function?

I am looking to develop a straightforward game where a div is duplicated recursively after a short interval. Each new div should have a unique ID (ID+i). The concept is to continuously generate divs that the user must click on to remove before reaching a ...

A step-by-step guide on enabling Autoclick for every button on a webpage

I am currently using Jquery and Ajax to carry out an action, my goal is for a code to automatically click on every button once the page has finished loading. Although I attempted to use the following javascript code to achieve this at the end of my page, ...

What is the process for placing a component on the right side of the sidebar?

Here is the code snippet I am working with: <template> <div class="main"> <sidebar /> <router-view /> </div> </template> The sidebar has a width of 260px. I need to ensure that any comp ...

Searching for a specific element using a CSS selector

Looking for a way to find an element using a CSS selector in Chrome, I followed these steps: Right-click on the object Select "inspect" Right-click on the highlighted area in Chrome developer tools Choose "copy" Click on "copy selector" This is the cod ...

What is the best way to make my text stand out against a faded background?

After mastering the basics of web development on Codecademy, I was eager to start my own blog and create a unique website. One challenge I encountered was figuring out how to fade the background without affecting the text. Despite researching various solut ...

.value not showing correct data in JavaScript

I am attempting to retrieve the value entered by the user in an HTML input field. While I can display a fixed, predetermined value with ease, this is not my intention. My goal is for users to input a numerical value and for that value to be displayed/adj ...

How do I customize the border color for the Select component in Material UI?

I have been working on customizing the Select component provided by Material UI. Here is a visual representation of what it currently looks like: https://i.stack.imgur.com/YGheB.png My goal is to change the border-color of the select component from the ...

Choose the value of the adjacent text input with jQuery

I am working with dynamic checkboxes and corresponding text inputs. My goal is to alert the value of the text input when a checkbox is checked. However, I am having trouble retrieving the correct value of the text input associated with each checkbox. Addit ...

Express.js - display the complete information

Trying to display an array of objects (highcharts points) is giving me some trouble. Instead of the actual data, I'm seeing [object Object]. It seems that JSON.stringify() doesn't play well with HTML. util.inspect also doesn't work as expe ...

Tips for aligning a dropdown button with the other elements in your navbar

I followed the code outline from a tutorial on We3schools, but I'm having an issue with the button not aligning correctly with the navbar. https://i.sstatic.net/fSRIT.png I attempted to adjust the code for proper alignment before publishing, but was ...

Unable to locate CSS file in subfolder

Comparing two scenarios: Scenario 1 is problem-free, but issues persist in scenario 2. Review the details below: Scenario 1: MasterPages: Main\MasterPages.master Css : Main\Theme\CSS\ Javascript : Main\Theme\Javascrip ...

I am looking for an HTML solution that allows me to neatly stack photos of different sizes in two columns, always prioritizing the column with more empty space

Is there an easy method to populate two columns, each with a width of 50%, with photos in a way that the next photo is always added to the column with more available space? The photos come in different sizes but should be able to fit within the width of t ...

Comparing the positions of elements in Selenium WebDriver with PHP

One of the elements on my webpage serves as a button that reveals a drop-down menu. Due to various factors affecting the page layout, there were some alignment issues between the button and the menu until a few bugs were fixed. I am now looking for a way t ...