Mobile Menu and Image Slider - Support | Kriesi.at

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
November 14, 2016 at 12:40 pm #711898
Epic
Participant
Hi Andy,

Thanks for reply.

I have re-created tickets on the same topic. I believe the wait time and misunderstanding on the moderator(s) part on what I am trying to achieve after many links to see images of the desired menu on the mobile have been shared.

Before your message Ismael kindly went into the css and added the code. I left the comments on how I would like it changed…
Along with examples.

Note, I am not tech savvy CSS does not mean anything to me… However have managed to work my way around your theme. Do I remove what he has placed already with your new code. I don’t want to remove the wrong thing. Saying that as he clearly labelled his workings above I probably can work it out.

I would appreciate if you kindly log back in and place it where it should be also giving me clear steps on how to achieve myself.
And what your code is actually changing?

Thanks for help I will create a NEW ticket with the same info now.

11:32 UK time. I have removed all CSS as none of them have given me what I require. Overall there are too many things appearing on the mobile screen which is cluttered. Green header, captions that are squashed, 300 height is fine however in landscape it is not stretched. I don’t know the values to make it fit without distorting the image.

Can someone please assist in creating what I want from the links I have shared below. My reply on another post did not go through as Andy closed the ticket as I pressed send. Thank You.
- This topic was modified 8 years ago by Epic. Reason: reply on other ticket was closed!
November 16, 2016 at 3:05 pm #712916
Nikko
Inactive Moderator
Hi Epic,

Try adding this code at the bottom of Quick CSS:
```
@media only screen and (max-width:767px) {
  #header #header_main {
    z-index: 9999 !important;
  }

  .responsive #top .logo {
    display: none;
  }

  #top #advanced_menu_toggle {
    right: auto;
    left: 0;
    top: -33px;
    z-index: 9999;
  }

  .home #full_slider_1 ul.avia-slideshow-inner, 
  .home #full_slider_1 ul.avia-slideshow-inner .avia-slide-wrap {
    height: 300px !important;
  }

  .home #full_slider_1 ul.avia-slideshow-inner .avia-slide-wrap img {
    height: 300px;
    width: auto;
    max-width: none !important;
    position: relative;
    left: -35%;
  }
}
```
Let us know if it works :)

Cheers!
Nikko
November 16, 2016 at 3:36 pm #712942
Andy
Inactive Moderator
Hey Epic,

please have in mind that we’re working on hundreds of different posts each day. So it will be almost impossible to remember what you’ve written in any other thread.

Also please keep in mind that we cannot provide you big customizations of the theme and this support we’re providing here is about basic things and if you have problems with our theme, which should not happen. So normally you would hire a freelance developer for this customization you want to achieve. However, I am making an exception for you right now.

To put your mobile menu inside header meta area instead of header main area and to remove your header main area on mobile, use this code:
```
@media only screen and (max-width: 767px) {
#header_meta {
z-index: 0;
}
#advanced_menu_toggle {
top: -37px;
left: -5px;
}
#header_main {
height: 0px;
}}
```
To adjust you slider’s height on mobile use this code:
```
@media only screen and (max-width: 767px) { 
.avia-slideshow.image_no_stretch li img {
height: 200px !important;
}
ul.avia-slideshow-inner {
height: 250px !important;
}}
```
Adjust everything as needed.

Best regards,
Andy
November 16, 2016 at 5:21 pm #713059
Epic
Participant
Hi Andy

Please note I was asking for a very “basic” request which was how to make the slider show the captions fully and image.

From here I have had to re-create threads and re-explain with example images what I am trying to achieve.

The CSS provided in the other thread moved the logo which left the menu lines hovering on the image. This is why I sent the images of what I would like BASED on that. I don’t need to be told to go and find a developer thanks. As the site was done by myself and the “basic” request is what I have been asking for several times. I should have to increase PHP or do other things for basic support.

I am very aware everyone else needs help however, my support expired weeks ago and I reached out again so that I could get the delayed assistance. To move forward.

Thank you.

Now to the CSS provided I will give this a go and will come back here should it still not work.

Also which CSS and I using Andy’s or Nikko’s??

