Issues with border/padding and overlay in Packery Grid Layout

After spending some time working on a grid layout using the metafizzy isotope packery mode, I have encountered a few issues. To illustrate my problem, I have provided a link to a codepen below:

http://codepen.io/anon/pen/EgKdpL

Although I am satisfied with most of my grid design, there are two main issues that I need help resolving.

Firstly, I tried to add padding to the main grid selector class "griditem" in order to create a simple white border around all grid items. However, the results were inconsistent, with some gaps appearing larger or smaller than others. I attempted to achieve the same effect using CSS borders but encountered the same problem.

.grid-sizer,
.grid-item {
   margin: 0!important;
   padding: 10px!important;
}

The second issue involves an overlay on each grid item that displays a title or heading. Due to the padding applied, the overlay ends up overflowing. Is there a solution to prevent this from happening?

http://codepen.io/anon/pen/EgKdpL

I would appreciate any assistance you can provide.

UPDATE

Following the advice given in the responses, I implemented changes in the codepen. The rollover state has been fixed and works correctly now. However, the issue of uneven borders/padding remains visible, for example, on the first blue box.

javascripthtmlcsslayoutgrid

Answer №1

Here's a solution that worked well for me:

In the * selector block at the beginning of your CSS code, include the following:

margin: 0;
padding: 0

Issues with spacing are often caused by browsers adding extra margins and such. A simple CSS reset like this can help resolve the issue. For more in-depth information, check out Eric Meyer's CSS reset.

Answer №2

  1. Eliminate the margin from your body/html tag:

    html, body {
    margin: 0;
    padding: 0;
}

  2. Instead of using 100% width and height in #wrapper .text-overlay, consider using the top, bottom, left, right properties for absolute positioning. Here's an updated version:

    #wrapper .text-overlay {
    position: absolute;
    visibility: hidden;
    background-color: RGBA(40, 44, 52, 0.9);
    font-family: 'Old Standard TT', serif;
    letter-spacing: 0.5px;
    display: block;
    margin: 0 auto;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    color: #fff;
}

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

Encountering a syntax error while attempting to import modules from amCharts

Recently, I have been attempting to incorporate amcharts into my project using npm. After running the command npm install@amcharts/amcharts4, I noticed that all the necessary modules were now present in my node_modules folder and package.json file. Specifi ...

javascriptnpmnode-modulesamcharts

The jqGrid displays a plus sign even when the subgrid is empty while using XML

