-
Posts
-
Hello. I thought my website was complete. I was thrilled! Then I looked at it on my mobile phone. I know you have many threads addressing these questions. I’ve just spent several hours trying to follow them to make these elements work. I ended up having to restore a previous version to undo some mistake I made along the way. I have turned on Custom CSS Class field for all ALB Elements. I think I understand how to make elements display only on mobile devices and to hide elements from mobile devices.
Slider – What slider works/fits best on a mobile device and what size photo should I use? Do I need to include it in a color section, some other type of section, or should it be on its own?
Parallax with Overlay and Call to Action – I tried changing the photo to fixed and then to scroll. Neither made the picture fit on my phone screen. What solution do you think would be best to have this info display properly on my phone.
I would be extremely grateful for your guidance.
Hey Dana2225,
Why am I seeing this on your website? http://imgur.com/a/zrVxi
Let’s deal with issues one by one, could you point them like that? Which issue do you want to start with?Best regards,
VictoriaHi, Victoria,
You were seeing that slider because I updated my Enfold theme yesterday and have been playing with various sliders trying to find one that worked well for my phone. I did find one that worked fine for the header slides. So here’s my remaining question:
Parallax with Overlay and Call to Action – I tried changing the photo to fixed and then to scroll. Neither made the picture fit on my phone screen. What solution do you think would be best to have this info display properly on my phone.
I appreciate your guidance!
Hi Dana2225,
Are these the ones, you’re talking about? The look ok. What changes do you want to make to them?
Best regards,
VictoriaYes! Those are two of the ones I’d like to change.
Full Slider: I was happy with the look of the full slider text, the 2nd photo you attached, but then I made some adjustments to the site that changed the font sizes. The font sizes of the full slider view on my phone have changed. Unfortunately, I’ve been working on so many site elements, I can’t remember what I would have done that would have caused these changes.
I’m happy with how everything looks on my PC, but I’d like to be able to adjust the Full Slider font sizes on mobile phone views. I’d like “A BRIDGE TO ACHIEVEMENT” to be a little bigger. I’d like the caption text to be bigger. I’d like the “LEARN MORE” button to be smaller. I’d also like the font size of “LEARN MORE” to be slightly smaller than the size of “A BRIDGE TO ACHIEVEMENT”.
Also, the font style for headers changes to a script style on mobile devices in landscape mode, but displays correctly on portrait mode. It still displays as a script style in both modes on tablets. I’d don’t want a script font on any of the devices or views. Here’s CSS I’m using on the Enfold Child Style.CSS page:
/*The following changes all header fonts from Chewy to Helvetica on Mobile Devices*/
@media only screen and (max-width: 767px) {
.avia-caption-title, .avia-caption-content, body div .avia-button, h1, h2, h3, h4, h5, h6 {
font-family: ‘HelveticaNeue’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
}
.avia-caption-content p {
font-size: 14px;
line-height: 14px;
}#top .av-main-nav > li > a,
#top .main_menu .menu li ul a {
font-family: ‘HelveticaNeue’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
}
}Parallax Photo at the bottom of my page on the phone & tablet views: I’d like to know what picture size to use, or a different element to use, so that we can see the full photo size on mobile and tablet devices, just like on the PC view.
Thanks, in advance, for your help!
Hi Dana2225,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width: 479px) { .responsive #top .slideshow_caption .avia-caption-content p { font-size: 20px !important; line-height: 20px; } .responsive #top .slideshow_caption h2 { font-size: 28px !important; } #top .avia-slideshow-button.avia-color-light { padding: 8px 10px; background-color: rgba(0,0,0,0.2); font-size: 16px !important; } }If you need further assistance please let us know.
Best regards,
VictoriaThanks, Victoria! I’m so close to being done and can’t wait to publish my site! Here are my remaining issues for the slides I created with LayerSlider WP:
* The sliders take too long to load – The load time varies between 6 seconds up to 15 seconds.
* The text disappears on tablets in landscape mode.
Thanks!Hi Dana2225,
When you’re done with all the changes you can install caching plugins. That will allow you to optimize your website. Also, I would suggest switching to php7, that will really speed thing up for you.
Which text? Layer Slider captions? Could you attach a few screenshots?Best regards,
VictoriaThanks, Victoria! Please help me fix the problem of my disappearing text on my sliders when viewed on tablets in landscape mode.
Hi Dana2225,
I can’t reproduce the error in the emulators, I’ll ask my colleagues to have a look.
Best regards,
VictoriaI suspect it has to do with the number of pixels above which I should hide the slide so it doesn’t appear on PC views. What is the correct pixel number to use for that?
Hi,
Here are the details regarding the sizes and how they should be used
Best regards,
Basilis
- You must be logged in to reply to this topic.