Andy I have used your CSS. That is what I want. Thank you however the slider image isn’t correct… Landscape doesn’t stretch and the logo isn’t in the middle and stays on the image which I would prefer it on the green however for the mobile I guess I will just remove it.
- This reply was modified 8 years ago by Epic.
November 16, 2016 at 5:39 pm #713087
Epic
Participant
Hey Nikko,

Thanks for your CSS…. Works how I want it however I just find in portrait my captions still are cut off.

I am not great with dimensions however found Andy’s code with height at 300 worked but the landscape has no stretch so am I correct in thinking we change the size of the caption ? :

@media only screen and (max-width: 768px) {
.responsive #top .slideshow_caption h2 {
font-size: 15px !important;
}

16:31 pm

I have i have removed the css as I noticed it shrunk the content on the desktop.

I will have to now leave this to you guys to login and sort out. I hope not to change themes as spent a lot of time on this on.

Appreciate help so far.
- This reply was modified 8 years ago by Epic.
November 17, 2016 at 7:23 am #713398
Nikko
Inactive Moderator
Hi!

Yes, you can change the font size of caption. The code I gave and also Andy’s code shouldn’t have any effect on desktop version since our code only works on mobile devices, you will notice our codes are wrapped in:
```
@media only screen and (max-width:767px) {

}
```
Can you post screenshots on what issues you find in our codes?

Cheers!
Nikko
November 17, 2016 at 1:52 pm #713566
Epic
Participant
Hello,

Please login and see for self.
- This reply was modified 8 years ago by Epic.
November 18, 2016 at 1:45 pm #713983

Andy
Inactive Moderator

Hi,

you need to play with different media queries. Refer to this page for more information about it: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Hope this helps.

Best regards,
Andy

November 25, 2016 at 3:13 pm #716876

Epic
Participant

Hi,

I am so baffled.

When I look at other websites similar to mine on a mobile they respond with ease.

I tried my old theme and it worked fine however I worked on Enfold for months now and I don’t want to change again.

I have provided the login and have seen no changes.

I am stuck here the CSS provided hasn’t given me what I need which is super simple. To have the text not cut off on the slider in portrait mode on a iPhone 5 c screen as an example of what I can see.

I don’t see how referring me to the link above helps me when its the theme that is causing this protracted issue.

Thanks

November 25, 2016 at 7:57 pm #717030

Andy
Inactive Moderator

Hi,

as the theme is fully responsive does not mean that it knows how you want the elements to behave on different devices and screen sizes. Instead it means that you need to use media queries to be able to tell the theme what exactly you want. Otherwise the theme can more or less only guess.

However, you could send us a precise mockup showing exactly what you want to achieve and send it to us (imgur.com, dropbox). Then we can provide you some code, if you can’t do it by yourself and if it’s not too much of custom work. Also feel free to hire a freelance developer for any customization:http://kriesi.at/contact/customization

Best regards,
Andy

November 28, 2016 at 2:09 am #717532

Epic
Participant

Hi Andy,

I have attached the same links from previous posts.

November 28, 2016 at 11:40 am #717677
Andy
Inactive Moderator
Hi,

use this code:
```
@media only screen and (max-width: 767px) {
#header_meta {
z-index: 0;
}
#header_meta {
height: 0;
}
#advanced_menu_toggle {
top: -33px;
left: 0;
}}
```
Best regards,
Andy
November 28, 2016 at 2:11 pm #717745

Epic
Participant

Didn’t work.

I’m going to have to remove this and find something else.

Has become so long winded.

The header is cut off… and what I am trying to achieve with the image and caption in slider STILL isn’t working…

I can’t send you a screen shot as not on my computer and will be off site today.

I don’t know how else to be clear?

November 29, 2016 at 2:48 pm #718243

Andy
Inactive Moderator

Hi,

I think it’s caused by a cache issue, cause the code should work fine. Switch off your caching, then deactivate your whole cache plugin, as well as all other plugins. Then clear browser cache and hard refresh a few times.

Best regards,
Andy

December 8, 2016 at 4:11 am #721765

Epic
Participant

Gave up on this. New thread coming.
Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Mobile Menu and Image Slider’ is closed to new replies.