The background image is excessively zoomed in on an actual iPad device

I'm having trouble figuring this out. My tech stack includes Next.js, TypeScript, and Chakra UI.

  • When I inspect my application, everything looks great as intended.
  • On mobile, it works perfectly fine.
  • However, when I view it on my physical iPad without using inspect tools, the display is completely zoomed in.
  • One solution could be to remove 'fixed' from my desktop media query, but I prefer to keep it for the desktop version.
  • I've tried various suggestions, even from ChatGPT, but the issue persists.
  • For reference, I attempted using Chakra UI attributes like base, md, sm, lg, with no success, hence resorting to classic CSS for media queries utilizing max and min styles.

Could this be a specific problem with Chakra UI?

< Container 
  maxW="100%"
  id="contact"
  backgroundImage={`url('/imgs/contact_banner.png')`}
  backgroundSize="cover" 
  sx={{
    backgroundAttachment: 'scroll', 
    
    // Media Queries
    '@media screen and (min-width: 390px)': {
      backgroundAttachment: 'scroll',  
    },
    '@media screen and (min-width: 481 and max-width: 768px)': {
      backgroundAttachment: 'scroll',  
      backgroundPosition: 'cover', 
    },
    '@media screen and (min-width: 1024px)': {
      backgroundAttachment: 'fixed',   
      backgroundSize: 'cover',         
      // backgroundPosition: 'center',    
    },
  }}
>
javascriptcsstypescriptnext.jschakra-ui

Answer №1

< Container
  maxW="100%"
  id="contact"
  backgroundImage={`url('/imgs/contact_banner.png')`}
  sx={{
    backgroundAttachment: 'scroll', 
  
    '@media screen and (min-width: 390px)': {
      backgroundAttachment: 'scroll',

 
    },
    '@media screen and (min-width: 768px)': {
      backgroundAttachment: 'scroll', 

    },
    '@media screen and (min-width: 1024px)': {
      backgroundAttachment: 'fixed',
      backgroundSize: '100% auto', 

    },
  }}

The cover value above the sx={} had to be removed and adjustments were made inside media queries, which successfully resolved the issue.

Answer №2

Here is the proper way to use both min-width and max-width together by using "and." If this doesn't resolve the problem, please inform me.

    '@media screen and (min-width: 481px) and (max-width: 768px)': {
      backgroundAttachment: 'scroll',  
      backgroundSize: 'cover', 
    },

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 modifying the look of :-webkit-autofill

