[DataSplitParticipant]

I have the following CSS, but it won’t align the button in the center on mobile. It centers perfectly for Desktop. Is there something I am missing to make it work correctly for mobile?

#Video-Container {
position: relative;
}

#Video-Container .Featured-Videos .Video-Button {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}

[DataSplitParticipant]

This reply has been marked as private.

[FriechModerator]

This reply has been marked as private.

[DataSplitParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

Thanks for writing in! Upon checking, you are using some custom CSS that is either not cross browser compatible or causing conflicts on smaller screens. This isn’t a issue related to the theme and instead has to do with your customization of it. While that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

#1: You are using CSS translate property (see: http://prntscr.com/72o0yy). It isn’t supported by iOS/mobiles browser. You’ll need to use proper prefixes: http://caniuse.com/#search=translate

#2: Please provide us with the screenshot of the issue.

#3: It sounds like you might be having an issue with a third party plugin or script (see: http://prntscr.com/72o4bf). Regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

#4: I have tested your website on an iPhone 6, I’m not able to see any message. Would you mind providing us with some more details? Perhaps some screenshots of the issue.

Thanks!

[DataSplitParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thank you for the detailed information. Please try to checkout responsive text shortcode. You can follow the responsive text shortcode walkthrough in our knowledge. This will solve the issue of your text being cutoff or not so responsive on mobile devices.

Hope this helps. Kindly let us know.

[DataSplitParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

You can still use responsive text for recent post shortcode. Just place the responsive text after the recent post shortcode and use this .h-recent-posts as the selector.

For the video button, please replace your code to this one:

#Video-Container .Featured-Videos .Video-Button {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25%;
  margin-top: -25%;
}

Please let us know if this works out for you.

[DataSplitParticipant]

This reply has been marked as private.

[LelyModerator]

Hello There,

Can you clear cache and test again. I’ve tested it on mobile and it is centered on android.

If it still doesn’t work, please edit above CSS to this:

#Video-Container .Featured-Videos .Video-Button {
  margin: 0;
  position: absolute;
  top: calc(50% - 39px);
  left: calc(50% - 40px);
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

Hope this helps.
Thanks.

[DataSplitParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello Again,

After your last recent post shortcode, simply add a responsive text and use the .h-recent-posts as the selector. Adding one responsive text is enough to make all your recent posts shortcode titles to be responsive.
http://prntscr.com/7363gf

Please let us know how it goes.

[DataSplitParticipant]

This reply has been marked as private.

[RadModerator]

This reply has been marked as private.

[Author]

Posts