-
AuthorPosts
-
January 3, 2015 at 2:45 pm #374468
Hi,
I’ve tested my site on an iPad and have noticed a number of issues:
1. The logo overlaps the main menu text
2. The main text layer has not scaled down – it’s too big/not visible
3. There’s no navigation system (thumbnails) at bottom of slides
However.. the other issue I’ve asked for help with which involves timing of slide transitions (I’ve noticed this when I view site on my computer) is not there! Very confusing..
Would appreciate your help with the above.
Regards,
Steve
January 4, 2015 at 6:01 pm #374720Hey stevewturnbull!
1. Instead of the normal menu, you can use the mobile menu:
@media only screen and (max-width: 1024px) { .html_mobile_menu_tablet .container #advanced_menu_toggle, .html_mobile_menu_tablet #advanced_menu_hide { display: block; } .main_menu { display: none; } #mobile-advanced { display: block; }}
2. You need to adjust the text position/size layer in layer slider options.
3. It’s there, but it only appears while clicking on the image of the slider. However with this code you can make it appear permanently:
.avia-layerslider .ls-bottom-nav-wrapper { display: bock !important; }
Regards,
AndyJanuary 4, 2015 at 10:09 pm #374806Hi Andy,
Many thanks for your help :) I will check out the menu code. And I’ve noted No. 3.
With issue No. 2 though I don’t want to alter the text/layer – it’s exactly how I want it. I just want it to scale down proportionately/responsively for the tablet screen?
Cheers,
Steve
January 5, 2015 at 3:25 am #374912Hey!
2.) Edit the layer then go to Attributes panel. Add a class or id. Use this selector plus css media queries on the Quick CSS field.
Best regards,
IsmaelJanuary 5, 2015 at 9:01 am #374970This reply has been marked as private.January 7, 2015 at 2:42 pm #376141Hi!
Please try adjusting “responsive under” and “layers container” values in LayerSlider WP > Slider Settings > Layout and check if that helps – http://i.imgur.com/E2YOJ5x.png
Best regards,
YigitJanuary 8, 2015 at 11:39 am #376709Hi Yigit,
Still no joy I’m afraid :(
I’ve fiddled with all the settings.. And the problem is the logo in header isn’t scaling responsively either.
In contrast, the slider behaves fine on tablet but not on full computer screen..!
Can you login using the admin I’ve sent and have a look please. Thanks.
http://www.cardabelleholidays.com
Kind regards,
Steve
January 10, 2015 at 4:13 am #377683Hi Steve!
Please post the login details here as a private reply.
Best regards,
JosueJanuary 10, 2015 at 3:30 pm #377776This reply has been marked as private.January 13, 2015 at 6:04 am #378650Hi Steve!
You forgot the password for the user.
Best regards,
JosueJanuary 13, 2015 at 10:58 am #378685This reply has been marked as private.January 14, 2015 at 6:16 pm #379623Hi Steve!
Please check the first slide on the iPad, whenever you want to have a caption aligned to the right use this values – http://screencast.com/t/pw0A3tidM
Best regards,
JosueJanuary 15, 2015 at 6:49 pm #380266Thanks Josue :)
But I still have the other problems..
Making the large white text – ‘Welcome to the undiscovered heart of the Languedoc..’ – and the logo scale down responsively.
Plus the slider isn’t working (last slides don’t fade properly on computer like they do on tablet).
Can you help with these please.
Thanks.
Steve
January 19, 2015 at 6:15 pm #381976Hi Steve!
1. Where is that text located?
2. Logo normally doesn’t scale down (you can check it here), however if you want to scale it down at a certain screen size use this code in Quick CSS:
@media only screen and (max-width: 1200px) { .responsive .logo img { max-width: 330px; height: 100%; } }
3. Couldn’t note on my end, on which browser are you experiencing this?
Regards,
JosueJanuary 20, 2015 at 9:17 am #382328Hi Josue,
1. I’ve put the text back in LayerSlider – it’s a PNG file (couldn’t use text as it isn’t Google font).
2. I’ve tried the code/fiddling with settings but no joy I’m afraid. The logo is either stretched or squashed.
3. I’ve been using Safari.
Thanks,
Steve
January 24, 2015 at 11:13 am #384828Hi!
Can you please provide a screenshot of the logo? I added a layers container value on the Slider Settings to keep the images responsive on smaller screens.
Regards,
IsmaelJanuary 30, 2015 at 2:09 pm #388265This reply has been marked as private.February 1, 2015 at 6:26 am #388939Hey!
I noticed you’re not using any special animation on the slider and since you set the slider height to 800px, to emulate fullscreen sliders, I guess the screen resolution of your monitor 1920x1080px. The height setting may just be too much for smaller display resolutions. My suggestion is to use the Fullscreen Slider which responsively calculates the browser height, instead of the Advance Layer Slider.
Cheers!
IsmaelFebruary 1, 2015 at 11:48 am #388996Hi Ismael,
But the problem with Fullscreen (and FullWidth) Slider is captions – I’m using an image file to import the text caption because the font I’m using is not a Google one..
Also you didn’t mention the logo?
Regards,
Steve
February 4, 2015 at 12:39 pm #390697Hi!
You can add html codes on the fullscreen slider’s caption fields. For example:
<img src="IMAGE URI HERE">
Regarding the logo, please remove or adjust this code located on the Quick CSS field:
@media only screen and (max-width: 1000px) { .responsive .logo img { max-width: 300px; height: 100%; }}
Best regards,
IsmaelFebruary 9, 2015 at 4:29 pm #393121Hi Ismael,
Thanks – I’ll try using HTML for text.
I’ve had no success with adjusting/deleting the code for the logo though. When I view it on my iPad using Safari it’s still not working – the logo hasn’t scaled responsively with menu and overlaps text..?
Regards,
Steve
February 11, 2015 at 9:49 am #394166Hi!
I was able to see the logo issue on smaller screen sizes but I’m not sure if that’s the one you’re referring to. If possible, please provide a screenshot. You can use imgur, dropbox etc.
Cheers!
IsmaelFebruary 11, 2015 at 2:45 pm #394351Hi Ismael,
The screenshot isn’t working on my iPad unfortunately.
As mentioned above, the logo is ‘Cardabelle Holidays’ (has a sunshine graphic in middle) at the top left of menu.
Regards,
Steve
February 15, 2015 at 6:01 pm #396436Hey Steve!
There are two options:
1. Make the mobile menu appear sooner (overlap seems to occurs around 1200px):@media only screen and (max-width: 1200px) { .html_mobile_menu_tablet .main_menu , .html_mobile_menu_tablet #header_main_alternate{display:none;} .html_mobile_menu_tablet .container #advanced_menu_toggle, .html_mobile_menu_tablet #advanced_menu_hide{display:block;} .html_mobile_menu_tablet #mobile-advanced{display:block;} }
2. Reduce the logo dimensions from 1200px until the 989px (where the mobile menu appears):
@media only screen and (min-width: 989px) and (max-width: 1200px) { .logo{ top: 25px; width: 30%; } }
Cheers!
Josue -
AuthorPosts
- You must be logged in to reply to this topic.