Okay
  Public Ticket #150323
Nectar Slider (Mobile) and Contact form input fields
Closed

Comments

  • Daniel started the conversation

    Hi, Loving the theme just a few queries!

    Nectar Slider in mobile view -

    I wanted to know if it is possible to make the nectar slider image bigger so that it takes up the whole section of the screen when the page first loads on a mobile or tablet?

    Slider title and caption in mobile view -

    Is it possible to make the slider content (Heading/Caption/Button) to appear bigger on a mobile view?

    Remove styling from contact form section -

    Is it possible to remove the styling completely from section on a page, in this case it would be a section displaying a contact form, so that the contact form input fields do not stretch across the page? I am using a custom contact form plugin but like the contact form 7 plugin the input fields display across the full-width of the page. Is it possible to remove the styling completely so this does not happen?

    Make Slider text smaller and force font weight -

    I am using the Opan Sans google font for the heading and caption text on the nectar slider, I want the heading text to be a little smaller and the font weight to remain at "300", however when using the typography option on the Sailent menu the settings seem to change each time I load the page the nectar slider is on. Is it possible to force these setting through css?

    Cheers,

    Dan

  •  1,077
    ThemeNectar replied

    Hey Dan!

    1. There's a fullscreen option for the Nectar Slider - this is one way you could solve problems 1&2 (captions are also left bigger in fullscreen mode on mobile since there's additional space to work with).

    2. If you're not going to use the fullscreen option and want to increase the size of the captions/heading look for these rules in the mobile viewport in the responsive.css stylesheet located in the css folder.

      body .swiper-slide .content h2
      body .swiper-slide .content p    
      body .swiper-slide .button a

    3. Salient treats all inputs in a responsive manner and will fill them 100% width of the div they are in. The correct way to set a width for an input with Salient would be to simply wrap them in a column.

    <div class="col span_4"> [text* your-name] </div>
    
    <div class="col span_4"> [text* your-name] </div>
    
    <div class="col col_last span_4"> [text* your-name] </div>

    4. You can control the heading size with this:

    body .swiper-slide .content h2 {
      font-size: 50px!important;
    }


    Cheers!

  • Daniel replied

    Thank you so much! Apologies for not closing the ticket sooner - I didn't recieve an email about your response.