Okay
  Public Ticket #274502
URGENT HELP NEEDED PLEASE - Nectar slider text size for mobile
Closed

Comments

  • claire started the conversation

    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.

    1. 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;
      }
      }
    2. 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.
    3. 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.
    4. 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.
    5. 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?

    6. 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.




    Thank you

    Claire


  • claire replied

    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?


  •  1,070
    ThemeNectar replied

    Hey Claire,

    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