Hello.
I currently have a slider as the sole widget in the footer of www.grandriversoap.com. This image is too small and the text illegible when viewing the site on a mobile device. Is there a way to use this slider on the main version of the site and have a separate widget appear when the mobile version is served?
Thank you!
Rachel
*UPDATE*
As I’ve been working on the site, I’ve realized that I would also like to not show the header widgets that are visible on the desktop site on the mobile site. So, is there a way to override all of the widgets for the desktop site to provide a better mobile experience?
Thanks,
Rachel
Hi Rachel
Please add this to Appearance->Custom CSS
@media screen and (max-width: 640px) { #footer-widgets .widget_metaslider_widget { display: none !important; } #masthead .hgroup #header-sidebar { display: none; } }You can either add this and change the max-width value to match your mobile collapse point as in the CSS from your other thread, or you can copy the contents of the media query and add it to the existing one from the other thread.
Let us know how you get on
Magus
I’ve added the recommended CSS. It made no change to the header and took out the footer widget entirely. That wasn’t quite what I’m looking for. I realize in reading my original posting that I may not have been totally clear.
Is it possible, either through custom CSS or a recommended plugin, to offer both header/footer widgets and a menu that are specific to the mobile display of the site? Ideally I’d like to be able to offer mobile users a menu that consolidates that 2 menus I’ve got on the site, and specific widgets that are designed for mobile display (i.e. tall and narrow rather than wide and short)
Thanks,
Rachel
Hi Rachel
We’ll deal with the menu issue first. To do this you will need to download and install this plugin.
https://wordpress.org/plugins/wp-responsive-menu/
Once installed please navigate to Appearance->Theme Settings->Navigation and disable Responsive Menu. Please take a note of your Mobile Menu Collapse Point.
Create a new menu incorporating all the elements you wish to see in your new menu.
Navigate to WPR Menu->General, enable the mobile Menu and assign the new menu to the plugin.
In the Elements to Hide box please enter
Go to the Menu Appearance Tab and set the ‘Display menu from width’ to your Mobile Menu Collapse value. While on this page please also set the Menu Width to 100.
Save the settings.
Now for the footer widgets.
Please remove the above CSS from your Custom CSS.
Remove the slider from your footer and add a Layout Builder Widget. Open the widget and click on open Builder.
In the builder add 1 row with 3 columns. Add a SiteOrigin Image Widget in the left, a Visual Editor Widget in the middle and a SiteOrigin Button in the right.
In the Image widget add your existing Logo Image.
Add your footer text to the Visual Editor.
Edit the button Widget and add Sign Up! as the button text and ‘/newsletter’ as the URL, without the quotes.
Expand the design and layout section under the icon section.
Set the button Colour and Text Colour to match your existing colours. Use the Extra Large Font Size and set the padding to low.
Click done all the way back to the Widgets Page and then click save on the widget.
You may need to play around with the widths of the columns to get the layout exactly as you want it. You can do this within the Layout Builder by dragging the column widths on the layout screen.
Let us know if you need any help with this.
Magus
This was the perfect solution. Thank you! Everything worked as I hoped and your instructions were easy to follow. I appreciate all of the support!
Hi Rachel
You’re most welcome.
If you need any more help please don’t hesitate to open a new support thread.
Magus