Alignment Problem

Hey @ganeshkumarapillai – Here is a snippet of CSS to help center it:

<style>
.give-display-modal {
    max-width: 350px;
    margin: 0 auto;
}
</style>

You can add this to your theme or inline on the post to test it. Here’s an article to help if you’re not sure how/where to add it: https://givewp.com/documentation/resources/handling-custom-css-in-wordpress/

Also I recommend removing the wrapping <center> tags. I hope this helps! Please let me know if you have anymore questions.

• This reply was modified 8 years ago by Devin Walker.

Hi,
Thanks for providing above. Now, the width is ok. But it’s not supporting to the responsive mode..
Please check the below screenshot for your reference.

Hey @ganeshkumarapillai – can you post the link to your site so I can see?

Hi Mr. Devin,
Please receive the below URL for your reference.

https://www.freefashiondesigner.com

Kindly advise further.
Thanks,
Ganesh

Thanks. I took a look on mobile and it looks good. I couldn’t reproduce what I see in your screenshot.

Hi,
I just reworked in the backend.
Now, could you please help to align it in center of the page. Kindly help.
Below screenshot for your reference as well.

https://www.freefashiondesigner.com/wp-content/uploads/2016/11/Screenshot-49.png

Thanks,
GANESH.

Hi there,

Centering can be a bit challenging. But try this out:

.give-display-modal {
	text-align: center;
}

form[id*=give-form] .give-donation-amount {
    margin: 0 auto;
    max-width: 50%;
}

form[id*=give-form] select.give-select-level {
	max-width: 46%;
    margin: 25px auto;
}

Let us know how that goes.

Hi,
Thanks for your reply.
And following your code, Now this is the result.!

Mobile View: (Currency symbol misplacing)

Full width PC View: (Full content in center as old one. But not in sequence)

Kindly advise further.
Thanks,
GANESH