Responsive Design is crucial nowadays with users accessing your website from different devices, we have our mobiles practically glued to our hands, and every action we perform online, the majority of times will be via mobiles. Offering your users the best experience means adjusting your website for every device. Although Neuron Themes comes responsive ready, sometimes the elements you add might cause to overlap and look crowded on mobiles or tablets, that is why you will need to customize them to make it look good everywhere.
To view how your website is going to look on different devices you can click on the [Viewport icon] to check Responsive Mode. You will have a display of each device depending on which one you choose.
Note: When on Preview Mode, changes you make on one device will affect on every other device, if you choose to delete a widget from Mobile View, that element will be deleted on all other devices, an alternative method to remove elements on certain devices can be to hide them. You can go to the element's Advanced tab> Responsive tab, you can choose its visibility to Hide on either Desktop, Tablet, or Mobile.
Adapt settings for every device
Many of the settings will have the [Viewport icon] right next to it, what that means is that you can adjust the specific setting to be customized on different devices. To change the size of any of the element on Mobile View you can
- Click on the [viewport icon] next to the setting
- Choose the Mobile device e.g. and start making arrangements needed.
Note: Any change you make using the [viewport icon] that is available to that setting can only be implemented in the device you make the change in, it will not affect other devices.
Hide widgets on a certain device
In desktop devices, you have the freedom to add many elements and not look too crowded, but in other devices due to the screen size adding multiple elements can be messy, you can choose to hide certain elements or even an entire section on each device without it affecting others. To do that you need to:
- To hide a section go to Section Settings > Advanced Tab > Responsive
- To hide a element go to Element's Settings > Advanced Tab > Responsive
- Locate Visibility and choose to Hide on Desktop, Tablet, or Mobile.
- To reverse columns on either Tablet on Mobile you can switch on the section handle under the Responsive tab. This will make sure your columns don't look overcrowded if they are displayed in a horizontal position when viewing on Mobile e.g. they will revert to a vertical position for a better display.
Note: When you choose the Hide option on any device when you preview it will be grayed, which means it will not show on Live View, your visitors will not see it. Any changes you want to make, you can do it that in the responsive mode that it is not hidden
Change the breakpoint values to Tablets & Mobile
To set the breakpoint between Desktop & Tablet and Mobile devices you will need to place the values if you navigate to
- WordPress Dashboard > Elementor > Settings
- Scroll down and there you will see the Tablet Breakpoint and Mobile Breakpoint options and set their respected values
- Click on the Save Changes button
- If the changes you made are not applied then you can go to Elementor > General Tab > Regenerate CSS and click on Regenerate CSS. That should do the trick.