I have just finished my site using this amazing theme. Thank you for all the support so far.
I need to launch my site but need to make a couple of urgent final fixes when the site responds to mobile and can't seem to find how to do them. I have a few so I have listed them in order of urgency. I know it's a lot of help to ask for, but I would appreciate as much help that you give on this.
I am using a child theme and I make all of my css changes in the
Wordpress editor so that they are all together, rather than in the
Salient box for each page.
On the home page Nectar slider, I need the headings and sub headings on the slider to reduce in size for @media screen and (max-width: 480px).
I have tried to modify the css but with no success. I've also tried using and modifying the code as described in http://themenectar.ticksy.com/faq/2037 but couldn't get it to work.
I have added this to the css but it's not having an effect and I can't find why.
@media screen and (max-width: 480px) { body .swiper-slide .content h2 { font-size: 18px; letter-spacing: 0px; } body .swiper-slide .content p { font-size: 12px; line-height: 22px; padding-bottom: 5px; } }
On the third slide for 'Branding', I need the background image to
move to the right. On mobile at 480px and below it currently sits too
much under the text and the text can't be read.
I need to make the same changes for the main image on the inner pages - but I do not want the changes to the image text to effect the other headings on the page.
I have used the Call to Action row at the bottom, before the footer. When viewed on a mobile, the telephone number in that panel becomes an active box. Is there a way to stop this.
The blue button on my home page slider scrolls smoothly down the page in the same way that the Salient down arrow works. However, on mobile, it's scrolling to just short of the correct position leaving the bottom of the slider visible. In my css I have
/*---blue button position after smooth scroll---*/ #position1 { position: absolute; top: -50px; }
I had tried adding different media rules and changing the top: -50px but it wasn't having an effect. Any ideas?
Lastly, again on the home page Nectar slider. After the 5th slide, rather than looping smoothly, it was zooming back to the first slide and then jumping to show slide one again before continuing. Like this: 1, 2, 3, 4, 5, (fast 4, 3, 2, 1), 1, 2… I have now turned off 'loop' which is better because it's not showing 1, 1, however, after 5, it's still zooming back fast to 1 rather than continuing smoothly. Is there a way to change this? If it needs changing in the PHP I will need to create a new PHP file for the child theme.
Ok, so I think I've found what's causing the issue on issue no. 1
above. I had a developer look at it and he initially said that my css
from my child theme is being called before the Salient css so mine is
being ovewritten.
I didn't think that was the case. So we
established that !important is causing the issue in the Salient css. He
has temporarily deleted them in the Salient css for the code that
applies to the nectar slider, but I need to find a better and more
permanent way to fix it because I will lose these changes when I update
Salient.
1. Any rules with !important can still be overridden if they're more specific i.e. if a rule is:
body .swiper-slide .content p {
font-size: 20px!important;
}
you could override it in your child theme with
html body .swiper-slide .content p {
font-size: 40px!important;
}
2. Give the slide a class such as "mobile-mod" without the quotes and then add this into the custom css box in your salient options panel:
@media only screen and (max-width:1000px) {
.mobile-mod {
background-position: 0 center!important;
}
}
4.
@media only screen and (max-width: 690px) {
body #call-to-action .container a {
display: inline-block!important;
margin-left: 14px!important;
}
}
5. The next update is going to add native one page scrolling which will solve all these types of issues without the need for css :)
6.If you update to 4.5.22 this will be sorted :)
Cheers
I have just finished my site using this amazing theme. Thank you for all the support so far.
I need to launch my site but need to make a couple of urgent final fixes when the site responds to mobile and can't seem to find how to do them. I have a few so I have listed them in order of urgency. I know it's a lot of help to ask for, but I would appreciate as much help that you give on this.
I am using a child theme and I make all of my css changes in the Wordpress editor so that they are all together, rather than in the Salient box for each page.
I have tried to modify the css but with no success. I've also tried using and modifying the code as described in http://themenectar.ticksy.com/faq/2037 but couldn't get it to work.
I have added this to the css but it's not having an effect and I can't find why.
@media screen and (max-width: 480px) {
body .swiper-slide .content h2 {
font-size: 18px;
letter-spacing: 0px;
}
body .swiper-slide .content p {
font-size: 12px;
line-height: 22px;
padding-bottom: 5px;
}
}
/*---blue button position after smooth scroll---*/
#position1 {
position: absolute;
top: -50px;
}
I had tried adding different media rules and changing the top: -50px but it wasn't having an effect. Any ideas?
Thank you
Claire
Ok, so I think I've found what's causing the issue on issue no. 1 above. I had a developer look at it and he initially said that my css from my child theme is being called before the Salient css so mine is being ovewritten.
I didn't think that was the case. So we established that !important is causing the issue in the Salient css. He has temporarily deleted them in the Salient css for the code that applies to the nectar slider, but I need to find a better and more permanent way to fix it because I will lose these changes when I update Salient.
How should I do this?
Hey Claire,
1. Any rules with !important can still be overridden if they're more specific i.e. if a rule is:
you could override it in your child theme with 2. Give the slide a class such as "mobile-mod" without the quotes and then add this into the custom css box in your salient options panel: 4. 5. The next update is going to add native one page scrolling which will solve all these types of issues without the need for css :) 6.If you update to 4.5.22 this will be sorted :) Cheers