|
azlro
|
July 10, 2022 at 1:27 pm
Our site has been struggling with Theme conflicts and mobile devices. We had one issue with event espresso a while back that with your help we were able to fix with CSS. I recently asked them to help with continuing mobile access issues with clicking into fields and buttons. This is their response:
=====
imaginem wrote:
Hi,
Your event expresso plugin is applying a global style to a class named .float-left
.float-left {
float: left;
}
This shouldn’t be done. Plugins should use prefixes so that the styles don’t affect in a global level.
Could you contact the events plugin developer and request to use a prefix to it.
WordPress plugins require using prefixes as they load at a higher priority than the theme and are designed to over-ride theme.
=====
can we fix this?
|
|
azlro
|
July 11, 2022 at 8:08 am
if you navigate to AZLRO.org and go to about us and contact us, on a mobile device you cannot click on any fields or buttons. Not limited to just here, it’s any page on our site.
https://www.azlro.org/5/contact-us/
|
|
Tony
|
July 12, 2022 at 5:34 am
Hi there,
I’ll create a ticket for our developers to discuss this.
In the meantime you can add something like:
@media only screen and (max-width: 767px) {
.float-left {
float: none!important;
}
}
To Appearance -> Customize -> Additional CSS to override the EE style.
|
|
azlro
|
July 12, 2022 at 9:52 am
Wow! that worked Tony! thanks for the assist!
hopefully this can be something that is fixed in future releases.. meanwhile, we’re happy customers!
|
|
Tony
|
July 13, 2022 at 8:24 am
Wow! that worked Tony! thanks for the assist!
Yep 😀 I tested it on your site before posting by changing the page source.
To explain a little, CSS is all about specificity and the more specific your rule is, the more it ‘wins’ (aka overrides) other rules.
Adding !important to a rule gives it the highest specificity possible, meaning it overrides everything. Adding rules that override everything is something you want to do sparingly as then you can’t override it for something else etc.
However, in this case, it’s within a media query specifically for mobile, this bit:
@media only screen and (max-width: 767px) {...}
Says anything in this section only applies to screens with a max-width of 767px and in this specific case, it’s already overriding a CSS rule that is fairly self-explanatory
.float-left {
...
}
Logically, anything with .float-left (without knowing the actual CSS in use) is going to be floated left with that class. Using a style to override that helper style everywhere based on mobile, seems a little odd to me but everyone does things slightly differently.
hopefully this can be something that is fixed in future releases.. meanwhile, we’re happy customers!
Switching EE to use a prefix is likely going to ‘fix’ the issue here due to how that CSS class is used but even then, as you’ve seen above, there are multiple ways to fix this.
I’ll leave that discussion to the developers 🙂
|
