- This topic has 15 replies, 2 voices, and was last updated 4 years, 6 months ago by
.
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 teamTo 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
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
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.
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.
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.
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
