Disable Slider Revolution for Tablet in Portrait

Yes, I’d like to disable my slider on screens 979px and smaller. I’ve already disabled for mobile, so those are good to go. How can I disable for tablets in portrait?

You can find this slider at the top of emilycolin.com.

Thanks.

Hello @wnhorne246,

Thanks for reaching out. To get your issue resolved, please edit your slider and go to the Module General Options > Hide Under Browser Width option:

Best Regards.

I said disable, not hide. Hiding it does not disable the slider and just shows a blank where the slider is supposed to be like below.

Please help!

Neil

Hi Neil,

You can also use the custom CSS code for the specific screen size to hide the Slider Revolution, please add the following code into the Theme Options > CSS.

@media  (max-width: 979px) 
{
    .x-slider-container.above
    {
        display: none;
    }
}

Hope it helps.
Thanks

Thanks. That worked, but now I’ve got another question and an another small issue.

I was trying to find a way to turn off parallax without creating another whole section at the next breakpoint. Seams wasteful as no real element shift or redesign for the next breakpoint is required.

This sorta works, but there has to be a better way.

@media (min-width: 979px) and (max-width: 1200px) {
	[class^=x-bg][data-x-params*=parallax] {
		transform: none !important;
		top: 0 !important;
		bottom: 0 !important;
		will-change: auto !important;
	}
}

This can be found at https://emilycolin.com/copy-home-2/

The second is an issue I’ve noticed with the nav bar. When on the pages Contact, Services, and About, the Font Awesome down arrows become bolded, even though the weight doesn’t change according to Chrome.

.x-navbar .desktop .x-nav li > a > span::after {
    content: "";
    margin-left: 0.35em;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome !important;
    font-style: normal !important;
    font-weight: normal !important;
    text-decoration: inherit;
}

The font style is normal, so why does it bold like that?

Thanks,

Neil

Hello Neil,

Thanks for the updates.

1.) Your code only works between the screen sizes with 980 pixels and 1200 pixels. Remove the (min-width: 979px) and in your code so that the whole @media will disable the parallax from device screens that is less than 1200 pixels.

2.) I have investigated it and it seems that a broken HTML or a CSS has been creating a conflict which resulted to this issue. To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

Thanks. I would appreciate the help. I’ll add the secure note, as requested.

Neil

Hi @wnhorne246,

Thank you for the credentials, I have investigated the issue, actually, the bold chevron on the editing and contact page is the correct one. The light chevron on other pages seems to be caused by a plugin, I can’t confirm this though since I did not do a plugin conflict test.

I added this on your global CSS to make the menu chevron light on all pages.

/*menu checvron fix*/
.x-navbar .desktop .x-nav li > a > span::after {
	font-family: "FontAwesomeLight" !important;
}

Hope it helps,
Cheers!

Thanks for taking a look and providing a workaround. I replaced FontAwesomeLight with FontAwesomeRegular, (couldn’t figure out what the bold would be–tried FontAwesomeSolid, but didn’t work). The regular probably looks more like the font being used in the menu, anyway.

I also commented out the chevron fix you implemented and did some plugin testing. I found that both Slider Revolution and Ninja Popups were causing some kind of conflict. When both were deactivated, the issue was no longer present. When you activate either one, the issue returned. No idea why. Thought it may be some JS effecting the pages, but I used Perfmatters to disable the JS from loading on the pages, but the issue remained. My guess is something in the CSS code is conflicting with X Pro’s CSS.

Will the conflict effect anything else, is the question now.

Neil

Hi Neil,

We’re not quite sure if the conflict affects other pages but based on the experience, it will only affect where the plugin is activated. I also suggest that you copy your live website into the staging area so that we can check the issue when the plugins are deactivated.

Hope that helps.

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.