Tips for avoiding cropped images on mobile websites:

I recently created a website that looks perfect on desktop but appears cropped on mobile devices.

The site in question is doc.awsri.com

Here are the images causing the issue:

https://i.stack.imgur.com/eRJXU.png The problem arises when viewing it on a phone.

https://i.stack.imgur.com/91vjv.png I need to adjust the CSS to prevent this from happening.

<div class="col-md-3 margin30">
    <div class="default-wrap wow animated fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
        <div class="img">
            <img src="http://doc.awsri.com/uploads/client/1545150130__FB_IMG_1545145675717 (2).jpg" class="img-responsive" alt="">
        </div><!--person image-->
        <div class="description">
            <h4>The man</h4>
            <span>ready to go</span>
        </div><!--desrciption-->
    </div><!--default-wrap-->
</div>

Could the fixed height of 200px be causing the issue?

.process-box a img, .default-wrap .img img {
    object-fit: cover;
    height: 200px;
    width: 100%;
}

Would removing this height fix the problem?

javascriptjqueryhtmlcssimage

Answer №1

After reviewing the CSS on your live site, I believe there are some changes that could be made to improve the styling. Here is a suggestion:

http://doc.awsri.com/client/css/style.css

.default-wrap .img {
    /* height: 200px; */
}

.process-box a img, .default-wrap .img img {
    /* object-fit: cover; */
    height: auto;
    width: 100%;
}

Answer №2

When the width of the image exceeds 991px, an issue arises. To address this, you can add a media query to your CSS file as shown below in order to maintain a height of 200px for your images.

@media screen and (max-width: 991px) {
  .process-box a img, .default-wrap .img img {
      object-fit: contain;
  }
}

If you prefer to retain the full width of the pictures at 100% and eliminate the fixed height of 200px, you can incorporate the following code.

@media screen and (max-width: 991px) {
    .default-wrap .img {
          height: auto;
    }
    .process-box a img, .default-wrap .img img {
          height: auto;
    }
 }

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

A guide on effectively utilizing ui-state-error in conjunction with jQuery dialog

After successfully implementing a jQuery dialog with my personal theme, I'm interested in utilizing the "ui-state-error" CSS class to display error messages within the dialog with that specific style. Are there any instructions on how to integrate thi ...

jqueryasp.netjquery-ui

Creating a 3-column div with varying sizes of text in another div at the center position

I am attempting to create a 3-column layout using only DIVs, but I am facing some challenges. If I were to use tables in the traditional HTML 4 way, I could achieve this: <div style="width:100%"> <table width="50%" align="center"> ...

htmlcssinternet-explorer-7centering

Combining two JSON datasets and presenting the merged information

I need help parsing two sets of json data from the following URLs: https://raw.githubusercontent.com/openfootball/football.json/master/2015-16/en.1.json https://raw.githubusercontent.com/openfootball/football.json/master/2016-17/en.1.json My goal is to di ...

javascriptangularjsjson

Using AJAX along with the append method to dynamically add identical HTML content multiple times to a single element

Although I have successfully implemented most of the desired functionality with this JavaScript code, there is a persistent bug that is causing unnecessary duplicates to be created when appending HTML. Detecting Multiples The problem lies in the fact tha ...

javascriptjqueryajax

Guide to initializing the state in pinia with Typescript

I am encountering an issue while trying to add typescript to a pinia store. Any suggestions on how to resolve this problem would be appreciated. The project currently utilizes pinia:^2.0.16 and Vue:3.2.37 The error message is as follows: Type '{}&a ...

javascripttypescriptvue.jsvuejs3pinia

Strange spacing in Angular Material checkbox

I have a container with an angular material checkbox inside. The background of the container is black, so I changed the background color of the checkbox to white for visibility. However, there seems to be some unwanted spacing on the right side of the chec ...

htmlcssangularjscheckboxangular-material

Following the parsing of the list of months, the sequence undergoes a

