Center the Submit button only on mobile screens

  • Resolved n0rbis

    (@n0rbis)


    5 years ago

    Hi,

    My problem is that I can’t align center the Submit button on my site.

    I put this extra CSS code:

    @media only screen and (max-width:767px){
	div.wpcf7 {
		text-align: center;
	}}

    but it center the whole thing, not only the Submit button.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    See Styling Contact Form

    Thread Starter n0rbis

    (@n0rbis)

    @takayukister I read the whole article, but still can’t do this. Could you give me a bit more help?

    @edit

    What I did?

    Basically, I added an id in Form editor:

    [submit id:button "Wy?lij"]

    than I added this into CSS, but nothing happen.

    #submit
{
	padding:12px 24px; 
    background:#232d87;
	font-size: 15px;
    color:#fff;
		font-weight:bold;
    border:0 none;
    -webkit-border-radius: 0px;
				padding-top: 15px;
  			padding-right: 30px;
  			padding-bottom: 15px;
  			padding-left: 30px;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	-webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
	transition-timing-function: ease;
}

    It changed to default button…

    My button works with this code:

    .wpcf7 input[type=submit] {
    padding:12px 24px; 
    background:#232d87;
	font-size: 15px;
    color:#fff;
		font-weight:bold;
    border:0 none;
    -webkit-border-radius: 0px;
				padding-top: 15px;
  			padding-right: 30px;
  			padding-bottom: 15px;
  			padding-left: 30px;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	-webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
	transition-timing-function: ease;
}

input.wpcf7-form-control.wpcf7-submit:hover {
background-color:#004d9b;

}

    but it’s only the shape, color etc. And I want button to be center on mobile screens.

    • This reply was modified 5 years ago by n0rbis.
    Thread Starter n0rbis

    (@n0rbis)

    I also tried this:

    @media only screen and (max-width:767px){
	input.wpcf7-form-control.wpcf7-submit {
	float: left;
      position: relative;
      left: 30%;
	}}

    But it’s not the exact thing I wanted.

    Neil Murray

    (@buzztone)

    Suggest:

    @media only screen and (max-width:767px) {
    input.wpcf7-form-control.wpcf7-submit {
        display: block;
        margin: auto;
    }
}

    Copying & pasting CSS code you find on the internet (Copypasta) without understanding what you are actually doing is usually not as successful as searching for very specific CSS advice based on a basic understanding of CSS e.g. CSS Layout – Horizontal & Vertical Align.

    Thread Starter n0rbis

    (@n0rbis)

    Thanks Neil, that worked perfectly.

    • This reply was modified 5 years ago by n0rbis.
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Center the Submit button only on mobile screens’ is closed to new replies.