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

Removing elements from an array within a function

Within my class, I defined an array: myUsers = new Array(); I am looking to add usernames to this array in a unique manner. My approach involves checking if the array length is 0 and if so, adding a user. This method works well for adding the first user ...

javascriptarrays

"Consolidating into one large package, Less is compiled and bundled together

Is there a way to display only the CSS being utilized on a webpage after it loads, rather than serving all compiled .less files as one big .css file? In addition, I am interested in having a sourcemap of the .less files shown in the browser for debugging ...

cssless

Error detected in d3.js Stacked chart transformation

I have developed an application for creating stacked chart animations and updates. However, I am encountering some NaN values being passed into the y and height variables. I am unsure about what is causing this issue. When toggling the data, the charts eve ...

javascriptjqueryd3.jscharts

The hover effect seems to be disabled in the third-level submenu

I need help creating a dropdown menu that shows an image when hovering over a specific item. I have checked my CSS code and HTML structure, but the image is not appearing as expected when I hover over the "Afyon White" list item. Any ideas on how to fix th ...

htmlcssdrop-down-menuhoverdropdown

What mechanism does angularjs employ to detect the $dirty state in the absence of a form tag?

I have implemented $window.addEventListener('beforeunload' to detect changes on a page successfully. Additionally, I am using $transitions.onStart... to monitor navigation with the browser buttons. I find it puzzling though, as my HTML template l ...

htmlangularjs

Iterate through the input values using a for loop and output the value of each individual input

I am working on an express app where I need to loop through data in my EJS file to create 5 hidden input fields, each with a unique value. However, I am struggling to extract the values of these inputs using JavaScript. Despite trying multiple methods, I ...

javascriptexpress

I attempted to separate a string containing <br> tags using the explode function, but the method was not successful

In my code, there is a string that looks like this <br> ACCEPT:YES <br> SMMD:tv240245ce <br> This string is stored in a variable called $_session['result'] My task is to extract the following information either as an array or ...

phphtmlstringexplode

Create a line with elements that end on the next line without taking up the full width

In a row of three links, I want the third one to be on the next line, but using .new-line { display:block; } makes the link 100% width on the next line, causing the entire area to be clickable. I also have content in the :before that should appear inline w ...

css

Compiling Directives in AngularJS for Faster Page Loading

I'm currently experiencing performance issues in my Angular application. The root cause seems to be the excessive use of a directive on a single page. Unfortunately, I don't have the time to break down this page into multiple sections. I am seek ...

javascriptangularjsangularjs-directive

The webpage contains duplicate ID attribute value "x" that has been identified

In my Angular 7 project, three components (a, b, c) all use an input element with the same id of "x". However, component b has 4 input elements all using the id "x" as well. This poses Accessibility Issues as ids must be unique. The test cases utilize &apo ...

javascripthtmlcssaccessibilityangular7

Tips for locating a file within an input element in HTML using jQuery

I attempted to upload a file using jQuery's $.ajax call and formData. To add the file to the formData, I initially tried: var fd = new FormData(); fd.append($('#myFileInput)); However, this method failed. Next, I attempted: var fd = new Form ...

jqueryhtmlfile-io

How can HTML5 geolocation be utilized to provide real-time latitude and longitude coordinates for integration with the Google Maps API?

I am currently working on a project where I need to dynamically fetch longitude and latitude values from the browser geolocation and then include them in the options array for the Google Maps API. Here is the code snippet I am using: function initMap(){ ...

javascriptgoogle-mapsgoogle-maps-api-3geolocation

Transmit HTML message using the "textarea" tag through email

Whenever I try to send the content of my "textarea" via email, it always ends up being sent as a blank message. How can I fix this issue? Below is my PHP code: <?php $input = json_decode(file_get_contents("php://input"), true); $ToEmail = "<a href ...

javascriptphphtmljson

Issue with logging messages using console.log in Knex migration script

My concern: I am facing an issue where the console.log('tableNobject: ', tableNobject) does not get logged in my knex migration script. I have attempted the following code snippets: //solution A export async function up(knex: Knex) { const ta ...

javascripttypescriptknex.js

``req.body is not being properly populated when data is sent using form-data, causing

When I send data in my Node.js application as raw JSON/x-www-form-urlencoded from Postman, it gets passed successfully. However, when sending the data as form-data from either Postman or my Angular frontend, the req.body is coming back as undefined. I have ...

javascriptnode.jsangularmongodbexpress

Visit a webpage on my site

Is it feasible to embed a website within another website? Suppose I have my index.html file. What if in the center of that file, we include an iFrame or similar element that loads , allowing users to explore Google directly on my website? ...

javascriptphphtmliframe

jQuery and Ajax are facing a challenge in replacing HTML

Imagine a scenario where there is a button on a website that, when clicked, replaces a paragraph (<p>) with a header (<h1>). Unfortunately, the code to make this functionality work seems to be faulty: index.html <head> <script s ...

javascriptjqueryajax

Modify the color of the header on Material-UI Date Picker

I recently integrated a Material-UI Date Picker into my React Single Page Application and now I'm facing an issue with changing the header color. I attempted to modify it using the muiTheme palette property, but unfortunately, the header color remains ...

javascripthtmlreactjsdatepickermaterial-ui

The "(click)" event doesn't fire upon clicking a material icon

After creating an <a> tag with a (click) event function call, I noticed that the click event works everywhere except for the arrows mat-icons within the code snippet below: <span *ngIf="section.pages.length>0"> <mat-icon *ngIf="secti ...

htmlangularangular-material

Strategies for accessing the initial portion of an AJAX response

When using ajax to call an URL with dataType HTML, the response includes two parts such as accesstoken=1&expires=452. In this scenario, only the access token is needed. Using alert(response) displays both parts. How can the access token be extracted? ...

javascriptajax