CSS - Image not adapting to screen size

If you take a look at the website www.markallanholley.com, you will notice that the robot-girl image on the right is not responsive. I have tried coding what I thought was the correct way to make it responsive, but unfortunately, it's not working. I would appreciate it if someone could review it.

I am confident that the CSS is correctly targeting the HTML because I conducted a test by changing the background color to green and it worked. However, when I removed that line of code, the issue with the responsive image persisted.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// More CSS styles...

// Link to Google Fonts

<link href="https://fonts.googleapis.com/css2?family=Forum&family=Patua+One&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

// HTML Content

<div class="container">
  
  // More HTML content...
  
</div>

Answer №1

There seems to be an error in your implementation of the grid-template-columns property. You can easily spot it by inspecting the .container class using the browser.

https://i.sstatic.net/NBy4d.png

I have provided a quick fix below, but please adjust as needed to achieve your desired outcome.

grid-template-columns: 1fr 10px 1fr;

You can watch a screenshare demonstration of the fix being implemented with a slight adjustment here:

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

Positioning a flex item to the right by using float

I am in need of assistance with my HTML layout. <div class="container"> <div class="sidebar" style="float:right"> Ignore sidebar? </div> <div> main content </div> </div> The container is set to have a flex disp ...

Display the text field in Angular with the appearance of a password field, not an input field

I am currently working with Angular 8 for my Angular-Electron project. Within this application, I have a sensitive field labeled API-Key stored in tabular format that needs to be displayed on the user's account page. However, it must appear as a passw ...

Failed to add a new entry to the Sharepoint 2013 List

Having trouble saving an item to a SharePoint list using Knockout.js and REST. In my Ajax POST request, I've used ko.toJSON but the entry doesn't show up in the SharePoint list. It's possible that I'm passing the wrong parameter value. ...

Implementing React inline styles by directly incorporating brackets into the HTML rendering

I'm working on a project in React using create-react-app and trying to apply an inline style. Based on my research, the following line of code should work fine: <div id="root" style={{ height: 'auto' }}></div> However, when I r ...

Initiating an action the moment the element comes into view by scrolling

I need to apply specific classes to an element with an id of ig-container. The classes I want to add are: $("#ig-container").addClass("animated bounceInRight"); I aim to animate this element once it becomes visible on the screen, triggered by a user scro ...

Issues with clicking on the ion-tab icon in AngularJS are hindering the functionality

I'm currently facing a challenge with an ion-tab icon in my AngularJS project. I've been attempting to add a click action using the code below, but unfortunately, nothing is displaying as expected. HTML <ion-tab title="Share" icon="icon ion- ...

How can we stop the jumping of images in the grid? Is there a way to eliminate the jump effect?

Here is a script I am working with: <script src="http://static.tumblr.com/mviqmwg/XyYn59y3a/jquery.photoset-grid.min.js"></script> <script> $(document).ready(function() { $('.photoset-grid').photose ...

CSS3 variables causing issues

I want to streamline my CSS file by setting up generic variables that can be used throughout to ensure consistency and organization. For example: @shadow: 6px 6px 10px rgba(0,0,0,0.2); .shadow { box-shadow: @shadow inset; } However, when I try to a ...

Different tab designs with a variety of color schemes

I am looking to implement various color combinations for different tab selections using the background-color property. For instance: About: red .nav-tabs, dark red for .active, Services: yellow .nav-tabs, dark yellow for .active, .... .... and so fort ...

Organize objects and reconstruct the inventory

I am working with a nested list that contains some string data. My goal is to iterate through the top-level items and group together those that are the same. Then, I want to split the strings inside by comma, creating separate items for each, and nest all ...

Is it possible to utilize AJAX requests in order to create a marker on google maps that updates in real-time?

My goal is to develop an app that generates a real-time updating google map, and I have been advised that AJAX requests can help achieve this. Nevertheless, after studying the documentation, I am uncertain about how to apply this method to solve my issue ...

Is there a way to trigger an image flash by hovering over a button using the mouseover feature in AngularJS2?

When I hover over the 'click me' button, I want an image to appear on the webpage. When I stop hovering, the image should disappear using the mouseover option. This is what I attempted in my app.component.ts and my.component.ts files: Here is t ...

Emphasize certain VueJS elements for focus

Currently, I am working with a Vue file and I'm interested in highlighting the active element. Can you recommend the most efficient method to achieve this? <li @click = "selectedComponent = 'appBugs1'"><i class="ion-bug"></i& ...

Having trouble transmitting POST values through AJAX requests

I am facing an issue with two separate files, bargraph.html and data.php. Here is the content of bargraph.html: <form method="POST" name="dataform" action=""> <select name="data1" id="data1-value"> <option value="DateRecorded">Dat ...

The way Firefox interprets em values is incorrect

Currently, I am working on an adaptive website where I have used em values for everything. However, I am facing discrepancies between Chrome and Firefox when it comes to interpreting em values. The website can be found at dev.morodeer.ru/stroymoidom and ...

Adjacent components

I have a query regarding the utilization of Angular. I aim to align the sentences side by side. These are two distinct components that I developed. I wish for recipe-list and recipes-details to function properly, with both statements displayed alongside ...

Is there a way in PHP to retrieve database values and display them in HTML text boxes when a button is clicked, all without

Is there a way to dynamically fetch values from a database and display them in text boxes without the need to refresh the page? Here is the PHP code snippet I have been working on: <?php include 'Connection.php'; $sql = mysqli_query($conn ...

What is the best way to use multiple encoding types when sending data via a POST method in Node.js?

My current challenge involves sending a combination of name and description text data alongside a video file. Unfortunately, I've encountered an issue where I can only send either the video or the text, but not both simultaneously. Below is the code ...

Center an absolutely positioned element horizontally within a relative positioned container

Struggling to center an inner element with a position: absolute property inside of a position: relative element? Take a look at this code snippet (https://jsfiddle.net/qL0c8cau/): html,body,div {margin:0;padding:0;} .one { position: relative; margin ...

Learn how to access an array within an object using JavaScript and an API URL

Trying to fetch data from the swapi API to display film titles using jQuery. Below is the JavaScript code: $(function(){ function promiseTest(){ return $.ajax({ type: 'GET', url: 'https://swapi.co/api/people/', } ...