Theme not responsive on mobile

Sparkling
1

Sparkling is supposed to be a fully responsive theme. But, as you can see if you go to airborneorange.com on a mobile device (alternatively, shrink your window size to around the mobile size), my opt-in box is not. I’ve tried a few other themes, and the box appropriately resizes there.

Help!

2

Hi there

Hope you are having a good day and thank you for your question :slight_smile:
Please provide screenshot if possible, form looks normal for me and i cant see anything badly designed for small screen devices on this small page
Thanks!
Colorlib Support Team

3

As you can see in the screenshot, the box’s text is cut off, and actually runs into the side of the page.

4

Hello there,

I hope you are doing well today.

You can use the following CSS code to edit the button by going to Appearance > Customize > Additional CSS and pasting it there.


/*Button size*/
@media only screen and (max-width: 768px){
#mlb2-7737998 button.ml-subscribe-button {
    font-size: 12px !important;
}
}

Best Regards,
Support

5

The problem still persists, and it’s not just that page. As you can see in the attached screenshot of a blog post, it’s every page.

6

Hello there,

Remove that CSS. This CSS would affect the opt in box in the entire site:


@media only screen and (max-width: 1000px) {
#mlb2-7737998 button.ml-subscribe-button {
    font-size: 12px !important;
}
}

Best Regards,
Support

7

Nope, still doesn’t work.
In case I’m doing something wrong, I’ve included a screenshot of what I’ve done.

8

Hello there,

You are adding it correctly but the default CSS is still being used.

Please try replacing the last CSS with this:


#mlb2-7737998 button.ml-subscribe-button {
    font-size: 11px !important;
}

Best Regards,
Support

9

No luck, once again.

10

Hello there,

How did you go about adding the button? Can you provide an image of it on the backend?

Best Regards,
Support

11

I’ve used two widgets - the King Composer page builder and the MailerLite widget (the button is a form created in MailerLite). I know nothing is wrong with these widgets because the buttons work perfectly using other themes.
I’ve attached a picture as requested.

12

Hello there,

Thanks for letting me know.

For come reason the CSS used in the plugin is not working well with the theme. Please try installing the following plugin then add the CSS to it:


@media only screen and (max-width: 1000px) {
#mlb2-7737998 button.ml-subscribe-button {
    font-size: 12px !important;
}
}

Best Regards,
Support

13

Which plugin should I install?

14

Hello there,

Sorry, this is the link to the plugin:

Best Regards,
Support

15

Nope.

16

Hello there,

I see, the issue here is that the plugin has CSS that is not editable so when I try to add css to change the button it cannot override the current CSS being used.

Best Regards,
Support

17

Well, that was an incredibly unhelpful waste of my time.
I’m switching themes.

18

Hi there

Dear @jynx you will have an exact same problem in any theme (Without the CSS provided here)
this problem is not about the theme, the responsive theme does not mean it will make responsive anything you put inside, in this case, your third-party plugin makes this problem, it’s even not possible to fix their CSS rules, honestly we tried our best but i think you have to ask this question to plugin developers instead of throwing our work in the water :slight_smile: , switching theme because of third-party plugin is not working as it supposed tu be work i think does not makes any sens?

19

No, after switching themes, I no longer have that problem.
And next time, before you decide to craft some long, witty reply, proofread it before submitting. Let’s just say the grammar and language are less than okay.

20

Hi, there

Okay :slight_smile: have a great day and thank you for the suggestion :wink: