-
Posts
-
My website has just gone live this afternoon (www.fairbanks.com.au) and the desktop version looks great.
The mobile site however has a number of issues, and need these sorted ASAP! I have adopted many of the suggestion on other forum topics, to try and solve these problems. I have made them slightly better – but I still have some concerns
1. The slider on the home page isn’t displaying perfectly on a mobile site – the text drops off the bottom of the slider. How do I stop the text from dropping off the slider?
2. I have tried a number of approaches to resizing the slider on the home page, so that the image is displayed correctly. Would I be better to have a different set of images that are only displayed on a mobile site? If so, how do I do this!???
2. The Captions on the home page over the four images in the product grid aren’t resized correctly on the mobile site. Can you please tell me how to correct this, as it is a reoccurring problem throughout my website.
3. I am currently working my way through all the product category pages to delete the background image in the colour section for the mobile site only (by adding a custom ID). Is is possible to have a different image appear on the mobile site (instead of no image). How would I do this?Thanks for your help, I really appreciate your help with these issues.
Hey Fairbanks_Seeds,
Congratulations you have a nice new site!
1. The text content is a lot on the slider to view in the mobile screen hence it’s pushed down the slider. Please add the below css code in Enfold > General Styling > Quick CSS to hide the text description and keep the title and call to action button visible.
/* Fullscreen slider in portable devices*/ @media only screen and (max-width: 480px) { #full_slider_1 .avia-caption-content { display:none; } }2. The height and width of the slider is automatically adjusted to be proportionate when the screen size changes. By changing the height the images will look a bit stretched. If you like to give it a try.
@media only screen and (max-width: 768px){ .avia-slideshow-inner { min-height: 500px; } .avia-slideshow li img { min-height: 500px; width: 150vw; min-width: 150vw; }}3. To resize the caption fonts
@media only screen and (max-width: 768px){ .av-image-caption-overlay-center{ font-size:24px!important; }}4. To change the background colorsection background image in portable device
@media only screen and (max-width: 767px) { .home #unique-id { background: url(background.jpg) !important; } }Request you to kindly open new tickets for different issues if they are not related. It will be easy to provide you solution and keep the focus on main topic :)
Please feel free to get back to us if you have more questions.
Best regards,
VinayThank-you Vinay for all your help (sorry for not posting individually).
All of these changes have been helpful, however point 3. only partially fixed this issue.
The text has been resized, but for some reason on the mobile devices the text seems to centred towards the right hand size of the image. So that when there is 2 words in the caption, you lose the last few letters of each word. Is it possible to realign this text?Also.. I’m not 100% happy with how the easy slider is presenting still on the home page, could you explain how I would have different images displayed on mobile device only? I was thinking of creating different images, that suit that screen better. but I wasn’t sure how to add them into my mobile site, without them appearing on my desktop version.
Thanks for your help.
sallyHi,
3.) I can’t see that there is anything wrong on mobile. It looks like this for me: http://i.imgur.com/uih6iyD.png
Could you fix it already? please provide us screenshots of the issue.Best regards,
Andy
- You must be logged in to reply to this topic.