Few problems with responsiveness

[zdalnebabki]

Hello,
I prepare a website based on your Fusion theme (http://www1.safekiddo.com) and everything is almost perfect. Almost, cause I found few things I would like to improve and I would be grateful for your help:

1) On mobile devices, the sign in white frame (“Funkcje”) is not in the centre. Can you tell me how can I make it centralized on every screen? (screenshot_1 attached)

2) On mobile devices, logo on menu panel should be centralized to menu button on the left, or at least the space between menu button and slider should be the same as the space between logo and slider. Is it possible? (screenshot_2 attached)

3) Is it possible to add another button in the header area, on the left of the current one (screenshot_3 attached), so that we don’t have to make it every time there will be a new version of the template (without changes in php file)?

Regards,
Agata

[Veena]

Pls insert the below custom CSS in themeoptions –

@media only screen and (max-width: 767px){
#agency-benefits .filler-img-label {
    right: 55%;
}}
#mobile-menu-toggle {
    top: 5px;
}

You can add another button shortcode or html code in the header area – text widget and you can style it accordingly .

[zdalnebabki]

This reply has been marked as private.

[Veena]

I didn’t see . Can you pls add it again, will try to provide custom CSS . If it doesn’t work then ll provide an alternate solution .

[zdalnebabki]

This reply has been marked as private.

[Veena]

Can you pls try this in the header area – text widget –

<div id="first-button" class="app-download-buttons">
<div class="button-wrap button_2" style="text-align:center;float:center;"><a class="button  default small" href="http://targeturl.com" target="_blank">Buy Now</a></div></div>

<div  id="second-button" class="button-wrap button_2" style="text-align:center;float:center;"><a class="button   default small" background-color:#02baf2; border-color:#02baf2;" "="" href="#" target="_self">Buy App</a></div>

And have this custom CSS in themeoptions –

#primary-menu {
    float: none;
    margin-left: 80px;
}
#first-button {
    right: 100px;
    width: 100%;
    position: absolute;
}

You can modify the custom CSS according to your requirement ..

[zdalnebabki]

It’s perfect! Thank you! 🙂

[Author]

Posts