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

When using Jest, the mongoose findOneAndUpdate function may return null values for both error and document

I've been struggling with Mongoose's findOneAndUpdate method as it doesn't seem to provide any useful information. I have tried accessing the Query returned from calling it (stored in updatedUser), but all it returns is null. Adding a callba ...

javascriptnode.jsmongoosejestjs

What is the best way to center align my button using CSS?

I'm struggling with aligning this button in CSS to the center: .btn { background-color: #44c767; -moz-border-radius: 28px; -webkit-border-radius: 28px; border-radius: 28px; border: 1px solid #18ab29; display: inline-block; cursor: poi ...

css

Guide on how to style and arrange multiple checkboxes in both horizontal and vertical rows using CSS

Is it possible to align a collection of checkboxes both vertically and horizontally, even when the labels vary in size? I found an example that demonstrates vertical alignment. Click here to view. How can I neatly arrange these checkboxes so that they ar ...

htmlcsscheckboxvertical-alignment

Preserving filter selections in Datatables and transferring them back to dropdown menus

I have implemented Jquery datatables with dropdown filters in the form of a table. The HTML structure is as follows: <table id="example"> <thead> <tr> <th>Name</th> <th>Position</th> ...

jqueryjquery-selectors

What methods can be used to identify the pattern entered by the user for data types such as `Int`, `VarChar`, `

I have a dropdown menu containing data types. There is also a text box for entering Regex patterns. If "/test/" is entered in the textbox or "Int" is selected from the dropdown, then it's an incorrect pattern. If "/[0-9]/" is entered in the ...

javascriptjqueryregex

Navigate back to the previous page without reloading

Initially, I must clarify that the title of my query may not be entirely representative of what I wish to convey. The situation at hand is as follows: I have developed a jQuery table designed for exhibiting video records. Embedded within this table is a hy ...

phpjavascriptjqueryjquery-ui

Ways to filter and display multiple table data retrieved from an API based on checkbox selection in Angular 2 or JavaScript

Here is a demonstration of Redbus, where bus data appears after clicking various checkboxes. I am looking to implement a similar filter in Angular 2. In my scenario, the data is fetched from an API and stored in multiple table formats. I require the abili ...

javascriptangulartypescriptsearchfilter

Delete dynamic elements from an array once they are no longer present in the DOM

In this code snippet, I have implemented a button that adds a new object to both the document and an array. When you click on each object, it gets removed from the document. However, the challenge here is how can we also remove it from the array? You can ...

javascriptjquery

The hideCol method does not work on jqGrid

Encountering a problem with the hidecol method in jqGrid. Despite calling the method, nothing seems to happen. Using version 4.5 of jqGrid. The table is created as follows: // Table creation using jqGrid $('#shipTable').jqGrid({ data: tabl ...

jquerycssjqgrid

Ensure that the placeholder remains visible as you type in the input field

Is there a way to implement an input text field in React with the placeholder "DD-MM-YYYY," that partially disappears as I start typing? For example, when I type "02-," only "-MM-YYYY" should remain visible as part of the placeholder. ...

javascripthtmlcssreactjsmaterial-ui

"Implementing drag and drop functionality in Vue.js without the need for a

Exploring html 5 drag and drop functionality using vue js has been a challenging experience for me. After following the w3schools tutorial on drag and drop, I managed to get it working in a basic html file but faced difficulties when implementing it in my ...

javascriptvue.js

Stop using the jQuery POST method after receiving a message indicating that the entry already exists in the database

Is it possible to stop the jQuery process once I receive a message indicating that data already exists in the database? I need to first check the ID, and if it does not exist, then insert it into the database using $.post("process.php"). $.post("checkda ...

phpjqueryajax

Unable to activate Knockout data-bind using jQuery

I'm developing a plugin using jQuery and knockout.js. Currently, I have a scenario where I need to manipulate radio buttons with knockout data-bindings. However, I've encountered an issue when trying to uncheck a radio button by clicking another ...

javascriptjqueryknockout.jsknockout-2.0knockout-mvc

Encountered a 500 internal server error when making a Jquery ajax POST

I am encountering an issue where the server is responding with a status of 500 (Internal Server Error) when trying to call my controller method. I am unsure why this error is occurring: <script type="text/javascript"> $('.dynamic').cha ...

jqueryajaxlaravel

karma - Plugin not located

Attempting to run JS test cases using karma, but consistently receiving a plugin not found error. Oddly enough, the same configuration file works perfectly for one of my co-workers. Below are the logs: $ karma start karma.conf.js 04 10 2016 17:51:24.755 ...

javascriptnode.jskarma-runnerkarma-mocha

.click function failing to trigger on dynamically loaded form

I'm facing an issue with a form that displays images from my database. After retrieving the filepaths, they are loaded dynamically into the form along with a "Delete" <button> for users to delete the image via AJAX. Although I can successfully ...

javascriptphpjqueryhtmlajax

Converting JavaScript code from Jade into EJS framework

I am currently working on converting code from Jade to EJS and could use some assistance. I have started the translation process, but I'm not entirely confident in my approach. Additionally, I find the syntax used in EJS to be confusing compared to tr ...

javascriptnode.jsejs

Moving divs to a separate line in mobile display

I currently have a basic image-thumbnails landing page set up like this: <div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div> <div style="display: inline-block;"><i ...

htmlcss

What should I do to resolve the issue of the function if ($(window).width() < 768) {} not functioning properly upon resizing the browser?

I am working on a functionality where the navigation bar items will toggle hidden or shown only when the browser width is less than 768px and an element with the class "navlogo" is clicked. I have included my code below for reference. if ($(window).width( ...

javascriptjqueryhtmlcssangularjs

Utilizing AJAX to amplify the worth of plupload's echo capabilities

Greetings! Here is the JavaScript code I am using for plupload var uploader = new plupload.Uploader({ runtimes : 'html5,flash,silverlight,html4', browse_button : 'pickfiles', // you can pass in id... container: document.getElementById( ...

javascriptphpjqueryajaxplupload