I am utilizing jqGrid to display data with a subgrid in XML format. $("#UDFs").jqGrid({ ajaxGridOptions: { contentType: 'application/xml; charset=utf-8' }, datatype: 'xmlstring', datastr: data, xmlReader: { root: "Respo ...

javascriptjqueryjqgrid

"Oops! Vite seems to be facing an issue as RefreshRuntime.injectIntoGlobalHook function is

Our CRA react app has been transitioned from webpack to Vite. Problem: When running the application locally in production mode, I encounter the following error: 1. Uncaught TypeError: RefreshRuntime.injectIntoGlobalHook is not a function at (index):6:16 ...

javascriptreactjsnode.jsmaterial-uivite

I recently created a Python3 script utilizing selenium to automate message sending, but unfortunately, it is not functioning as expected

I've written a script (https://pastebin.com/dWLFvirn) that I'm trying to run through the terminal, but it's giving me an error. Here's a screenshot of the error (https://ibb.co/NSfLgL8). I would like to use "" as the link to make the s ...

pythonhtmlseleniumpython-3.6

Ensuring promise doesn't resolve until the IF STATEMENT is executed

I am encountering an issue with the "checkWorkflow" function where it seems to be executing the "If" statement before actually checking. This deduction is based on the output in my console, which makes me believe there might be a problem with how I am hand ...

javascriptnode.jsmongooserequest-promise

Transfer information from the client to the server using AJAX and PHP by

When attempting to post a JavaScript variable called posY to a PHP file, an error occurred with the message: Notice: Undefined index: data in C:\xampp\htdocs\Heads_in_the_clouds\submitposY.php The posY variable is defined in the JavaSc ...

javascripthtmlcanvas

Tips for changing date format within Ajax javascript code

I am working with a JavaScript AJAX code: success:function(res){ var _html=''; var json_data=$.parseJSON(res.posts); $.each(json_data,function (index,data) { _html+='<span class=&apo ...

javascriptjsonajax

Tips for streamlining the JSON parse object prototype in JavaScript

I recently had a JavaScript object that was created without a prototype. let bar = Object.create(null); After reading and parsing a JSON file in Node.js, I reassigned the parsed data to bar. Here's how: fs.readFile('data.json', 'utf8 ...

javascriptjsonnode.js

Using jQuery to extract the value of an object from an <li> element and updating the class attribute of the <li> element

There is a div element: <div id="ddDistr" class="searchBoxSortDistrict" tabindex="1"> <ul id="ddd"> </ul> </div> I have inserted HTML from json into it: $("#ddd").html(" "), $.each(dis, function( index, value) { $("#dd ...

javascriptjqueryhtmlcss

How can you retrieve the current user in express.js when incorporating socket.io?

I have a web app using the express framework and socket.io for real-time chat. I am trying to get the current user's username and create a room with them in it, but I am struggling to retrieve the user info when socket.on('connection') is ca ...

javascriptnode.jssocketsexpresssocket.io

Utilizing function arguments in ReactJS

Currently, I am in the process of learning ReactJs and have an inquiry about the code snippet below. Would someone be able to clarify the functionality of the removeTour code and why the id parameter is being used within the function? const removeTour = (i ...

javascriptreactjs

"When implementing an Ajax autorefresh feature, ensure you pass the necessary variables consistently to update the content. Don't overlook

My chat box consists of two frames... The first frame displays all the usernames, while the second frame shows the full chat when a user is clicked from the first frame. I need to reload the second frame every time to check for new messages from the send ...

jqueryajaxhtmljsp

Tips for including vue-autonumeric in your webpack 2 setup

Encountering a problem while bundling the vue-autonumeric package with Webpack 2, where the dependency AutoNumeric is not being found properly. Although there is an alias set up in the configuration that works fine with webpack 3, it seems to fail when wo ...

javascriptwebpackvue.js

What could be causing this jQuery to malfunction?

Having trouble with the functionality of hasclass and this.addclass. if ($('.sidebar-menu-container li').hasClass('current-menu-item')) { $(this).addClass('expanded'); } Check out this CodePen for reference. ...

javascriptjqueryhtmlcss

Sign up for the observable, retrieve the asynchronous mapped outcome with input from the dialog, and then utilize the outcome from the map

Currently, I am utilizing an API-service that delivers an Observable containing an array of elements. apiMethod(input: Input): Observable<ResultElement[]> Typically, I have been selecting the first element from the array, subscribing to it, and the ...

javascriptangulartypescriptrxjsangular-material

React - The ._id received by the Modal inside the map function is incorrect

My map is generating edit and delete buttons. The delete button requires confirmation, so I implemented a modal. When I use console.log(additive._id) on the first delete button, I get the correct ._id, but when I click the confirm button inside the modal, ...

javascriptreactjsmapping

Performing a search through a string array and updating a specific portion of each string

I am faced with an array containing a long list of Strings, and my goal is to filter out all the strings that begin with 'INSERT ALL' and replace the number inside the parentheses with the string ' NULL' Here is the original array: le ...

javascriptarraystypescriptfilter

When Highcharts and AngularJS team up, beware of the memory leak!

I've integrated highcharts into my AngularJS application using the highcharts-ng directive, but I'm encountering a persistent memory leak issue. My app is a slideshow with rotating slides that include charts. To investigate further, I created 3 ...

javascriptangularjsmemory-leakshighcharts

unique HTML elements located inside a text box

I am working on a system that allows users to customize order confirmation emails by replacing placeholders with actual customer data. Currently, we use tags like {customer_name}, but this method can be confusing and prone to errors. My goal is to create ...

htmlcss

The functionality of JSON.stringify involves transforming colons located within strings into their corresponding unicode characters

There is a javascript string object in my code that looks like this: time : "YYYY-MM-DDT00:00:00.000Z@YYYY-MM-DDT23:59:59.999Z" When I try to convert the object to a string using JSON.stringify, I end up with the following string: "time=YYY ...

javascriptjsonstringunicode