Move Button on Mobile underneath columns and fix desktop button

Hi,

I was wondering how I can move the button on mobile under the columns, and why the button on desktop is not active. I cannot press on it.

Thank you,

2 Likes

Hello,
How are you,

can you please give me the website URL and password so check the issue

Thanks

Hello @chichi0114

Please share your store URL and password.
So that I will check and let you know the exact solution here.

1 Like

Hi @chichi0114 , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

@chichi0114
Sorry you are facing this issue,
It would be my pleasure to help you.
Please share your site URL,
I will check out the issue and provide you with a solution here.

Hi @chichi0114

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (max-width: 749px){
.multicolumn > .page-width > .center.small-hide.medium-hide {
    display: block !important;
}
body .multicolumn .title-wrapper-with-link.multicolumn__title > a.link.underlined-link {
    display: none !important;
}
}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

Hi DaisyVo,

Thank you so so much! It was a quick and easy fix. I was wondering how I can add an outline around the button (active), and fill the button when hovered?

Thank you,

Chichi0114

Hi @chichi0114

You can add this code below to the CSS field as well to make a border of the button and hover animation.

Here is the code:

@media screen and (max-width: 749px){
.multicolumn > .page-width > .center.small-hide.medium-hide a.button.button--primary {
    border: 1px solid white !important;
}
}

Thank you so much!

Best,

Daisy - Avada Support Team.