Is it possible to change the default orange background-color of :-webkit-autofill? If so, how? :-webkit-autofill, input:-webkit-autofill { background-color: #fff !important; } Unfortunately, the above code did not produce the desired result. ...

cssgoogle-chromeweb

Encountering the error message "Undefined. Please implement using the following snippet" while running a protractor cucumber typescript feature file

Currently, I am utilizing Protractor with TypeScript and Cucumber for automation purposes. After going through some informative articles, I have successfully incorporated feature files and step definitions into my end-to-end project. Below is the structur ...

typescriptprotractorcucumbercucumberjs

When you print document.getElementById('idname').value, it only displays [object HTMLInputElement]

Currently, I have a Tamper-monkey script in place that is designed to scrape specific text from a single page. The script's job is to extract the values of three buttons named pick_0, pick_1, and pick_2 from the page and display them in a designated b ...

javascriptweb-scrapingtampermonkey

Color of Bootstrap tooltip arrow outline and fill

How can I customize the background color and border color of the tooltip arrow in Bootstrap 4? $(function() { $('[data-toggle="tooltip"]').tooltip() }) .tooltip-main { width: 15px; height: 15px; border-radius: 50%; font-weig ...

csstwitter-bootstrapbootstrap-4

Having trouble toggling classes with mouseup in Wordpress Underscores theme

While I'm utilizing Underscores as the foundation theme for my website, one aspect that I particularly appreciate is its incorporation of a functional mobile navigation component. However, since my site is essentially single-page, the navigation remai ...

javascriptphpjquerywordpressunderscores-wp

JavaScript function with multiple parameters inspired by Objective-C methodology

Currently, I am developing an appcelerator module using Xcode and programming in obj-C. One of the methods I have created accepts multiple arguments, as shown below: -(void)useThis:(NSString*)this withThat:(NSString*)that{} My question is, how do I inv ...

javascriptiosxcode

Sending data via req.body from middleware

One middleware function is defined as follows: app.use('api/', authenticate, bar); In the authenticate function, a variable is being attached to req.body like so: req.body.user = foo; However, when trying to access req.body.user inside the ba ...

javascriptnode.jsexpressmiddleware

Sending Data From Ajax to JavaScript

While I know this question has been asked and answered a few times before, the exact context of my query remains unanswered. To ensure full understanding, I would like to pose my specific scenario. I am looking to trigger a server-side call to query infor ...

javascriptphparraysajax

Tips for utilizing ion view within an ionic 2 application

In my original use of Ionic 1, I placed the footer after the <ion-content> and before . However, in the new Ionic 2, I can't seem to find any reference to <ion-view>. My specific need is to have two buttons at the bottom of the screen fol ...

htmlcssangularjsionic2hybrid-mobile-app

Angular's Readonly component fails to display line breaks

I am currently developing an Angular application using C#. One issue I have encountered is with read-only components that display saved data from the database. For instance, when inputting text into a Textarea component, such as: hello there hello ...

javascriptc#angularreadonly

JavaScript linking in HTML anchor tag

Can someone please assist me in getting this code to function properly? I am having difficulty with the numerous quotation marks and unsure of where to place them correctly. Any guidance on resolving this issue would be greatly appreciated. <script typ ...

javascriptphpcalendar

Could you provide guidance on how to toggle the visibility of a div using the click event of a button or link located on a different HTML page in Angular?

Is there a way to change the visibility of a div on a different page when a button or link is clicked? For example, I have a button on the "main.html" page that, when clicked, should display a hidden div on the "header.html" page. How can I achieve this? ...

htmlcssangularweb

Express.js Res redirection problem occurring with Backbone.js due to failure in redirecting hashtag URLs

Issue Summary: Having trouble with Express.js redirect functionality. The problem occurs when trying to redirect after entering /#impulse, but works fine with /impulse/. Server processes the request for /#impulse before applying redirect checks, which re ...

javascriptnode.jsbackbone.jsexpress

Ion2 Ngfor can only be used with arrays as data sources

Struggling to retrieve JSON data using the http client, but facing an error when trying to display it in the view: NgFor only supports binding to Iterables such as Arrays Upon inspecting the console.log output, I noticed that the data is an object contai ...

angulartypescriptionic2ionic3

The background of the body isn't showing up on the

I'm having trouble setting the background on my page. The background works for another div on the same page, but not on the body background itself. <!DOCTYPE HTML> <html> <head> <title>iDeas.com</title> <link rel=" ...

htmlcss

Why Isn't the Element Replicating?

I've been working on a simple comment script that allows users to input their name and message, click submit, and have their comment displayed on the page like YouTube. My plan was to use a prebuilt HTML div and clone it for each new comment, adjustin ...

javascripthtmlcss

AngularJS: Enabling unidirectional binding for select option to model

Utilizing a dropdown to display client names. Users have the ability to choose an existing client, which will then update the scope property: Controller Setting up the initial selection. if($scope.clients.length > 0) $scope.existingClient = $scope.cl ...

javascriptangularjsangularjs-scope

The declaration file for the module 'styled-components/native' appears to be missing

When incorporating styled-components into your React Native application, a separate sub-directory is created for the native components: import styled from 'styled-components/native`; export const Container = styled.View` ... `; If you attempt to i ...

typescriptreact-nativestyled-components

exchanging a library for a different one

I'm faced with a relatively simple task here, but as I am just beginning to delve into object-oriented programming, it is proving to be quite perplexing for me. Currently, I am using the lon_lat_to_cartesian function from the following source: functi ...

javascriptthree.js

Django views functions do not receive any data during execution

Things are running smoothly, but it appears that the post function in views.py is not receiving any data. Also, how can I create a submit button using pure JavaScript without reloading the page? views.py: from django.shortcuts import render from rest_frame ...

javascriptpythondjangodjango-rest-frameworkbackend