After receiving the JSON encoded object from the server side in PHP MONTHLY_FORMAT, I am reading that object in jQuery as: var MONTHLY_FORMAT = '<?php echo $MONTHLY_FORMAT; ?>'; When checking the console output, it looks like this: {"0 ...

javascriptphpjqueryjson

Add to the end just before the final element when generating dynamically

var creatediv = document.createElement("div"); var text1 = '<input id="attribute1" type="text" placeholder="Attribute" /> $(creatediv).append(text1); var text3 = '<input id="attribute3" type="text" placeholder="Attribu ...

jqueryhtml

Is it possible to utilize an npm package in TypeScript without a d.ts definition file?

Is it possible to use an npm package in TypeScript and Node.js without a .d.ts definition file? If so, how can I make it work? Currently, my code looks like this and I'm getting an error that says "cannot find module 'node-rest-client'" bec ...

javascriptnode.jstypescriptnpm

Exploring the analysis of JavaScript and CSS coverage throughout various pages or websites

The Chrome Dev Tools JavaScript and CSS Coverage Drawer is quite impressive, but there is one thing that could make it even better. It would be great if it could remain active without restarting its analysis every time you visit a new page. I wish I could ...

javascriptcssgoogle-chrome-devtoolscode-coverage

Adjusting the size of all elements on a webpage

Upon completing my project, I noticed that my localhost:3000 is zoomed in at 125%, causing it to appear less than ideal at 100% zoom. Is there a way to adjust the zoom/scale of my website to match how it appeared on my localhost environment? I came across ...

javascriptcssreactjszooming

What is the best way to shift a link to the right within a "div" element?

I've been working on setting up a navigation menu for my website, and I'm having trouble getting the "quit" link to align to the right while keeping the other links aligned to the left. I've tried various methods but just can't seem to ...

htmlcss

How can I enhance a JavaScript Calendar with more features?

I recently acquired a JavaScript and jQuery calendar from CodeCanyon, which can be found here. I am now faced with the task of integrating this calendar into my workplace website. The current calendar on our ASPX-based site is limited to read-only functio ...

javascriptjqueryhtmlasp.netcalendar

Stop html text from overflowing container

I'm facing an issue with a Bootstrap container where the text inside is overflowing and not aligning properly. How can I ensure that the text stays within the container and doesn't cross over, instead just aligning at the bottom of the upper text ...

htmlcssbootstrap-5

Creating a flexible Bootstrap 3 layout that responds to the size of a div, not just the screen

Having a web page layout with a main content area and a fixed-width sidebar is proving to be a challenge. I want the content displayed in both sections to be responsive, adjusting based on the size of their respective parent divs rather than the screen siz ...

htmlcsstwitter-bootstrap

Looking for assistance in arranging 3 divs next to each other

I'm looking to align three divs side by side, but I can't seem to get them to line up correctly. I've tried using simple CSS, but it's not working as expected. Any help would be greatly appreciated. Additionally, I want these divs to a ...

csshtmlcss-floatwidth

Obtaining a group object when the property value matches the itemSearch criteria

What is the best way to extract specific objects from a group when one of their properties has an array value, specifically using _.lodash/underscore? { "tileRecords" : [ { "tileName" : "Fama Brown", "tileGroup" : ["Polished", "Matt", ...

javascriptangularjsjsonunderscore.jslodash

Node.js Mistake - 'Attempting to import outside of a module is not allowed'

I’m currently immersed in a React project, and my focus is... Firebase.js import firebase from 'firebase/app' import 'firebase/database' import 'firebase/auth' const firebaseConfig = { apiKey: process.env.FIREBASE_AP ...

javascriptnode.jsfirebaseecmascript-6import

Creating custom UV coordinates for tiling textures on ExtrudeGeometry using Three.js

I'm attempting to generate a textured surface along a path in three.js, aiming for a tiling/repeating effect similar to what can be achieved in Blender. Creating individual faces manually and applying textures works well for simple paths like straight ...

javascriptthree.js

Is this method an effective way to create global states across React components?

After delving deep into props-drilling while coding a full-fledged web application with React, I've decided to explore using React 'contexts'. Following the guidelines in the React documentation, I am implementing an approach to make my stat ...

javascriptnode.jsreactjsreact-hooksreact-context