I am working on minimizing the heights of multiple columns throughout the tti-fl.com website. These columns have a locked height in the media query that when I change the height the @media 481px elements often get very thin and you can’t click on the buttons or look at the photos. These are mobile responsive columns but they have such excess white space in their layout that I want to fix that to either 10px for things like desktops and laptops (@media 992px and @media 1022 px respectively) and then 300 pixels for tablets and smartphones (@media 481px and @media 768px respectively). The elements were trying to edit include:

.categories-wrapper .content-block {
    text-align: center;
}
.home .categories-wrapper .content-block {
    text-align: center;
}

Only the desktop and tablets have heights of 420 px and 560px. The larger computers read the CSS classes above like the smartphones. The columns start with

. The other columns in the website are plugins from WordPress that I do not know how to minimize their height.

Read more here: How can I minimize the height of my columns using jQuery inside media query?


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: