Okay
  Public Ticket #2780030
mobile optimzation
Closed

Comments

  • amisailidis93 started the conversation
    May 18, 2021 at 4:10pm

    Hello, 

    In the provided url I am using Salient. I would like to ask 2 questions regarding mobile optimization of each page of the website:

    1) do you recommend a plugin? (which will allow me to modify each section of the page for the mobile/desktop view? the default options are not covering my needs)

    2) how can I apply (similar or) the .hide-on-mobile and .hide-on-desktop css classes, on each section of a given page?

    I see that some pages are too lengthy for the mobile view and need to work on shrinking/deleting/optimizing them for the specific screen size.

    I appreciate any inputs.

    Thank you in advance,

  •  1,885
    Judith replied
    May 18, 2021 at 4:40pm

    Hi There,

    Thanks for contacting us.

    1. Salient theme is made responsiveness, and therefore if you encounter a layout that does not get responsiveness you can alert us and help us out.

    2. You can hide from the column settings as shown below:

    6515355599.png

    3. Which pages do you find lengthy, please let us know to see whether there is something you may be missing .

    Thanks.

  • amisailidis93 replied
    May 18, 2021 at 8:04pm

    Hello Judith, thank you for your immediate response.

    Following up:

    1) is there an option for the "custom headings" to have a certain font size only on mobile? 

    like: 

    @media screen and (max-width: 600px) {
      div.example {
        font-family: 16px
      }
    }

    Thank you, looking forward to hearing from you,

  •  8,877
    Tahir replied
    May 19, 2021 at 1:04am

    Hey Again,

    1) Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    @media only screen and (max-width: 690px) {
    h4.vc_custom_heading {
        font-size: 21px !important;
        line-height: 25px !important;
    }
    h5.vc_custom_heading {
        font-size: 21px !important;
        line-height: 25px !important;
        margin-bottom: 0px !important;
    }
}

    Also use our Pre-built layouts to quickly setup pages: http://themenectar.com/docs/salient/salient-studio/ .

    Thanks

    ThemeNectar Support Team