Struggling to align your website content properly?

Currently, I am attempting to center all of the products on my Wordpress page so that everything is aligned centrally. I attempted wrapping it all in a div with specific CSS properties, but unfortunately, the content moved to the middle while the products remained left-aligned.

#big-center {
display: -webkit-box;
display: -moz-box;
display: box;

-webkit-box-orient: block-axis;
-moz-box-orient: block-axis;
box-orient: block-axis;

-webkit-box-align: center;
-moz-box-align: center;
box-align: center;

-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
}

I am reaching out for advice or if there may be something crucial that I am overlooking to achieve this. Your recommendations are greatly appreciated!

To view the current state of the page, please click on this link:

cssalignmentcenteringcenter-align

Answer №1

It seems like there may be some confusion in understanding your request, but I've attempted to provide a solution without being overly explicit because I believe the original design was satisfactory. Here is how you can align it to the center. While it may not be perfect code, it should serve its purpose.

To achieve this alignment, navigate to line 1427 in your CSS file located at wp-content/themes/stickems/style.css?ver=1.0 and replace the current code with the following:

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    margin-bottom: 25px;
    margin-left: 38%;
    margin-right: 50%;
    width: 22.125%;
}

This code snippet should assist in achieving the desired outcome based on my interpretation of your request. Please note that while it may not be flawless, it should suffice for your needs. The image at https://i.sstatic.net/jSrWD.png provides a visual representation of what I understood you were aiming for.

Answer №2

Give these adjustments a shot and see if they make a difference.

.woocommerce ul.products li.product{
  float:left; //Delete this line
  display:inline-block; //Include this line instead
  margin-right:3.3%; // Updated from 3.8 to 3.3
}

.woocommerce ul.products{
  text-align:center; //This line is newly added
}

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

A subtle background image with an overlay of a transparent RGBA gradient

Currently, I am working on designing the header of a website. My goal is to incorporate an image on the right side of the header, overlayed with a gradient color that has a certain level of transparency set using rgba values. Although the image and gradien ...

htmlcss

What is the best way to apply CSS to an image within a list item that is within an unordered list nested inside a specific

I've encountered an issue in my html file related to a navigation bar situated at the top of my page. The code snippet that initiates this navigation bar is as follows: <div class="“topNav"> <ul> <li><img src= ...

htmlcss

In a jQuery conditional statement, selecting the second child of the li element for targeting

I'm encountering an issue where I can't target the second child of an li element and use it in a conditional statement. Are jQuery conditionals not compatible with li:nth-child(2)? if($(".steps ul li:first-child").attr('aria-selected') ...

javascriptjquerycss

Iterating through the Bootstrap grid

https://i.sstatic.net/XMIzT.jpg I'm attempting to create a layout similar to the image provided. Currently, I am utilizing WordPress and WooCommerce and aiming to showcase products in this manner. The following HTML code is what I have been working ...

phphtmlcsswordpresswoocommerce

What is the best way to align a jQuery Cycle 2 Slider in the middle of the

Having some trouble centering a jQuery Cycle 2 Slider on my page. You can see the slider here. I've attempted multiple methods to center it, but none have been successful. Check out the HTML code: <div class="slider"> <div id=outside> ...

jquerycssjquery-cycle2

"Struggling with the height of Bootstrap row not filling the entire space

I've tried everything but nothing seems to be working. Whether it's a simple height: 100% or experimenting with flex-grow: 1, none of it is doing the trick. I'm having issues with this site I'm currently working on: https://i.sstatic.n ...

htmlcssbootstrap-4sass

Generate a unique splatter design using Cascading Style Sheets

Imagine a circle link that transforms into a playful animation with a pink shape when you move your mouse over it: I'm torn between different ideas on how to achieve this effect. One approach could be to use individual elements for each drop, utilizi ...

javascriptjqueryhtmlcss

Using percentages for CSS alignment and adjusting element widths

Greetings everyone! I have been struggling to align two divs - one on the right with a width of 30% and the other on the left with 70%. Despite my efforts, I have not been able to find a solution. I am hopeful that someone here can assist me. My setup inv ...

jquerycssjsfprimefaces

How can I convert a background image source into a fluid list item with a display property of inline-block?

I have a unique image with dimensions width: 656px and height: 60px that serves as the background for my menu. Each menu button has a specific position within the image, for example, the menu button for 'media' is located at (188x, 0y), with a wi ...

cssfluid-images

Divide the space evenly with minimal gaps

I've been trying to use examples from the web, but I just can't seem to get it right. Who better to ask than you guys? I want to evenly distribute id="klip". I have set their widths to 18% so that each space is 2%. Here's how it looks now: ...

htmlcss

Enigmatic void found beneath image surfacing

Similar Question: Dealing with Additional Space at the Bottom of an Anchor Tag Take a look at this example page here.. There seems to be a mysterious gap below the picture of the family, just before the gray-bordered (5px #333) div that holds the ima ...

htmlcssimage

CSS inline-block element disregarding margins and padding

Recently, I've been delving into the world of CSS and trying out "display:inline-block" as an alternative to "display:float". The general consensus from documentation is that properties commonly used on block elements can also be applied to inline-blo ...

marginpaddingcss

What could be causing site container not to respond to height:auto?

I have encountered an issue while developing a website using absolute height values. I am puzzled as to why the height:auto property is not working for me. Can anyone provide some insight on this? HTML Structure <div id="site-content"> <div id=" ...

htmlcssheight

Calculating the width of div elements within a horizontal gallery that includes a scrollbar

My website, vladimirvojtela.com, features a gallery with a horizontal scrollbar that leaves whitespace at the end due to the width parameter in the code. Can anyone suggest a script that can automatically adjust the DIV width after all images have been ren ...

htmlcssscrollbargallery

How can you gather user data on a website without relying on a database and making it voluntary?

In order to streamline the process, the user should be able to send a preformatted email with the click of a button or have their data stored securely without leaving the site. The goal is to avoid the extra step of using a mailto: link, unless the email c ...

javascripthtmlcssweb

The NextJS Link component does not seem to be receiving the styles from Tailwindcss

I am currently working on a nextjs frontend project that has tailwindcss integrated. Below is an example of the code I am using: import Link from 'next/link' return( <div> <Link className="text-sm hover:text-gray-600" ...

htmlcssnext.jsfrontend

How can you align two div elements side by side, if the first div is spanning across two lines?

I'm looking to position two divs next to each other, with the second div starting right where the first one ends. I came across a similar question on Stack Overflow, but unfortunately, it didn't have the answer I needed. <div id="wrapper"> ...

htmlcss

Achieving unique horizontal and vertical spacing in Material UI Grid

In my current Material UI setup, I have set spacing in the Grid Container to space Grid Items vertically. While this works well on larger screens, it causes awkward horizontal spacing between Grid Items on mobile devices. <Grid container spacing={24}> ...

cssreactjsgridmaterial-ui

Override the class inside the ul div

I am utilizing Dreamweaver's Spy menu without any sub items. By using a background image for "not active", another for "rollover" and attempting to apply one for "active". I have created a class for "active" and assigned it to one of the ul items. How ...

htmlcss

What could be causing my linear background to behave in this unusual manner?

Just when I thought styling my background with a simple line of code would be easy, I encountered an unexpected issue. Instead of a smooth linear-gradient from the top left to the bottom right, my background is showing rows of red and blue in between each ...

htmlcss