Adjusting positioning of Button One in Full Width header

Hi,

My site is www.tadworthacupuncture.co.uk

I would greatly welcome some advice on how to move the 'BOOK AN APPOINTMENT' Button One on the full width header from the left aligned position to a bottom centre position of the header. On the home page the text needs to remain where it is but on other pages without text in the header it can be centred and lowered down the image.

I assume that CSS is required but my knowledge is not sufficient to create that myself, although l can adjust settings once the CSS is in place.

Many thanks,

Nick

 

Hi,

Apologies! You need to go to:

www.tadworthacupuncture.co.uk/home-2

to bypass the coming soon page

 

Thank you . However, this doesn't seem to have made any difference at all. Have I got the right spaces in between bits of CSS?

Thanks,

nick

 

Hi,

I am afraid I am still having problems. I need to align the Book an Appointment button (Button One) bottom and centre of each of the full width header images, and for them to appear in the same place on tablet and mobile.

I am using this CSS at the moment, which is clearly wrong:

*Change height of full width header*/


.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button_one {
text-align:center!important;margin-top:350px!important
}
Thanks.

 

Thank you - that has worked perfectly. I am not sure why it didn't do so the first time. I couldn't find the errant symbols you showed me.

One last request please - how do I now align the centred buttons with the bottom of the header image so there is a bottom margin of say 90px. Many thanks.

 

Thank you so much.

Sorry to be a pain but resolving one issue seems to lead to others. The top margin setting of a specific number of pixels works well in desktop mode, but when viewed in tablet or phone it increases the depth of the header to an unacceptable depth. Is there a way of making the position relative to the bottom of the container rather than a set number of pixels?

Or perhaps alternatively, because i have a different header for desktop and another for tablet/phone, could one use a different CSS snippet in the Section CSS in the Advanced tab for the tablet/phone header?

Thanks again for all your help - it is a brilliant service!

size of the QUOTE="Divi.Help, post: 4060, member: 58"]Similar to what you post earlier:

.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button_one {
margin-top: 550px!important;
}

Just adjust the margin to your liking.[/QUOTE]

 

[/QUOTE]
Thank you. Does that go in the Divi Options CSS or the Section CSS?