Align contact button up with contact form

floralplanner · Member · Mar 6, 2015 at 11:54 am
Copy link

Add topic to favorites
I wish to align the INVIA button to the right so that it’s inline with the rest of my contact button on this page: http://coco-blog.it/azienda-agraria-giorgio-filipponi/

thank you

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 6, 2015 at 3:21 pm
Copy link
Hi, since the location of the button shifts below 384px in screen/window width, we will use a Media Query to limit the position change to 384px and wider screens.
```
@media screen and (min-width: 384px) {
.contact-submit {
    margin-left: 45px;
    width: 80%;
}
}
```
floralplanner · Member · Mar 7, 2015 at 5:07 pm
Copy link
Hi, thank you for your answer but..it still looks the same:http://coco-blog.it/azienda-agraria-giorgio-filipponi/
designsimply · Member · Mar 7, 2015 at 10:57 pm
Copy link
I tested the change using Firefox’s browser tools, and it worked in my test. However, there is a problem right now where CSS is not being saved correctly, and I think that’s the problem in your case. I don’t see the example from above saved in your Appearance > Customize > CSS editor.

We are working on the problem, and I will let you know as soon as it is fixed. Sorry for the trouble!
designsimply · Member · Mar 7, 2015 at 11:51 pm
Copy link
Saving CSS should be fixed! Apologies again for the trouble. Could you try re-saving the example from earlier and let me know if you have any trouble at all with it?
floralplanner · Member · Mar 8, 2015 at 2:54 pm
Copy link
Hi! thank you for your help! it is aligned now, but… is it possible to put put the “INVIA” button a little bit closer to the “AUTORIZZO”line? because on my computer it looks too distant, and at first and second sight it looks not good… thank you!:-)
designsimply · Member · Mar 9, 2015 at 4:12 pm
Copy link
I think you could do that with a negative margin like this:

margin-top: -40px;

Add it just above this line in the previous example given:

margin-left: 45px;
floralplanner · Member · Mar 9, 2015 at 6:34 pm
Copy link
hi, i have done it
“margin-top: -10px”
but it looks the same…
however the important thing for me is that the align problem is resolved, thank you very much all of you for your help!
designsimply · Member · Mar 9, 2015 at 8:56 pm
Copy link
The button moved 10px, maybe that amount is too small for your taste? Try changing it from “-10px” to “-40px”
floralplanner · Member · Mar 10, 2015 at 9:31 am
Copy link
Perfect! yestarday i wrote first -40px but it went out of the article, (strange) so i put -10px, but now it works good, maybe i wrote something wrong… thank you very much!
designsimply · Member · Mar 10, 2015 at 11:11 am
Copy link
It sounds like you might have put “-40px” on margin-left instead of margin-top before.
floralplanner · Member · Mar 10, 2015 at 11:16 am
Copy link
yes it could be.. but now i’ve noticed that on the page:http://coco-blog.it/azienda-agraria-giorgio-filipponi/ is good if i write -10px
but if you look the contact form on this page: http://coco-blog.it/2014/05/12/bomboniere-in-provincia-di-ancona/
the INVIA button is over the message form…
thesacredpath · Member · Mar 10, 2015 at 8:09 pm
Copy link
Hi there, it looks like we may have to get more specific with the CSS selectors so that we can have a different solution for the two locations. In the following, I have added the postid and page-id for those specific pages and included the solutions for each. Replace the rule I had given earlier with the following and see what you think.
```
@media screen and (min-width: 384px) {
.postid-818 .contact-submit {
    margin-left: 45px;
    margin-top: 0;
    width: 80%;
}
.page-id-4925 .contact-submit {
    margin-left: 45px;
    margin-top: -40px;
    width: 80%;
}
}
```
floralplanner · Member · Mar 11, 2015 at 10:11 am
Copy link
Hi! yes it works good now, i’ve looked different pages and now the “invia button” in aligned and not far away :-) thank you so much for your help, all of you!
thesacredpath · Member · Mar 11, 2015 at 9:12 pm
Copy link
You are welcome.

No items found.