Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

7.1 Mobile contact button - how to change colour


BrownKatUK

Question

7 answers to this question

Recommended Posts

  • 0

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;
}

 

Edited by tazmeah
added a note in the CSS
Link to comment
  • 0

@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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

@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!!

Link to comment
  • 0
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%;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

@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.

Screenshot 2021-01-07 at 11.28.13.png

Screenshot 2021-01-07 at 11.33.21.png

Link to comment
  • 0
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.

Screenshot 2021-01-07 at 11.28.13.png

Screenshot 2021-01-07 at 11.33.21.png

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...