What is the best way for me to incorporate images retrieved from an API call into my

Hey everyone, this is my first time posting on here so if there's anything I'm missing, please let me know! I've run into an issue with the images on my categories page not aligning properly and being different sizes after I incorporated some javascript and API calls. It's causing the layout to look off, especially on mobile devices. Does anyone have any suggestions on how to make all the images the same size? Just a rookie looking for some guidance here.

You can check out my page at:

I've tried adjusting it with CSS but it doesn't seem to be responding well when I make changes. Specifically, in the mobile view of the categories page, the images are too large. However, when I try to adjust them using media queries, it also impacts the desktop version. I suspect it has something to do with the changes I made while experimenting with javascript. Also, I'm having trouble changing the name "test" to something else without affecting the entire layout...

javascripthtmlcss

Answer №1

The important aspect is the output, not how the images are retrieved through an API; we can manipulate the appearance using CSS.

Due to the film titles being in the same container, they push the images down, necessitating a specific height for them.

Since the image ratios vary, utilizing object-fit: cover can crop the images at the largest size within the height of the smallest image.

For mobile devices, adjusting the overflow property to visible and removing unnecessary padding from the .container-child will maintain a clean layout.

The following code snippet illustrates this concept:

.container-child p {
   height: 50px;
   text-align: center;
   display: block;
}
/* Responsive styling */
@media (max-width:1624px){
    .container-child img {
      object-fit: cover;
      max-width: 500px;
      max-height: 709px; /* Smallest image's dimensions */
      width: 100%;
      height: 100%;
    }
}
@media (max-width: 768px) {
.container-child {
    padding-top: 0em; 
    display: inline-block;
    text-align: center;
   }
   #test {
    margin-top: 130px;
    display: inline-block;
    text-align: center
   }
   html, body {
    overflow: visible;
    background: #000;
   }
}

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

What is the best way to embed sections of one HTML page into another page?

Is there a method I can use to embed sections of one webpage within another webpage? The dilemma arises from the fact that the second page has a distinct style compared to my main page. Is it feasible to apply the alternate style solely to specific content ...

javascriptphphtmlcss

Receiving input in a "textbox" rather than using an alert message

Hey there! I managed to get this jquery code that displays the number of Facebook likes: <script> $.getJSON("https://graph.facebook.com/TuamadreLeggenda?callback=?", function(data) { alert("Likes: " + data.likes); }); </script> Is there ...

jqueryhtml

Long-term responsibilities in Node.js

Currently, I have a node.js server that is communicating between a net socket and a python socket. The flow is such that when a user sends an asynchronous ajax request with data, the node server forwards it to Python, receives the processed data back, and ...

javascriptpythonajaxnode.jssockets

Having trouble with the fancybox form

Take a look at this link for information on how to display a login form. Once you click on "Try now", follow these steps: A fancy box should open with fields for name and password. If both fields are left blank and the login button is clicked, an error ...

jqueryhtmlfancyboxfancybox-3

Is it possible for me to send JSON data using a form to HTTP_RAW_POST_DATA?

Currently, I am in the process of creating a web interface for code that is typically designed to run on Android devices. I transmit JSON data and retrieve the data by using the following method: $json = json_decode($HTTP_RAW_POST_DATA,true); Is there a ...

phphtmljsonpost

Capable of retrieving response data, however, the label remains invisible in the dropdown menu

Upon selecting a country, I expect the corresponding city from the database to be automatically displayed in the dropdown menu. While I was able to retrieve the state response (as seen in the console output), it is not appearing in the dropdown menu. Inte ...

htmlangulartypescriptdrop-down-menu

Loading google maps markers dynamically with ajax requests

I'm in the process of plotting around 120 markers on a Google Map by utilizing an ajax populated array containing google.maps.LatLng objects Here is my script <script type ="text/javascript"> $.ajaxSetup({ cache: false }); ...

