Mobile Buttons next to each other

Site URL: https://h2o-test.squarespace.com/

Website: https://h2o-test.squarespace.com/

Password: Contractor1

Hi,

I'm looking for a solution for the buttons in the "Drain Cleaning" section on the homepage.

There are 4 dark blue buttons and I would like them to be divided in to columns of 2 instead of having them all stacked.

On mobile the text of a couple of the buttons also doesn't vertically center anymore. How would I fix that.

Any help would be much appreciated!

Cheers,
Tom

Add to Design > Custom CSS

/* Mobile buttons in 2 columns */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1631677780836_4205~.row .span-2 {
    width: 50% !important;
    float: left !important;
}
}

Awesome, thanks so much Tuanphan!

I have another issue in the mobile menu. The chevron left when you go to the Services submenu is slightly transparent. I've tried using  opacity: 1 but it's not working so I must be targeting the wrong thing. Do you have any recommendations on how to fix this? 

Cheers,
Tom

There is also bit of white behind the menu when you slide across when I click on Services. How could I change the color for that? Again I'm not sure what element to target.

On 9/18/2021 at 3:44 AM, Bioscope said:

Awesome, thanks so much Tuanphan!

I have another issue in the mobile menu. The chevron left when you go to the Services submenu is slightly transparent. I've tried using  opacity: 1 but it's not working so I must be targeting the wrong thing. Do you have any recommendations on how to fix this? 

Cheers,
Tom

Use this CSS

.header-menu-controls {
    opacity: 1 !important;
}
nav.header-menu-nav-list {
    background-color: red !important;
}

Brilliant, that worked! Really appreciate it 🙂