The dimensions of the image are distorted when viewing the website on a mobile device

Having an issue with displaying an image behind text on a mobile device. The website looks fine on desktop and even in mobile mode from the console, but once deployed and viewed on an actual mobile device, the image becomes stretched out.

Tried setting width and height to auto and allowing max-width as 100%, but it creates other issues with the image.

Here's how it appears on desktop https://i.sstatic.net/9yyta.png. And here's how it displays in cellphone mode in Chrome console https://i.sstatic.net/kORcg.png. However, this is how it shows on an actual mobile device https://i.sstatic.net/9ftSy.jpg[https://i.sstatic.net/9ftSy.jpg][1]

HTML

<div class="row d-flex text-center justify-content-center pb-4 footerWithImage">
            <div class="row mt-4 d-block text-white col-lg-5">
                <!-- Content -->
                <h6 class="text-uppercase font-weight-bold">Carson Moore Fitness</h6>
                <hr class="bg-light mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
                <p>Helping clients build muscle, burn fat and improve posture using safe and effective,
                    personalized fitness programs.</p>
            </div>
            <div class="row mt-4 d-block text-white col-lg-5 footerContacts">

                <!-- Links -->
                <h6 class="text-uppercase font-weight-bold">Contact</h6>
                <hr class="bg-light mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;">
                <br>
                <a href="https://g.page/sandcastlefitnessclub-24hrs?share"><i class="fas fa-home mr-3"></i>White Rock,
                    Surrey, BC</a><br>
                <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ceff3f1f9f3f2f9dcf9e4fdf1ecf0f9b2fff3f1">[email protected]</a>?Subject=Hello%20again" target="_top"><i
                        class="far fa-envelope mr-3"></i>&nbsp;<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e78e898188a78486959488898a88889582818e9389829494c984888a">[email protected]</a></a><br>
                <a href="tel:604-555-5555"><i class="fas fa-phone mr-3"></i>+16045555555</a>
                <div id="socialMediaLinksDiv">
                </div>
            </div>
        </div>

CSS

