Varied elevations dependent on specific screen dimensions

There seems to be a minor issue with the height of the portfolio container divs at specific window widths. The problematic widths range from 1025 to 1041 and from 768 to 784. To visualize this, try resizing your browser window to these dimensions on the following live page: mrliger.com/index2.php

The jQuery attached to this div is responsible for adjusting its height dynamically. It's likely that this script is causing the height discrepancy rather than a media query:

$(window).resize(function() {
     if ($(window).width() >= 1025) {
         var cw = $(".portfoliocontainer").width() / 4;
         $('.portfoliopod:not(.podexpanded)').height(cw);
     }
     if ($(window).width() <= 1024) {
         var cw = $(".portfoliocontainer").width() / 3;
         $('.portfoliopod:not(.podexpanded)').height(cw);
     }
     if ($(window).width() <= 767) {
         var cw = $(".portfoliocontainer").width() / 2;
         $('.portfoliopod:not(.podexpanded)').height(cw);
     }
     if ($(window).width() <= 400) {
         var cw = $(".portfoliocontainer").width();
         $('.portfoliopod:not(.podexpanded)').height(cw);
     }
 });

Answer №1

Make sure to set the width equal to the height

$(document).ready(updateDimensions);
$(window).resize(updateDimensions);

function updateDimensions() {
    var dimensions;
    if ($(window).width() >= 1025) {
        dimensions = $(".portfoliocontainer").width() / 4;
    }
    if ($(window).width() <= 1024) {
        dimensions = $(".portfoliocontainer").width() / 3;
    }
    if ($(window).width() <= 767) {
        dimensions = $(".portfoliocontainer").width() / 2;
    }
    if ($(window).width() <= 400) {
        dimensions = $(".portfoliocontainer").width();
    }
    $('.portfoliopod:not(.podexpanded)').width(dimensions);
    $('.portfoliopod:not(.podexpanded)').height(dimensions);
}

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

Can you provide guidance on securing a REST API using Google authentication?

I'm currently working on developing a REST API using NodeJS and Passport for a single-page JavaScript application. I am struggling to find the right approach to securing my REST API with Google OAuth. Can someone guide me on how to achieve this? Any ...

The function "xml find" does not exist

After successfully running the following ajax call, I encounter an issue: $.ajax({ url: "services/orders/<%=OrderServices.Action.BULK_SUPPLIER_DISCOUNT%>", data: params, complete: function(xhr) { i ...

How can CSS be instructed to "apply the following most specific rule in order to determine this property"?

Utilizing Material-UI and JSS for CSS management, I've encountered an issue where styles appear differently in development versus production. The discrepancy stems from the order of rules within the file. For instance, when defining an element like ...

An array is not just a mere collection of elements

I have an object that resembles an array var items = [ { started_time: 2017-05-04T12:46:39.439Z, word: 'bottle', questionId: '161013bd-00cc-4ad1-8f98-1a8384e202c8' }, { started_time: 2017-05-04T12:47:26.130Z, word: &apo ...

Customize the appearance of the Material UI expansion panel when it is in its expanded

Is there a way to customize the height of an expanded expansion panel summary? Specifically, I am looking to remove the min-height property and set the summary panel's height to 40px instead of the default 64px. I have attempted to make this change in ...

Tips for resolving the issue of the symbol ' displaying as &#39 in an Angular 2 application

I am currently working on an Angular application that makes API calls when a name displayed in a grid table is clicked. However, I have encountered an issue where names containing an apostrophe are being displayed incorrectly as &#39 instead. I managed ...

Free up MySQL connections within a Promise.All implementation

At the moment, I am facing issues with releasing MySQL connections from a connection pool. Interestingly, when I release connections in a synchronous "for" loop, everything works fine. However, when I attempt to release them asynchronously using Promise.Al ...

AngularJS - How to Deactivate List Items

Currently, I am working on developing a breadcrumb navigation system using AngularJS. However, I am facing an issue where some of the links need to be disabled based on certain user requirements not being met. After researching the Angular documentation, ...

JavaScript 'await' throws error 'then is not defined'

Just starting out with async programming and I've noticed a common issue in similar threads - the problem of not returning anything. However, in my case, I am facing a different error message 'Cannot read property 'then' of undefined&ap ...

Commitments and incorporating items from an array into objects nested within a separate array

My current project involves a command line node application that scrapes valuable data from a specific website and stores it in a CSV file. For the scraping functionality, I am utilizing scrape-it, which enables me to successfully extract all the necessa ...

Highcharts - Troubleshooting the chart reflow feature

Take a look at the fiddle I created. I encountered an issue with the chart width when toggling the sidebar. After seeking help on Stack Overflow from this post, I was able to solve it. Now, I'm facing another bug where adding transitions while togg ...

Generate options for a dropdown menu based on the choice made in another dropdown menu utilizing ajax technology

Greetings, I am currently working on a JSP page that features a form with two drop-down lists. The first drop-down is designed to display the country names. While the second drop-down should show the states corresponding to the selected country. I have ...

What is the process for retrieving the API configuration for my admin website to incorporate into the Signin Page?

My admin website has a configuration set up that dynamically updates changes made, including the API. However, I want to avoid hardcoding the base URL for flexibility. How can I achieve this? Please see my admin page with the config settings: https://i.st ...

Trouble with apostrophes rendering in JavaScript on WordPress posts

My current challenge involves adding a post to Wordpress using an external script. This post includes a JavaScript section that contains an iframe for displaying movies. Knowing that Wordpress splits default tags, I have implemented a special plugin to han ...

How to interact with AngularJS drop-down menus using Selenium in Python?

I have been working on scraping a website to create an account. Here is the specific URL: Upon visiting the site, you need to click on "Dont have an account yet?" and then click "Agree" on the following page. Subsequently, there are security questions th ...

Encountering an error in accessing my own API: "Cannot read property 'then

I'm currently in the process of using my personal express.js API with nodejs. Although it is functioning, I am encountering an error that is preventing me from accessing the response of the request. Below is a snippet of my code: routes.js: app.post ...

Can someone explain to me the meaning of "var vm = $scope.vm = {}" in AngularJS?

While reading through the angularJS api, I came across some code that looked like this: myApp.controller('MyController', ['$scope', function($scope) { var vm = $scope.vm = {name:'savo'}; } ]); Initially, this mul ...

The div element is not extending all the way to the left side of the browser window

I'm having trouble positioning a menu at the top of my webpage following a tutorial. The menu icon doesn't seem to reach all the way to the left side of the page. Despite multiple attempts to adjust the margin and padding settings, I can't ...

Include the JS file after finishing the control processing

I've been grappling with an issue for several days now. The view I have is populated by my controller through an API call, which works perfectly fine in rendering the HTML. $http.get(url). success(function(data, status, headers, config) { ...

A web application using JavaScript and Node.js with a focus on creating a REST

After extensive research, I am eager to develop a web application using JavaScript and Node.js with an SQL back-end. However, the abundance of frameworks and tools available has left me feeling overwhelmed. While I have identified some that I would like to ...