Two Buttons in Header - Spacing at mobile view and letter size

Hi,
I added a second button to the header slider using your code from the code snippet library. Works fine.
But, the two buttons are too close to each other if you use the website especially on a mobile. The buttons are directly next to each other, no space in between. That looks not good. Could you please help me with some code to change that? I would like to have between the buttons on normal view a little bit more space than now and at mobile view some space at all, as there is none at the moment.
Site: www.techchild.at

Second issue, is it possible to change the size of the text in the buttons? It is a little bit hard to read.

And third question - is there a way to get the two buttons equally sized no matter how much text is in them? At the moment one button is a little bit smaller than the other. You can see that on mobile view when they are directly under each other.

Thank you very much for your help.

Hello there,

Thank you for reaching out to us here.

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

@media only screen and (max-width:654px){
  
  .button-slider{
    margin-bottom: 10px;
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;
    width: 312px;
  }
  
}

Adjust the values accordingly.

Regards,
Kharis

Hi,

You can add space around the slider buttons with this Custom CSS:

.button-slider {
    margin: 5px !important;
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

Thank you for your prompt reply.
@Kharis: That worked fine. I changed it to font size 12 and width 290px. Looks good on mobile resolution.

@Csaba: Thank you. Works fine too.

One thing remains unsolved. How can I change the size of the button text only in bigger screen resolution sizes? For mobile view 12 pt is more than enough I guess.

I added the following code to the code of Csaba:

.button-slider {
    margin: 5px !important;
    font-size: 14px;
}

But then also the font size of the mobile view changes to 14px.

Hi,

If you want to change the font-size on larger screen-sizes, please try this Custom CSS:

@media only screen and (min-width: 1024px) {
.button-slider {
    font-size: 14px !important;
}
}

So the Custom CSS will affect only screen-sizes above 1024px.

Best Regards,
Csaba

Thank you. Works perfect. Issues resolved.

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba