How to make mobile wording responsive

Home Forums Jevelin Theme How to make mobile wording responsive

Home Forums Jevelin Theme How to make mobile wording responsive

This topic contains 15 replies, has 2 voices, and was last updated by  Shufflehound Support 1 week, 4 days ago.

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
  • How to make mobile wording responsive?

     

    In this screen shot, the words below are not showing on the mobile version. https://photos.app.goo.gl/UC3a7miDN1t5UD8R7

     

    The Maximizing exceptional <b><span style=”color: #ff414a;”>results</span></b> with visionary business solutions, security, & litigation support

     

    Is there a mobile version code I can add to make this responsive and display properly?

     

    Here is the code on the page.

    Maximizing exceptional results with visionary business solutions, security, & litigation support

    [/vcj_heading][/vc_column][/vc_row][vc_row full_width=”stretch_row” css_animation=”none” overflow=”visible” css=”.vc_custom_1562159564868{padding-top: 0px !important;padding-bottom: 110px !important;background-color: #f3f3f7 !important;}”][vc_column css_animation=”none” overflow=”default” css=”.vc_custom_1562161072872{margin-top: 0px !important;padding-top: 0px !important;}”][vc_row_inner shadow=”shadow1″ overflow=”default” css=”.vc_custom_1562063549659{margin-top: -22% !important;padding-top: 80px !important;padding-bottom: 95px !important;background-color: #ffffff !important;}” padding_tablet=”0px 10px 10px 10px”][vc_column_inner width=”1/3″ overflow=”default” max_width=”290px” padding_tablet=”50px 30px 0px 30px”][vcj_heading_simple content2=”Growing your business and helping with organizing” alignment=”left” italic=”” size=”l” animation_speed=”2″ animation_delay=”0″][vcj_empty_space height=”20px”][vcj_text_block paragraph_whitespace=”” text_size=”16px”]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed dui tempus, vestibulum tellus a gravi[/vcj_text_block][vcj_empty_space height=”37px”][vcj_button text=”Contact us” url=”https://cdn.jevelin.shufflehound.com/finances/contacts/” target=”_self” alignment_mobile=”left” font_size=”14px” radius=”100px” border_size=”” full=”” height=”44px” leftright_padding=”35px” background_color=”#ff414a” background_hover_color=”#ee2c35″ animation_speed=”2″ animation_delay=”0″][vcj_empty_space height=”0px” height_tablet=”30px”][/vc_column_inner][vc_column_inner width=”1/3″ overflow=”default” max_width=”290px” padding_tablet=”0px 30px 0px 30px”][vcj_single_image image=”410″ radius=”0″ lightbox=”” overlay=”disabled” animation_speed=”2″ animation_delay=”0″ margin=”0px 0px 0px -26px” margin_responsive=”0px 0px 0px 0px”][vcj_empty_space height=”23px”][vcj_heading_simple content2=”Increasing value” alignment=”left” italic=”” size=”custom” desktop_size=”24px” responsive_size=”21px” animation_speed=”2″ animation_delay=”0″][vcj_empty_space height=”20px”][vcj_text_block paragraph_whitespace=”” text_size=”16px”]Lorem ipsum dolor sit amet,

     

    Hi @design2216,

     

    I hope you are well today and thank you for your question.

     

    Could you please share the page URL from your site where it is not displaying so that I can troubleshoot it?

     

    Best regards,
    Shufflehound team

    To see the website, you need to login.  See below.

    You can make it responsive by using the Yellow Pencil editor in the responsive mode as described in the below page.

     

    https://support.shufflehound.com/how-to-change-almost-any-element/

    Yes I’m aware of the pencil editor. I used it to move the next section down. Unfortunately the Pencil nor the WP Bakery are showing

    how to move the position of the following words UP on the layout any longer. It use to work.

     
    <p style=”padding-left: 40px;”>Maximizing exceptional <b><span style=”color: #ff414a;”>results</span></b> with visionary business solutions, security, & litigation support</p>
     

    Since the editors aren’t working, what in the code can I change to get the position of the words to move up?

     

    Here is the code:

     
    <p style=”padding-left: 40px;”>[vc_row full_width=”stretch_row” full_height=”yes” css_animation=”none” overflow=”default” css=”.vc_custom_1562159524825{padding-top: 100px !important;padding-bottom: 100px !important;background: #5f586f url(https://cdn.jevelin.shufflehound.com/finances/wp-content/uploads/sites/26/2019/07/slide.jpg?id=485) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}”][vc_column overflow=”default” css=”.vc_custom_1562060260238{margin-top: <span style=”color: #0000ff;”>-6%</span> !important;}”][vcj_heading style=”style1″ text_color=”#ffffff” font_bold=”additional2″ font_bold_weight=”550″ weight=”550″ size=”custom” desktop_size=”40px” responsive_size=”40px” line_height=”100%” animation=”fadeIn” animation_speed=”2″ animation_delay=”0″]</p>
    <p style=”padding-left: 40px;”></p>
    <p style=”text-align: center; padding-left: 40px;”>Maximizing exceptional <b><span style=”color: #ff414a;”>results</span></b> with visionary business solutions, security, & litigation support</p>
     

    To get the above words to move up in the template, do I update blue highlighted <span style=”color: #0000ff;”>-6%</span> to a higher or lower number . Or what edits will fix it?

     

    Thanks

    • This reply was modified 1 week, 6 days ago by  design2216.

    Unfortunately the Pencil nor the WP Bakery are showing

    Have you installed it from Appearance -> Install Plugins ?

     

    Are you getting any error or facing any issue using it?

     

    If yes then please describe what issue.

     

    Unfortunately, there isn’t any other way to achieve this.

    Pencil and WP Bakery are already installed.

     

    Isn’t there away to change the code?

    You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    @media (max-width: 992px) {
    .vc_custom_1562159524825 .vc_custom_1562060260238 {
        top: 0;
    }
    #page-container .vc_custom_1562159524825 .vc_custom_1562060260238 h2.sh-heading-content.size-custom {
        font-size: 30px !important;
    }
    }
    

    Thanks.  I put the CSS code in per your instructions.  See screen shot.

     

    What is the code to get the wording to move up?  See screen shot.

     

    Thanks

    Attachments:
    You must be logged in to view attached files.

    Please try changing the above shared CSS code as following.

     

    @media (max-width: 992px) {
    .vc_custom_1562159524825 .vc_custom_1562060260238 {
        top: 0 !important;
    }
    #page-container .vc_custom_1562159524825 .vc_custom_1562060260238 h2.sh-heading-content.size-custom {
        font-size: 30px !important;
    }
    }

    Hey, Good News. The wording moved.  The wording moved down.  We just need it to move up instead.

     

    Where in the code does it move it up or can you send an update.  See screen shot.

     

    Thanks for your help.

    Attachments:
    You must be logged in to view attached files.

    The above shared code will only work on the screen sizes smaller than 992px and you can move it up by changing the top value in minus such as -100px

    I see what you mean.  Is there away to add a stroke to the words, so when they pop up you can still see the white letters on top of the light background?

     

    See screen shot.

    Thanks again.

    Attachments:
    You must be logged in to view attached files.

    Or a darken effect or something?

    For example, see how this site has a darken banner running under the white words.  What about something like this? See screen shot.

    Attachments:
    You must be logged in to view attached files.

    To achieve this, you have to develop custom code in the child theme of Jevelin theme.

     

    Developing custom code for custom functionality is beyond the scope of support that we provide here. Please see https://themeforest.net/item/jevelin-multipurpose-premium-responsive-wordpress-theme/14728833/support

     

    If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5

Viewing 16 posts - 1 through 16 (of 16 total)