September 29, 2015 at 8:39 am #166935
I'm new to using Studiopress and responsive web design as a whole. Because I skipped introducing myself in the general discussion forum, I'll say a quick hello here before my question. My name is Josh and I operate a service based company in South Florida. I've been web designing for years, but am far from a professional. Much of what I've learned is from trial and error after finding information close to what I was looking for. I'm a DIYer that has no problem admitting defeat and asking questions to learn.
What I'd like to do here is a couple of things:
First, I'd like to limit the number of menu items that display on mobile devices. On computers, the more the merrier as the screen is larger. On mobile devices, it just looks bulky to me. I read a post earlier in the forum, but was still confused as to where the changes were made in the CSS.
Second, I would like to display more user friendly content to mobile users visiting our website. Because we are a service based company and response time is key, I'd like to display quick information to our clients with an action button to allow them to contact us easily.
I am absolutely open to reading up on all of this and am not looking for handouts when it comes to information. If anyone would like to take the time to explain some or all of this to me, I would certainly appreciate it. With that said, I'm also open to links to other areas of this forum where these topics have been discussed. I will still be using the all time useful "search" button at the top to see what information I can dig up. I'll update if I find anything.
Child Theme in Use: Minimum Pro Theme
Current Plugins Activated: WordPress Importer
Thanks in advance for any feedback!
Joshhttp://www.discreterestoration.com/version2/September 29, 2015 at 9:03 am #166937Davinder Singh KainthMember
For first, you can explore following options:
1. Setup mobile menu - http://wpvkp.com/add-mobile-navigation-to-genesis-theme/
2. Create and show different menu to mobile users.
For second, you can selectively hide content that you do not wish to display to mobile users via css.
September 29, 2015 at 9:13 am #166938
Thank you so much for the input, Davinder!
I'm going to read through the link provided, as this certainly looks helpful.
Regarding the selective hiding of content, I just have a question on this. The fact that I can hide the lengthy content for mobile using CSS is great, but I'd equally like to then hide the mobile content from visitors on computers. Mind you, if there is an more efficient means for achieving what I'd like to do (i.e. simply having different mobile pages that the mobile menu will direct users to), I'm all for it. I'm not looking for the easiest method, but whichever the best route is. I would never want to hinder my website's ability to rank well in mobile search engines, etc.
Thanks again for your input and for anything that you add.September 29, 2015 at 9:17 am #166939Davinder Singh KainthMember
1. Most simple way would be using display: none; is your style.css file. Using this you can hide specific block and using display: block; you can make specific content visible on desired screen resolution.
2. More geeky option would be adding function for mobile detect and then only executing required content section on mobile or non-mobile devices. Refer https://wordpress.org/support/topic/shortcode-to-switch-content-if-mobile-or-desktop
September 29, 2015 at 9:31 am #166940
You've been a wealth of information and I thank you. I will begin looking into everything you mentioned above and then post updates for anyone else having similar troubles. Thank you again!
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.