Question 413047 in CSS Question posted in
Some basic documentation can be found here.

Css – Background Image too far zoomed in on physical iPad

I cant seem to figure this out. I am using Next.js, typescript, and chakraUi.

  • When viewing my application through inspect tools, it works exactly as envisioned.
  • When viewing my application through mobile it works as envisioned.
  • But when viewing on my physical iPad instead inspect tools, it is all the way zoomed in.
  • I could fix this by getting rid of ‘fixed’ in my desktop media query, but I want to keep fixed for desktop
  • I have tried many things including a scoping amount of recommendations from chatgpt, but cannot solve this issue.
  • Note: I have tried the chakraUI attributes such as base, md, sm, lg, but was not able to get that to work which is why I resorted to classic css styled max and min for media screen.

Is this a chakra specific issue?

< 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',    
    },
  }}
>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    < 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', 

    },
  }}

    I had to get rid of the cover value above the sx={} and then adjust inside media queries. this solved it.


  2. 0

    This is the correct syntax for combining min-width and max-width using "and".
    Let me know if this doesn’t fix the issue.

        '@media screen and (min-width: 481px) and (max-width: 768px)': {
      backgroundAttachment: 'scroll',  
      backgroundSize: 'cover', 
    },
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search