javascriptajaxgoogle-mapsgoogle-maps-api-3

Creating customized JQuery UI tabs to perfectly accommodate the available horizontal space

Can JQuery UI Tabs be modified to fill the horizontal space and stack to the left? In order to achieve this, could we consider using a markup like the one below: <table width="100%"> <tr> <td> ...content... </td> ...

cssjquery-ui

Is history.pushState capable of more than just making an xhr request?

I've hit a roadblock in my current project. The issue I'm facing is getting a registration page to load. The XHR request is returning the output of the PHP code, which is causing problems. My goal is to have it load as a document rather than an ...

javascriptjqueryhtml5-history

Removing sourceMappingURL from an Angular Universal build: A step-by-step guide

Using this repository as my foundation, I have successfully resolved most of the plugin errors except for one that continues to elude me. It's puzzling because no other plugin anticipates a .map file in an SSR build since it is intended for productio ...

javascriptangularangular-universalserver-side-rendering

The Google map is not showing up on the screen despite having entered the API Key

Trying to showcase a Google map on my website. Check out the code below:- <script> function initializeMap() { var coords = {lat: -25.363, lng: 131.044}; var mapObj = new google.maps.Map(document.getElementById('mapz') ...

javascripthtmlgoogle-maps

Designing a carousel-style menu list with navigation buttons for moving forward and backward

I'm running into some trouble while attempting to create a carousel. Firstly, the issue I am facing is that when you continuously click on the Next button, the function keeps working even after reaching the last item. I'm not sure how to make th ...

javascripthtmljquerycss

An Alternative Approach for Executing a Function within an AngularJS Directive

I am currently working on a unique element directive that displays a user's picture and name. This directive has various configuration attributes, one of which is the uc-on-hover attribute. The purpose of this attribute is to determine what element sh ...

javascriptangularjsangularjs-directiverootscope

What is the best way to send a function along with personalized data?

Currently, I am working on a project using node.js with socket.io. I am looking for a way to have socket.on() use a unique callback function for each client that joins the server. Here is my current technique: I have created a simple JavaScript class whi ...

javascriptnode.jsfunctionsocket.ioundefined

An issue arose in Leaflet where drawing on the map became impossible after making an update to a marker's position

I have been working with Leaflet, Leaflet-draw, and Cordova Geolocation. Initially, when the map is loaded in globe view, drawing works perfectly. However, when the locate function is called to update the map center and marker position, drawing becomes imp ...

javascriptangularjscordovaleafletleaflet.draw

Trouble with CSS table background display in Outlook

I am experiencing issues with an HTML table in an email template: <table id="x_formHeaderTable" style="width:100%; margin:0; padding:0; background-color:#FCE68D; border-style: solid; border-color: #000000;"> <tbody> <tr> &l ...

htmlcss

Transitioning from one CSS id to another during page loading

Wondering how to fade in one CSS id on page load and then smoothly transition to another after a few seconds? Here are the ids: #background { background: url("images/am_photography_bg.jpg") no-repeat center -25px fixed; background-size: 100%; ...

javascriptjqueryhtmlcss

Creating a dynamic nested form in AngularJS by binding data to a model

Creating a nested form from a JSON object called formObject, I bind the values within the object itself. By recursively parsing the values, I extract the actual data, referred to as dataObject, upon submission. To view the dataObject in a linear format, r ...

javascriptangularjsmodel-view-controller

Is there a way to cycle through an array with each click?

I am currently working on implementing a slider feature that enables users to navigate through different pieces of information by clicking on arrows. However, I have encountered an issue where one arrow works correctly (forward), but the other arrow does n ...

javascriptajax

How can I use JQuery to enable or disable checkboxes upon loading?

I am looking to implement a feature where the checkboxes are enabled when the .group is checked and disabled when it is unchecked. Although I can toggle between them, I'm facing difficulty in disabling the unchecked checkbox using the .group. Upon lo ...

javascripthtmljquery