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

The issue of Jquery not functioning properly within Ajax-included HTML documents

I've tried looking at some other posts, but I couldn't understand them. The jQuery works fine when the page is loaded, but when the same elements are loaded from an AJAX script, the jQuery doesn't work. I know I need to do a callback, but ca ...

Can you provide me with a variable that will give me the total size of the scrollbar?

How can I determine the maximum number of pixels scrolled on a webpage? I attempted using window.pageXOffset, but it only gives the current scrolled amount. I require the total size at all times. ...

Managing file responses in Node.js

Hey there! I've been working on implementing ajax image upload and here's how far I've gotten. This is my index.html: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8> <title>File Upload ...

Using V-for to iterate over a multi-dimensional array

As I venture into the world of vue.js, I find myself faced with the challenge of populating nested select elements using v-for. Despite scouring through various resources on this topic, I have been unable to determine a solution that fits my particular sce ...

What is the process for integrating SAP BO objects into HTML containers?

Has anyone successfully integrated a SAP BO object into an HTML container? I'm looking to embed a dashboard directly onto my webpage instead of redirecting users to a new tab for the Business Objects platform. ...

Divs gracefully appear one after the other in a sequential manner

I am attempting to showcase a sequence of 4 divs in a row using the ease-in CSS transition feature. I came across this example that demonstrates what I am aiming for: http://jsfiddle.net/57uGQ/enter code here. However, despite my best efforts, I am unable ...

How can one efficiently make API requests using Vuex?

Being new to both Vue Webpack and Vuex after transitioning from the Ember world, I have set up my Vue Webpack app with Vuex using vue-resource in two different files: /src/store/api.js import Vue from 'vue'; import { store } from './store& ...

Mock needed assistance

In my testing scenario, I am attempting to simulate a service that is utilized by my function using sinon. However, I am encountering difficulties in inserting the mock into my function. The service is obtained through the use of require The structure of ...

Update the font URL in Bootstrap 5

I am looking to update the URL that Bootstrap uses to access fonts, as I want to host them on my server instead of relying on users to fetch them from Google with each page load. However, despite my efforts, I cannot locate the specific URLs mentioned when ...

One effective way to redirect after a PUT request and display a one-time message

Here's what I'm aiming for in terms of desired behaviour: A user navigates to a password change web page. The user completes the form and it is sent via PUT request to our REST server. Upon successful completion, the user is redirected to their ...

How can I retrieve my array state in a different router page using VUEJS and VUEX?

I have created a page with two routes - one for the home page and another for the configuration where users can decide what content should be displayed on that container. In the configuration panel, I was able to retrieve input values and stored them in my ...

What are the steps to implement server side routing using react-router 2 and expressjs?

If you're looking to delve into server side rendering with react-router, the documentation linked here might fall short in providing a comprehensive understanding. In particular, it may not offer enough insights on how to leverage react-router 2 for r ...

Prioritizing nth child over the first child

I have a situation where I need to maintain 3 different styles in a patterned design without altering the classes on the HTML side. I have been attempting to achieve this using nth-child selectors. However, I am facing an issue where my first class is bein ...

The 'RegExpExecArray | null' type is required to include a method '[Symbol.iterator]()' which returns an iterator to iterate through its values

As someone who is new to TypeScript, I have a good understanding of the basics but recently came across a typecast error that I am struggling to solve. const [full, id]: string | null = /.*media\/[^\/]+\/(.*)/.exec(item.uri) When it comes t ...

Adjusting Iframe height on mobile devices based on window width changes across various devices

I'm dealing with an issue on my URL shortener website involving iframes. <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="<?=$adurl?>"></iframe> When viewing the websites in ...

Tips for customizing the AjaxComplete function for individual ajax calls

I need help figuring out how to display various loading symbols depending on the ajax call on my website. Currently, I only have a default loading symbol that appears in a fixed window at the center of the screen. The issue arises because I have multiple ...

Font reference in IE and Chrome causing HTTPS to fail

Take a look at in both Internet Explorer and Chrome. The header tags (h1 through h6) all have font specifications that rely on a javascript fonts.com specification. However, there seems to be an issue with rendering properly. Interestingly, the fonts ar ...

The member's voiceChannel is undefined

I've encountered an issue with my discord bot not being able to determine which channel a user is in. When I check member.voiceChannel, it always returns undefined, even when I am currently in a voice channel. Here is the code snippet that illustrate ...

JavaScript Language Conversion Templating

I'm currently revamping the frontend for Facebook's internationalization XFBML tag, which has been nonfunctional for a while. I'm almost done with the updates but I have hit a roadblock: swapping out tokenized translations without losing dat ...

How to prevent a directory from being copied in webpack within Vue CLI

Currently, I am working on a Vue3 project created using Vue CLI 5.0.1 In my setup, there is a public folder that contains static assets necessary for serving the application. However, this folder is quite heavy, around 1GB in size. Whenever I run the npm ...