CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
Ralph
Ralph

Reputation: 307

Inputs not aligning inline in media query

I am making my site responsive and doing all of the media query CSS. My inputs align inline on the desktop mode. I have done nothing in my media query for my inputs to not align inline, but the right input is a couple of pixels down from the left. It may help to see my site, it is sundayfundayleague.com .

The media query code:

.signinbutton {
    padding: 7px;
    font-size: 1.3em;
    margin-top: 225px;
    margin-left: 8%;
}
.registerbutton {
    margin-left: 52%;
}

The desktop version:

.signinbutton {
    padding: 10px;
    font-size: 2.5em;
    margin-top: 325px;
    margin-left: 28%;
}
.registerbutton {
    margin-left: 32%;
}

What am I doing wrong?

Upvotes: 0

Views: 40

Answers (1)

Prasad
Prasad

Reputation: 211

New answer here,

The problem is Your Register button is align right because you have given the right margin in percentage.

When you set your style like,

.registerbutton {
     margin-left: 52%;
}

There is not that much space left on mobile view with small screen, So it wrapping in new line. If you set the media query for smallest screen too. And override the left margin to 32%. It will resolve your issue.

Upvotes: 1

Related Questions