CODEWITHSUNDEEP
htmlcssbuttonmobileresponsive
Pearu
Pearu

Reputation: 315

Extra spacing between buttons ONLY on mobile browsers

I'm having a difficult time debugging this issue. I need my buttons to be both touching and stacked horizontally. On desktop browsers, I get something similar to the following: 

#aWrapper {
  display: flex;
}

.buttons {
  border: 1px solid black;
  display: block;
 }
<div id="aWrapper">
  <button class="buttons">Button 1</button>
  <button class="buttons">Button 2</button>
</div>

Which is what I want! But on mobile browsers (Chrome, Safari, Opera Mini, and Firefox) on iOS I get this result with the EXACT same code (I added a margin on purpose to illustrate): 

#aWrapper {
  display: flex;
}

.buttons {
  border: 1px solid black;
  display: block;
  
  margin-right: 4px; /*IGNORE THIS*/
 }
<div id="aWrapper">
  <button class="buttons">Button 1</button>
  <button class="buttons">Button 2</button>
</div>

Why is this happening? I saw from other answers that white-white space might be an issue, but it's not in this case.

Here is the CodePen showing this in action. Open it in a desktop browser, then open it on an iOS device using any browser. There should be extra spacing between the buttons in the mobile browser, and they should be touching in the desktop browser.

NOTE: The answer I marked correct works fine, but display: flex ALSO works on the wrapper, I just wasn't importing my css normalizer file correctly, leading to this unnecessary headache.

Upvotes: 0

Views: 328

Answers (1)

Rahul
Rahul

Reputation: 4364

hmm

since i dont have any ios device to test, but this is what i expect to work 

#aWrapper .buttons{
  display: inline-block;
  border: 1px solid black;
  margin: 0;
  float: left;
}
#aWrapper{
  clear: both;
}

https://jsfiddle.net/e08buvp5/

Upvotes: 1

Related Questions