Ionic Responsive Design and Navigation for All Screens

You already know that you can create web and mobile apps from one codebase with Ionic, but having a responsive design that looks good on all platforms is sometimes challenging.
🔥 Learn Ionic faster with the Ionic Academy: ionicacademy.com/
💎 Get the Built with Ionic Book: builtwithionic.com/
🎉 Get my Practical Ionic Book: devdactic.com/practical-ionic/
#############################
👨‍💻 Want to read instead of watch?
Here's the full Ionic tutorial: devdactic.com/ionic-responsiv...
😱 NEW: Capacitor Crash Course!
ionicacademy.com/capacitor-cr...
⚡️Take my famous 7 Day Ionic Crash Course
ionicacademy.com/ionic-crash-...
🤷‍♂️Want more Ionic tutorials?
There you go: devdactic.com/
#############################
❤️You can also find me...
on / simongrimm_
on / schlimmson
on / devdactic
Or join our Facebook group:
/ simonics
#############################
00:00 Intro
00:58 App Setup
02:35 Menu Structure
10:11 Custom Header Component
17:30 Dropdown Area
25:33 Screen Size Listener & Menu Controller
29:26 Responsive Pages with ion-grid
35:26 Outro

[@TheSaceone]

Clean and simple. Cool tricks in this video aswell. This is an awesome example of how much a decent dropdown component is needed in Ionic.

[@galaxies_dev]

100% agree!

[@ArielKosacoff]

Amazing tutorial Simon, the best one yet !!

[@galaxies_dev]

Glad you think so :)

[@prashantkumar690]

Thanku so much for this @simon. Can you please make video on background location using capacitor

[@pintusingharoy9584]

Amazing tutorial Simon, 👍

[@galaxies_dev]

Glad you liked it!

[@robsonlirayou]

Muito bom!!!!

[@spacedust8061]

thank you a lot!

[@galaxies_dev]

Welcome!

[@dnlalb]

Im having this error on menu structure, my code looks identical:
Menu: must have a "content" element to listen for drag events on.

[@dev-fz9co]

thank you.

[@galaxies_dev]

You're welcome

[@rajnikantkumar9312]

Hlo sir...plz help me ...how to change notification icon and sound in ionic 4,5 .......I see so many issue ....live version ..,...plzz explain in one vedio

[@gokuldev3014]

👌🏻🔥❤️

[@wildman5377]

Very useful video that exactly I wanted .thank you very much most of the my ionics queries are cleared here

[@galaxies_dev]

Happy to help!

[@XxSeb2401xX]

Simon I have a question!
How can I create a footer that goes at the end of each page (following the content) with the logic of this menu, ion-router-outlet?
I have tried several methods and all of them give me a fixed or overlapping result with the content
Thank you for your tutorials!

[@galaxies_dev]

I think I never found a really good way besides having the footer actually inside ion-content, because then it will be definitely at the end of the scroll and not above it!

[@xyz-ey7ul]

Can you do a react version of this? Tried to watch it but it takes time to understand angular code.

[@galaxies_dev]

Yeah will get more to React soon!

[@webmobiletech6248]

Sir, how to make hide navigationbar android

[@jaswindersingh2143]

🙏🙏🙏 most important part which gives the first impression to client

[@carolinabascunan9872]

Hi! thanks for the video.... I need help :( i don't know why... but when I show the side menu, a can´t change the pages.... i can´t press the button :( i can´t for home to the products... only happens with the side menu :(

[@galaxies_dev]

Is there any error in the log? Maybe the routes are not defined correctly?

[@johnmarkchristianchua6618]

Hi guys, I'm trying to learn ionic. Can someone explain why this code is not working? I followed all the steps until here.




{{ item.title }}

[@galaxies_dev]

What exactly isn't working with that code?

[@ChenthamizhKUMARANJeyakanthan]

1st