Are you frustrated with how the Divi back-to-top button appears on your mobile site? Although it is useful on larger screens, the native scrolling on mobile devices makes it seem more distracting.
This tutorial provides you with the ability to hide the Divi back-to-top button on mobile devices of any size, including smartphones and other small mobile devices, so that you may provide your mobile visitors with a clean and user-friendly experience.
How to Hide the Divi Back to Top Button on Mobile
Before we start the tutorial on hiding the Divi back-to-top button on mobile devices, we will briefly explain Device Breakpoints.
Device breakpoints refer to the specific screen sizes at which the layout of a website or application changes to accommodate different devices. Here are some commonly used device breakpoints:
| Device | Width | Explanation |
|---|---|---|
| Mobile | Up to 430px (portrait) | Smartphones and small mobile devices typically fall into this category. The layout is optimized for narrow screens and vertical scrolling. |
| Tablet 7 to 10 inches | 768px to 834px (portrait) | Tablets and larger mobile devices fall into this range. The layout may adjust to a wider screen size, allowing for more content to be displayed horizontally. |
| Desktop | 1024px+ | Traditional desktop and laptop screens fall into this category. The layout may be wider, accommodating more content in a horizontal format. |
Enable the Divi Back to Top Button
First, please ensure that you’ve already enabled the back-to-top button feature on your Divi.
Here’s how to enable the back-to-top button in Divi:
- On your WordPress dashboard, navigate to Divi -> Theme Options.
- Scroll down the General tab until you find the section titled Back To Top Button.
- Click the toggle switch next to the Back To Top Buton to turn it on.
- Scroll down to the bottom of the page and click the Save Changes button to apply your modifications.
Adding the CSS Media Query
Adding the CSS Media Query allows you to create a responsive website, meaning it adapts its layout and styling to different screen sizes and devices. This ensures an optimal user experience for everyone, whether they’re browsing on a desktop computer, tablet, or smartphone.
By incorporating media queries into your CSS, you can define specific styles that are only applied when certain conditions, such as screen width or device orientation, are met.
In this case, we will use the CSS media query to hide an element (back-to-top button) only on mobile devices (smartphones and any small mobile devices).
Alright, it’s time to add the CSS media query snippet to your site.
You can add the CSS snippet to your Divi Theme Options page (Divi -> Theme Options-> Custom CSS) or your current page from the Page Settings. In this example, we will put the code in the Page Settings.
Go to the Page Settings (⚙️) -> Advanced tab. Afterward, copy the simple CSS snippet below and paste it into the Custom CSS input field.
@media only screen and (max-width: 600px) {
.et_pb_scroll_top{
display:none !important;
}
}
The code explanation:
This code hides the element (back-to-top button) with the class et_pb_scroll_top on any screen with a maximum width of 600 pixels or less. This is likely done to avoid displaying back-to-top button elements on smaller screens, where they might take up valuable space or clutter the layout.
That’s it. Now you’ve successfully hidden the Divi back-to-top button on smartphones and any small mobile devices.
To see the result, save your page and preview it on a smaller screen.
The Bottom Line
The Divi Back to Top Button is a feature that allows you to scroll back to the top of the page with a single click. It can be useful for long pages, but it can also be annoying or unnecessary on mobile devices.
In this article, you have learned how to hide the Divi Back to Top Button on mobile devices using some custom CSS code.