.footerWithImage {
    background: url("https://images.unsplash.com/photo-1563685759732-3b118f9445c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 20%;    
}

Note: Issue resolved. Check my answer

htmlcssbootstrap-4

Answer №1

To achieve the desired size for an image on mobile, you will have to use media queries to specifically target and adjust it accordingly.

Answer №2

It is essential to include !important after your background styles to prevent browsers/frameworks from overriding your custom styling, such as background-size: cover;

.footerWithImage {
    background: url("https://images.unsplash.com/photo-1563685759732-3b118f9445c3");
    background-attachment: fixed !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center 20% !important;    
}

Learn more here

Answer №3

By utilizing the max-width property, you can ensure that an image maintains its original aspect ratio and dimensions, making it ideal for responsive web design.

Below is an example of how the CSS code would be implemented:

img {
  height: auto;
  max-width: 100%;
}

You can easily adjust the percentage to suit your specific requirements.

Answer №4

Here is the answer reposted for more visibility, Singh Raman's solution works really well.

@media only screen and (max-device-width: 1366px) {     
.footerWithImage {      
   background-attachment: scroll;} 
}

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

Tips for customizing the mx-fluity navbar code to create multi-tiered dropdown menus

I have limited experience in web design and struggle with understanding CSS code. Can anyone provide guidance on how to create a (multi-level) menu in the popular mx-fluity blogger template that will display consistently on both PC and mobile browsers? T ...

htmlcssblogger

Ways to avoid scrolling on a fixed element

Here is the HTML setup I have... body .top .content The issue I am facing is that when scrolling reaches the end of the ul in the .top element, the background starts to scroll. This can be quite disorienting and makes the site slow on tablets. Even ...

javascriptjqueryhtmlcss

Two collapsible menus featured in the navigation bar

My navbar is displaying two collapse menus, but when one is active and I open the second one, the collapsed content from the second menu gets added to the end of the first one's content. How can I close the other menu when opening the second one? h ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to insert a triangle shape to the bottom of a div with an opacity level set at 0.2

https://i.stack.imgur.com/sqZpM.png I've been trying to create something similar, but my triangle keeps overlapping with the background in the next section. I've already spent 3 hours on it. Any help would be greatly appreciated. Check out my c ...

htmlcssangularsass

"Troubleshooting issue in Django 1.6.2 where CSS styles are not being applied to

I am encountering an issue with this code and would greatly appreciate some assistance. The base.html file contains a {% block content %}{% endblock %}. I have created a Signup.html file structured like this: {%extends 'base.html'%} {% block co ...

pythonhtmlcssdjangohttp-redirect

Adjust the display from none to block when the parent element is set to flex

JSFiddle Demo Issue with - .popupcard_first:hover .popupcard_first { display: block; } I am trying to link the :hover effect to the first card only, but the only way I could make it work is by changing .popupcard... to .featured_cards:hover .po ...

htmlcssflexbox

Selenium - Struggling to locate elements that are undeniably present on the website

I started a fun side project to automate tasks on the website using Selenium to automatically complete all achievements. You can check out my code on GitHub: https://github.com/jasperan/pyfastfingers However, I've run into an issue with the login pa ...

pythonhtmlseleniumautomation

Error in Internet Explorer when using SyntaxHighlighter and jQuery - "Property 'slice' cannot be accessed: object is null or undefined"

I have a strong liking for SyntaxHighter - it presents code in a very stylish manner. However, I have encountered a frustrating JS error in IE7 and IE8 that is hindering me from using this wonderful plugin to its full potential. Let's run a test case ...

javascriptjqueryhtmlsyntaxhighlighterxregexp

Using regular expressions to swap out content within HTML tags

I am attempting to encrypt the text content within an HTML Document while keeping its layout intact. The text content is enclosed in pairs of tags, such as: < span style...>text_to_get< /span>. I aim to utilize Regex to extract (1) and then rep ...

c#.nethtmlregexreplace

Additional section for positioning beyond designated spot

If you want to understand better, take a look at this link: Here's the scenario: I have one article with 2 CSS columns. In the first column, there is text and images for the article, while in the second column, I want to place aside elements like tex ...

htmlcsszurb-foundation

Automatically add shimmer with CSS styling

Is it possible to make the shine effect work automatically (without needing hover) every 5 seconds? http://jsfiddle.net/AntonTrollback/nqQc7/ .icon:after { content: ""; position: absolute; top: -110%; left: -210%; width: 200%; height: 200%; ...

jqueryhtmlcssanimationeffects

Are HTML tables a viable fix for the problem with ng-repeat?

Let's talk about a fictional dataset that mirrors tabular data found in Excel. function SU(name: String, data: Array<any>) { this.name = name, this.data = data }; function Month(month: String, year: String, goal: Number, projection: ...

htmlangularjshtml-tableangularjs-ng-repeat

The text within the button disappears when in the :before state

After implementing the code from this codepen, I decided to use the 3rd button design. .btn { line-height: 50px; height: 50px; text-align: center; width: 250px; cursor: pointer; } .btn-three { color: #FFF; transitio ...

htmlcssbuttonhover

Example of Image Slider using AngularJS

<body ng-app="myApp"> <div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'"> <div class="slider-content" ng-switch-when="1"> <img src="../images/ship.png" /> & ...

angularjscss

Show an image on a webpage using a URL from a Firebase database with HTML

How can I dynamically display images from URLs in my table? My table automatically increments every time new data is added, but I'm having trouble displaying images. The table already shows the URL where the image should be displayed. Here is the ou ...

javascripthtmlfirebasefirebase-realtime-database

Packaging an Angular project without the need for compiling

In order to enhance reusability, I structured my Angular 6 Project into multiple modules. These modules have a reference to a ui module that contains all the style sheets (SASS) as values such as: $primary-text-color: #dde7ff !default; Although this app ...

cssangularmodulesassangular6

Creating styles for different screen sizes including mobile devices, low-resolution desktops, and high-resolution desktops

One of the techniques I'm using involves analyzing both the horizontal and vertical screen dimensions to differentiate between mobile devices and desktops, as well as distinguish high-resolution from low-resolution desktop displays. In order to achie ...

htmlcssmobile

The custom bullet points are not appearing correctly

I've been attempting to design a custom bullet list, but it doesn't look quite right as I had hoped. The issue is that the spacing appears too close, you can see an example HERE Any suggestions would be greatly appreciated. Thank you ...

csshtml-lists

AngularJS NG-Grid displaying incorrect value for select cell

I'm working on creating a table with a column that needs to be selected based on a value received from the server. The server sends me 4 as the value, but the first option is always selected instead. $scope.lotteryOptions = { data: 'myDa ...

javascriptjqueryhtmlangularjsng-grid

Adjust the color of the text within a div element when hovering over and moving the mouse away

Is there a way to change the text color on mouse hover and mouse out, even with multiple nested div elements? I'm having trouble getting it to work, so any help would be appreciated. <div class="u860" id="u860" style="top: 0px;"> <div id ...

jqueryhtmlcss