7.1 Mobile contact button - how to change colour

Site URL: https://earthworm-octahedron-jelm.squarespace.com

Hi - I am changing to change the contact button on mobile. On desktop it is yellow but for some reason on mobile it's black. Both are using the same style sheet so I am not sure why. Any advice on how to change would be welcome. Thank you!!

Website address above

Password is TBZigg3

Hello again, @BrownKatUK.  When I look at your site's HTML, the black Contact button is "theme-btn--primary" and the yellow one is "theme-btn--primary-inverse". If there's no easy way to change the color in your dashboard at Design -> Colors -> Section Themes, then the Custom Css (which is found at Design -> Custom CSS) would be this:

/* this code changes the mobile Contact button color to yellow and its text to black */
.theme-btn--primary {
  color: #203049 !important;
  background-color: #ffd650 !important;
  border-color: #ffd650 !important;
}

@tazmeah another big thank you! That worked.

@BrownKatUK I see your site has some small problems.

1. (Mobile) When scroll up, site title is cut off on top.

2. Some pages have very long content. You can consider adding a back to top button.

3. (Tablet) Some text columns are a bit narrow. If you need to increase width, we will give the code

4. (Tablet) Huge white space under slider on homepage

@tuanphan Thank you for looking at my site. I am definitely on a learning curve!

I think I might have fixed point 1.

I will try adding a back button. Thank you for your suggestion.

Yes please to some code that would help with point 3.

And re: point 4 any suggestions welcome. I assumed this was the tradeoff I had to make to make it look good on mobile.

Also.. Tazmeah helpfully gave me code to get a ® and also change the button on the mobile to yellow with grey text but unfortunately - the code seem to have made the film images and media logos disappear when the site was live so I deleted it. Any tips welcome. The registration mark is very important to my client. 

Thank you again!!

On 1/2/2021 at 8:07 PM, BrownKatUK said:

@tuanphan Thank you for looking at my site. I am definitely on a learning curve!

I think I might have fixed point 1.

I will try adding a back button. Thank you for your suggestion.

Yes please to some code that would help with point 3.

And re: point 4 any suggestions welcome. I assumed this was the tradeoff I had to make to make it look good on mobile.

Also.. Tazmeah helpfully gave me code to get a ® and also change the button on the mobile to yellow with grey text but unfortunately - the code seem to have made the film images and media logos disappear when the site was live so I deleted it. Any tips welcome. The registration mark is very important to my client. 

Thank you again!!

Hi. Use this CSS for yellow button

/* mobile menu button */
.header-menu-cta a.theme-btn--primary.btn {
    color: #203049 !important;
    background-color: #ffd650 !important;
    border-color: #ffd650 !important;
}

With text columns narrow, add this to Custom CSS

/* tablet 6 icons columns */
@media screen and (max-width:991px) and (min-width:768px) {
div#block-yui_3_17_2_1_1608738907670_35545 + .row>.span-1 {
    display: none;
}
div#block-yui_3_17_2_1_1608738907670_35545 + .row>.span-3 {
    width: 33.33%;
}
div#block-yui_3_17_2_1_1608062469107_52405+.row>.span-2 {
    width: 8.3333% !important;
}
div#block-yui_3_17_2_1_1608062469107_52405+.row>.span-3 {
    width: 28%;
}
}

@tuanphan Thank you once again for your help. Those both worked. Although now the icons when viewed on a tablet are very big (See screen shot) would you mind helping me reduce them.

You had also mentioned there is a lot of space underneath the sliders and between the sections on the tablet as well. Any advice in terms of how to rectify is also welcome. 

Thank you again.

21 hours ago, BrownKatUK said:

@tuanphan Thank you once again for your help. Those both worked. Although now the icons when viewed on a tablet are very big (See screen shot) would you mind helping me reduce them.

You had also mentioned there is a lot of space underneath the sliders and between the sections on the tablet as well. Any advice in terms of how to rectify is also welcome. 

Thank you again.

Q1. I see iPad here fine. Which table/browser do you use?

Q2. Add to Design > Custom CSS

/* space under sliders tablet */
@media screen and (max-width:991px) and (min-width:768px) {
[data-section-id="5fc68bc69b1ed03538c1eaf7"] .content-wrapper {
    padding-bottom: 0 !important;
}
}