How do I move this form button? - Atlas Theme

Store Design
, ,
1

Hello!

I added a new app to my website to show swatches on the collection page. Somehow it moved the subscribe button on our email list sign up. How do we get the subscribe button to move to the right of the white “You Email” form? Thanks!

SaikoStationery_0-1674086593407.png
SaikoStationery_0-1674086593407.png1415×547 30.4 KB

2

It’s coming from the base.css style file using margin-top rule pushing buttons down, the problem is also in the search bars search button; which is part of the .setting-buttons-outline styles set on the element .

.setting-buttons-outline .button:not(.button-solid), .setting-buttons-outline .shopify-challenge__button:not(.button-solid) {
    background-color: transparent;
    color: rgb(var(--color-button));
    margin-top: 20px!important;
}

Unfortunately that rule is using the “!important” declaration override so this will cause headaches in what’s known as specificity in CSS where you end up and to keep being over aggressive in fixing !important overrides.

Always backup a theme before changing files.

Either remove the offending margin-top rule from wheverever it is in the base.css file.

Or add the following css to the bottom of base.css

.setting-buttons-outline #contact_form .button:not(.button-solid)
, .setting-buttons-outline form[action='/search'] .button:not(.button-solid) {
    margin-top: 0!important;
}

Test thouroughly, if this occurs in a new theme install report the bug to the theme developers you bought the theme from.

1 Like
3

Thank you very much, it appears to work. I will check to make sure it didn’t affect anything else.