Having issues with CSS formatting on mobile view

Question

When I view my React app on mobile there is always extra space to the right:

https://dsousadev.github.io/23imgs/

I can't see this extra space when I use dev tools to simulate a mobile view, but when I view the site on a variety of mobile browsers the space is there and the app doesn't auto fit.

Here's the current CSS in my media query:

@media all and (max-width: 414px) {
  .ImageCard,
  #CardImage {
     width: 314px;
  }
  #CardImage {
    height: 314px;
  }
  ul {
    font-size: 1.2rem;
    padding: 0 15px;
  }
}

The mobile device you used to test your app with probably have a screen width of between 415px to 614px (the original width of your .ImageCard) and your media queries just doesn't work well with that specific mobile device. That means it needs more work. — josephting
– josephting, Commented Mar 29, 2019 at 0:19

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

The element <input accept="image/*" name type="file"> is causing the issue.

If I apply display: none to .fileContainer input, the space goes away.

Edit

Alright, so looking into the issue a bit more, it looks like semantic.min.css is applying a font-size: 100% to button, input, optgroup, select, textarea. This is causing your input to grow in size (here's the input when visible):

If we disable the font-size: 100%, the input renders correctly:

After which, your original styles work:

So display: none or reverting font-size will work :)

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 29, 2019 at 0:27

Jack

9,4282 gold badges36 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Over a year ago

Thanks so much, can I what steps you took to figure it out so Im not a noob forever lol

Jack Over a year ago

Sure thing! I'm testing with Safari Developer Tools + Simulator (via XCode, though a physical iPhone would work). As you probably know, it's usually pretty easy to determine what's the issue once you have dev tools open (as you're selecting elements...) Your particular issue though....nothing really stood out! I ended up "brute" debugging by removing elements one by one until the space disappeared, lol. I'm actually still looking into WHY the input is causing a space, just for my own curiosity!

Collectives™ on Stack Overflow

Having issues with CSS formatting on mobile view

1 Answer 1

Edit

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related