After struggling till deep at night I would like to share my problem with you.
I decided to develop a webapplication with as base platform mobile and to then make it responsive for use on tablets and desktops as well. As such I decided not to design both a mobile version and a desktop version (not sure whether this is actually the right approach but I figured I could make it work probably.
Now when I increase the screenwidth to 1200 px (400% in my case using a base of 300px) a large white space appears since I don´t want to have the dropdown menu´s too wide. My idea was to use the hide function in combination with a conditional to only show the extra content on the right in case the screenwide increases up to a certain point (around 1000px).
However I´m not able to make it work. If I first increase the screen to 1200px to place the group in which I want to place images for example, the content I created gets distorted since it was built on the 300px basis.
Is it easiest just to start designing mobile first and then make it responsive for usage on desktops? Or should I design two different pages? Or should I maybe start with a desktop page and make it responsivess for screens with less width?
How can I make it work in case I choose to use the current method (mobile first, without seperate pages for the desktop version.
I hope you guys can help me out so I can continue in the right manner. Thanks a lot in advance!