My testers have come back with plenty of great comments most of which I've sorted out myself, but I have a few leftover issues that I need your help with, please?
1. The custom mobile menu has a dark grey/blue background. I want to change this to #9e4c6e if possible.
2. Pages such as http://www.techability.ie/techability/about-2/ have text panels at the bottom on coloured backgrounds. For some reason the linked text in these panels looks odd, as though the font is somehow outlined. I don't know why! I tried making them font weight 400 but it didn't improve it much. Maybe I just need to change the font or colour.
3. On the same page http://www.techability.ie/techability/about-2/ I need to *not* display the nectar slide title text just for mobiles, because it's over-writing my face in the picture.
4. Your suggestion for keeping the telephone number white on mobiles isn't working - I think it is probably something in my custom css that is causing the problem...
5. Is it possible to omit the shopping bag icon from the header of the mobile version? It's too easy for my elderly customers to hit this instead of menu.
6. On the home page http://www.techability.ie, I can't seem to stop the text panel at the bottom "Have a lesson in your own home, at a time to suit you." from crashing into the next column "Find out what you could learn and sign up for free tips" although I've tried changing padding etc.
7. Is it possible for iPads/tablets to show the standard layout not the mobile layout? Where is that controlled?
8. Is there a way to get the images included in the posts to appear at a smaller size in the mobile version? These are standard images included in the blog post text. Perhaps it would be better to create them in columns if not? Eg http://www.techability.ie/backing-up/backup-whatsapp/
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
/* change mobile menu color */
div#mobile-menu {
background-color: #9e4c6e;
}
/* change mobile search background remove the enclosed comment tags if needed */
#mobile-menu input[type=text] {
/* background-color: #9e4c6e; */
}
/* change font-family of links */
body a {
font5-family: Lato;
}
/* hide nectar titles on Mobile */
@media only screen and (max-width: 1000px) and (min-width: 1px) {
.parallax_slider_outer.first-section .swiper-slide .content {
visibility:hidden !important;
}
}
4: Remove this css:
5
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
/* hide cart icon in mobile */
body[data-is="minimal"] header#top #mobile-cart-link i{
display:none !important
}
6a: Please adding padding to the columns:
6b:
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
/*change color of testimonial*/
.testimonial_slider blockquote p {
color: #add !important;
}
7: You can turn off Responsive in Salient Theme Options Panel -> General Settings Section .
8:
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
/*change img size in mobile*/
@media only screen and (max-width: 1000px) and (min-width: 1px) {
article img {
max-width: 40% !important;
}
}
I was not clear enough about one thing - it's only one slide/page that I need to *not* display the nectar slide text on mobile, the other slides/pages are all fine. I added a class for that slide "about-slide". Is there a way to not display it on mobile, but only for that one slide, using the class perhaps?
I have put back the padding on the panel on the front page, both for the column (2% left-right) and for the text block (5 px left right) but it still doesn't seem to be working. I don't need two lots of padding obviously - I was putting both in so you could see that they were added. http://techability.ie
I've searched to find out where that #f7f7f7!important; is coming from, but I can't track it down (I found it in js composer>buttons>templates.php but I think that's not relevant) so I'll just display the phone number in the header instead. Probably better there for the users anyway, though not so nice design-wise!
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
/* hide nectar titles on Mobile for about-slide class Slide */
@media only screen and (max-width: 1000px) and (min-width: 1px) {
.parallax_slider_outer.first-section .swiper-slide.about-slide .content {
visibility:hidden !important;
}
}
/* for the column padding only on home */
.home .vc_col-sm-2.vc_col-sm-offset-0.vc_hidden-sm.vc_hidden-xs.wpb_column.column_container.vc_column_container.col.no-extra-padding {
padding-right: 2%;
}
Dear ThemeNectar
My testers have come back with plenty of great comments most of which I've sorted out myself, but I have a few leftover issues that I need your help with, please?
1. The custom mobile menu has a dark grey/blue background. I want to change this to #9e4c6e if possible.
2. Pages such as http://www.techability.ie/techability/about-2/ have text panels at the bottom on coloured backgrounds. For some reason the linked text in these panels looks odd, as though the font is somehow outlined. I don't know why! I tried making them font weight 400 but it didn't improve it much. Maybe I just need to change the font or colour.
3. On the same page http://www.techability.ie/techability/about-2/ I need to *not* display the nectar slide title text just for mobiles, because it's over-writing my face in the picture.
4. Your suggestion for keeping the telephone number white on mobiles isn't working - I think it is probably something in my custom css that is causing the problem...
5. Is it possible to omit the shopping bag icon from the header of the mobile version? It's too easy for my elderly customers to hit this instead of menu.
6. On the home page http://www.techability.ie, I can't seem to stop the text panel at the bottom "Have a lesson in your own home, at a time to suit you." from crashing into the next column "Find out what you could learn and sign up for free tips" although I've tried changing padding etc.
6. I need to change the colour of the testimonial quote font currently black, but I can't figure out how to do this. http://www.techability.ie/techability/clients-say/
7. Is it possible for iPads/tablets to show the standard layout not the mobile layout? Where is that controlled?
8. Is there a way to get the images included in the posts to appear at a smaller size in the mobile version? These are standard images included in the blog post text. Perhaps it would be better to create them in columns if not? Eg http://www.techability.ie/backing-up/backup-whatsapp/
Thank you very much!
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
/* change mobile menu color */ div#mobile-menu { background-color: #9e4c6e; } /* change mobile search background remove the enclosed comment tags if needed */ #mobile-menu input[type=text] { /* background-color: #9e4c6e; */ } /* change font-family of links */ body a { font5-family: Lato; } /* hide nectar titles on Mobile */ @media only screen and (max-width: 1000px) and (min-width: 1px) { .parallax_slider_outer.first-section .swiper-slide .content { visibility:hidden !important; } }4: Remove this css:
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
/* hide cart icon in mobile */ body[data-is="minimal"] header#top #mobile-cart-link i{ display:none !important }6a: Please adding padding to the columns:
6b:
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
/*change color of testimonial*/ .testimonial_slider blockquote p { color: #add !important; }7: You can turn off Responsive in Salient Theme Options Panel -> General Settings Section .
8:
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
/*change img size in mobile*/ @media only screen and (max-width: 1000px) and (min-width: 1px) { article img { max-width: 40% !important; } }Thanks
ThemeNectar Support Team
Thank you so much!
I was not clear enough about one thing - it's only one slide/page that I need to *not* display the nectar slide text on mobile, the other slides/pages are all fine. I added a class for that slide "about-slide". Is there a way to not display it on mobile, but only for that one slide, using the class perhaps?
I have put back the padding on the panel on the front page, both for the column (2% left-right) and for the text block (5 px left right) but it still doesn't seem to be working. I don't need two lots of padding obviously - I was putting both in so you could see that they were added. http://techability.ie
I've searched to find out where that #f7f7f7!important; is coming from, but I can't track it down (I found it in js composer>buttons>templates.php but I think that's not relevant) so I'll just display the phone number in the header instead. Probably better there for the users anyway, though not so nice design-wise!
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
/* hide nectar titles on Mobile for about-slide class Slide */ @media only screen and (max-width: 1000px) and (min-width: 1px) { .parallax_slider_outer.first-section .swiper-slide.about-slide .content { visibility:hidden !important; } } /* for the column padding only on home */ .home .vc_col-sm-2.vc_col-sm-offset-0.vc_hidden-sm.vc_hidden-xs.wpb_column.column_container.vc_column_container.col.no-extra-padding { padding-right: 2%; }Thanks
ThemeNectar Support Team