[SOLVED] Responsive Layout Problems

I hope you can help me with 2 questions concerning responsive design:

1) The position "slider" shall not be shown on mobile devices. For other modules I can select in the template options if the modules will be shown on mobile devices or not. How can I get rid of the "slider"-position on mobile devices?

2) In my design I do not use the "menu"-position. All my menus are located in "sidebar-a" for the desktop design or "offcanvas" for the mobile design. My problem is, that the menu-access symbol (see attached picture) does not show on mobile devices when I do not use the "menu"-position.
How can I show the menu-access-symbol in my case?

Cheers Andreas

Hello Andreas,
1.) If you dont want to show the slider in mobile device at media screen sizes smaller then 768px add this code to the file:
> css / custom.css

@media screen and (max-width: 768px) {
.jp-slider { dispay:none }
}

2.) And the off-canvas menu is only shown if the menu module is published, therefore you have to edit the file:
> layouts / theme.php and delete the "php if" syntax as shown at the image below.

Thanks Peter for the quick reply.
2) works
1) works unfortunately not. I added your code by copy and paste to the custom.css (see attachment #1) but the slider is still present on small screens. Do you have any idea why?

For 1) I even have one more wish if possible:
First I thought of not showing the slider on mobiles and have different pictures in the top-a-position of which I can choose one for mobile devices and one for the desktop version. Now I am not very happy with this idea. It would be a compromise, because the top-a position does not fill the whole width of the screen and looks rather to be part of the content then to be a header.
Better than getting rid of the slider in small screens would be to have a picture in the slider position on mobile phones which scales in height and width with the screen size (while the fixed slider height on bigger screens is a good idea).
To give you an Impression of what I wanted to build I attached a mock-up as attachment #2

cheers
Andreas

Hallo Andreas,
1.) My fail, take this code below: I have forgotten a "l" at display

@media screen and (max-width: 768px) {
.jp-slider { display:none }
}

2.) Your second question; I give up, coz I dont know what do you mean.
Please take in your mind that big customizing is not a regular theme support. We are selling great designs and we are always try to help you. But if you want some special things you have to hire a web developer!

Hello Peter,

1. works! Thanks a lot.
2. It was just a thought, if minor adaptions would have done.

With your help for 1. I was able to make some more adaptions on the css level for the mobile version. It looks pretty good. --> problem solved. Thank you for your good support!

cheers
Andreas

Problem solved.