Center logo & registration box

[mikest]

Hi,

How can I center the form and the logo and also show correct on mobile.

Thanks,

 

[Radu]

Hi,

Add this css to wp-admin -> theme options -> styling options -> quick css

COPY CODE

@media (max-width:780px) {
#logo a {
    float: left;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
}}

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mikest]

Doesn’t seem to do anything. Let me rephrase the question:

How can I center the homepage elements, like form and logo for all devices?

Regards

[Radu]

This reply has been set as private.

[mikest]

Hi,

All devices includes Desktop PC, mobile phone, ipad, android tablet, etc and all others I might not have mentioned.

Lets start with one device:
1. How do I center the search form on the homepage to the center?
2. How do I center the logo on the homepage to the center?
3. I thought that my site would not be visible to all users, why are you now making the site public? Could you please remove the screenshot?

Thanks,

[mikest]

I had to put the site to maintenance mode, because now visitors where coming to the site, probably because of the openly posting the URL above. I don’t want anyone to know what theme or versions are used, due to hacking and spamming. Please remove the above screenshot asap. I can send you the login credentials privately so you can see the the site

Thanks

[Radu]

This reply has been set as private.

[mikest]

Why is the domainname still in the reponse? The form on the homepage is aligned to the left by default, nothing changed there.

[mikest]

It seems like i am unable to explain to you that I want the default form of the site centered. Not sure how to explain otherwise.

[Radu]

Hi,

My replies are private and are seen only by admins and you.

Add this css to wp-admin -> theme options -> styling options -> quick css

COPY CODE

#header, #header .form-header .lead, #header label { text-align:center !important; }

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mikest]

Sorry, I did not know your reply’s where only visible by admins. I added the code, but doesn’t make any change. I opened up teh site, so you can see it.

Regards

[Radu]

Hi,

Add this css to wp-admin -> theme options -> styling options -> quick css

COPY CODE

@media (max-width:768px;) {
body.home .five.columns {
    width: 100%;
    padding: 0 10%;
}

body.home form#register_form_front {
    text-align: center !important;
}

body.home label.right.inline {float: left;font-weight: 800;}

body.home .five.mobile-four.columns {
    display: inherit;
    float: left;
    width: 300px !important;
}

body.home .row .five.mobile-one.columns {
    max-width: 314px;
}
body.home p.reg-form-details { text-align:center; }
body.home h4.white-text {
    text-align: center;
}
}

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mikest]

I have copied and pasted this into the quick css, but it doesn’t seem to do anything…

[Radu]

Retry with this

COPY CODE

@media (min-width:768px) {
body.home .five.columns {
    width: 100%;
    padding: 0 10%;
}
 
body.home form#register_form_front {
    text-align: center !important;
}
 
body.home label.right.inline {float: left;font-weight: 800;}
 
body.home .five.mobile-four.columns {
    display: inherit;
    float: left;
    width: 300px !important;
}
 
body.home .row .five.mobile-one.columns {
    max-width: 314px;
}
body.home p.reg-form-details { text-align:center; }
body.home h4.white-text {
    text-align: center;
}}

Let me know

Cheers

RAdu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mikest]

Hi,

This makes the whole form wider, how can I it be the same size, no other changes to the form, only make in center?

Regards,

[Radu]

Hi,

I cannot understand exactly how do you want to style, can you please provide a screenshot/sketch to can figure out exactly what you need ?

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mikest]

Please ask someone else to read this, as I think it is not that complicated. Last time:

Homepage blue form has to be centered. In my case the form is pink. I added you css code, but made the form wider. I just want the form centered. Lets just start with for the Desktop. So when viewing the homepage on a desktop computer the form should be centered with the same width and height!

If this is still unclear please consult collegue or put me through to someone else.

[Radu]

Hi,

Replace the code that i have prodived with this

COPY CODE

body.home form .row .three.mobile-one.columns {
    width: 42%;
}

body.home form .row .five.mobile-one.columns label {
    text-align: center !important;
}

body.home .five.columns {
    margin: 0 auto !important;
    float: none;
    padding: 0 !important;
}

body.home form .five.mobile-four.columns {
    float: left;
}

Let me know

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mikest]

Seems like everything is all messed up now :-s

[Radu]

You should remove all codes that i have provided you in this topic and replace it with this code

COPY CODE

@media (max-width:780px) {
#logo a {
    float: left;
    left: 50%;
    position: relative;
    transform: translateX(-50%);
}}


body.home form .row .three.mobile-one.columns {
    width: 42%;
}
 
body.home form .row .five.mobile-one.columns label {
    text-align: center !important;
}
 
body.home .five.columns {
    margin: 0 auto !important;
    float: none;
    padding: 0 !important;
}
 
body.home form .five.mobile-four.columns {
    float: left;
}

Let me know

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mikest]

This works!
Is it possible to also get the password label to the left and the 2 input fields to the right?

Thanks!

[Radu]

Hi,

Please add this css after the css that i have provided you earlier

COPY CODE

body.home form#register_form_front .five.columns { margin:0px !important;float: left;text-align: right !important;}

form#register_form_front .three.mobile-one.columns {
    width: 58%;
    text-align: right !important;
    float: right;
}

body.home form#register_form_front .mobile-one label {
    text-align: right !important;
}

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mikest]

Oke, getting close 🙂

Is there a way to get the password field to the left?

[Radu]

There are two password fields, which one ?
Please provide a sketch to understand how do you want to align inputs on form.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[mikest]

Sorry, I don’t know how to draw. I will try to explain:

I would like to have it to look like the two fields above. In detail:
– The password required field below the email address field
– The confirm field below the password required field
both fields aligned on the left side of the username and email fields.
– The password label below the email address label
aligned the same as the two labels above, to the right.

So basicly its just following the same alignments of the two fields above.

[Radu]

Hi,

The code that i have provided you earlier to that !

Add this css next to rest of CSS

COPY CODE

body.home form#register_form_front .five.columns { margin:0px !important;float: left;text-align: right !important;}
 
form#register_form_front .three.mobile-one.columns {
    width: 58%;
    text-align: right !important;
    float: right;
}
 
body.home form#register_form_front .mobile-one label {
    text-align: right !important;
}

See attachment how it looks.

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

Attachments:

You must be logged in to view attached files.

[mikest]

Perfect, thanks for your help and patience!

[Radu]

You’re welcome

Have a nice week

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts