Problem with mobile bottons

[Victor50000]

HI!
I have a problem with buttons on my site for a client with X theme.
When added in cornerstone, it looks perfect, but on the mobile the buttons looks totally different and weird.
Site URL is: http://globenvvs.victorkarlsson.com/

Please see attached files.

Thanks!

[basanta]

Hi @Victor50000,

Thanks for writing in!

I can see your heading is not responsive, so in a mobile device it pushes the buttons to below and hiding it.

If the heading would responsive and in a mobile device it would be smaller, then the button will get space.

To make the heading responsive please add the following code to the base font setting of your headline element.

calc(1.2vw + 20px)

You can adjust further to make it appear better for your layout.

Then the button, I can see there is left margin in the second button. Please remove left margin and add right margin to the first button and top margin to both the buttons so that it would look better in mobile.

Hope this helps!

[Victor50000]

Thank you, that solved it!
Another question, how do I make the background image align to the bottom center? It won’t work for me with the custom CSS i tried.

Thank you in advance!

Best,
/Victor

[thai]

Hi Victor,

Please try adding this custom CSS under Theme Options > CSS:

@media (max-width: 767px){
    .home div#x-section-1 {
        background-position: bottom center !important;
    }
}

Hope it helps

[Victor50000]

Thank you, that helped! One last question, I am trying to make the text in the headline, “Globen VVS”, go into bold or extra bold. I’ve tried adding this to elements css, but i does not seem to work:
$el {
font-weight: 700 !important;
}

Do you have any tips?

Thanks,
/Victor

[friech]

Hi Victor,

Please navigate to your Font Manager and enable the bold and/or ultra bold for the font that you used on headlines.

Then inspect your “Globen VVS” headline and change font-weight to bold or ultra bold

Hope it helps,
Cheers!

[Victor50000]

Hi! Thank you, however that part of the inspector is not visible for me. There is no “Text format”. Do you know what the problem might be?

Thank you! Happy new years!

[thai]

Hi There,

Please try with this element CSS instead:

$el .x-text-content-text-primary {
     font-weight: 700 !important; 
}

Hope it helps

[Victor50000]

Thanks, did the trick

[ruenel]

You are most welcome!