Responsive height of Row

[Ryukote]

Hello,

On the screen of my Surface Pro 3 everything is as I want, but when I try to open page on my phone (Nokia Lumia 930...don't judge me, my Android phone is on warranty service), height of the elements seems like too small. Shouldn't responsive means that on smaller screens, elements should be bigger?

Here is what I have:

import React from 'react';
import {InputGroup, InputGroupAddon, Input, Button} from 'reactstrap';
import {Grid, Row, Col} from 'react-flexbox-grid';

class Login extends React.Component{
    render(){
        return(
                    <Grid>
                            {/*Row for username*/}
                            <Row xs="6">
                                <Col xs={3} sm={3}/>

                                <Col xs={6} sm={6}>
                                    <InputGroup id="loginGroup">
                                        <InputGroupAddon addonType="prepand">
                                            @
                                        </InputGroupAddon>

                                        <Input placeholder="username" />
                                    </InputGroup>
                                </Col>

                                <Col xs={3} sm={3}/>
                            </Row>

                            <br/>

                            {/*Row for password*/}
                            <Row>
                                <Col xs={3} sm={3}/>

                                <Col xs={6} sm={6}>
                                    <InputGroup id="loginGroup">
                                        <InputGroupAddon addonType="prepand">
                                            ....
                                        </InputGroupAddon>

                                        <Input placeholder="password" type="password" />
                                    </InputGroup>
                                </Col>

                                <Col xs={3} sm={3}/>
                            </Row>

                            <br/>

                            <Row className="text-center">
                                <Col xs={3} sm={3}/>

                                <Col xs={6} sm={6}>
                                        <Button color="primary">Login</Button>
                                </Col>

                                <Col xs={3} sm={3}/>
                            </Row>
                    </Grid>
        );
    }
}

export default Login;

Can I change height of the Row component trough some property, or do I need to write some magic in CSS? (Which I want to avoid)

Thanks