Why does my footer sign up button look odd after adjustments?

Store Design
1

Hi,

I have made adjustments to the sign up footer - but now the button look funny. Like it has been cut off?

How can I correct this?

Se the footer sign up here: https://krummes.com/

2

Hello @HelleGoller

Greetings for the day.

Currently, the width of the footer button is set to auto however it can be fixed with CSS.

Add the below CSS code to the end of your theme CSS file :

.main-footer .subscribe .contact-form input[type="submit"] {
  width: 100% !important;
}

Output :

SaaSEnthu_0-1653386841879.png
SaaSEnthu_0-1653386841879.png556Ă—335 16.7 KB

Thanks

1 Like
3

Hi @HelleGoller

Thank you for posting.

I have taken a look at the button and allow me to provide a solution for it. First, here is the result that I have managed to accomplish.

Screenshot (38).png
Screenshot (38).png3800Ă—1785 450 KB

Here are my solutions. In your form code, please adjust the following line:

and change it to:

Then apply the following CSS:

#mailing-list-module {
    max-width: 100%;
}

.font--button, a.font--button, input[type=submit] {
    width: 20rem;
}

input, select {
    margin-right: 2%;
}

If you need further support, don’t hesitate to let me know.

Hope this can help.

Best regards,

4

Where do I find the Css file?

5

@HelleGoller

Could you share what theme you are using?

6

Blockshop version 6.1.3

7

Please check if you can see "theme–async.css" file. Last time I checked that was one of the CSS file in the “Blockshop” theme.

Some themes also have theme.css and base.css files as CSS.

Thanks

8

I cannot find it - should it be under the theme.liquid or?

9

Here are the steps to find CSS file in the theme

Go to Online Store > Themes, find the theme that you are working on, then click on Actions > Edit Code.

SaaSEnthu_1-1653407361691.png
SaaSEnthu_1-1653407361691.png1735Ă—632 67.6 KB

Search for “.css” and you will find plenty of CSS files. One of these will be the theme’s CSS file. Can you share what you can see there?

SaaSEnthu_2-1653407465713.png
SaaSEnthu_2-1653407465713.png921Ă—538 19.4 KB

Thanks

10

Here you go - which to select?

11

@HelleGoller You can go with theme.scss.liquid

1 Like
12

I cannot find the code in mention I have the change in theme.sccs.liquid

Can you help? Attached the theme.

And also where to add the other extra code piece?