-
Posts
-
Hi guys,
I am trying to tweak the CSS a bit. Have tried going into debug more (but what I want is not to pull the code) and I have been able to do this by adding code but the CSS from the stylesheets does not apply.
Let me explain:
I need a button left aligned and right under it a small message that reads “We respect your privacy.” If I add the button and the line one on each element, they show too far apart and I cannot center the Privacy text to the middle of the button. And it looks like this.
I tweaked the HTML on Chrome and by adding the code inside of the button <div> I get the result I want.
See? It is right in the middle of the button and closer to it.
This is the HTML code.
<div class=”avia-button-wrap avia-button-left avia-builder-el-4 el_after_av_textblock el_before_av_textblock ” title=”Play the MindCrowd Memory Test”><span class=”avia_iconbox_title”>TEST YOUR MEMORY</span>
<p style=”font-size:13px;text-align:center;”>We respect your Privacy.</p></div>If I add it as code, the button shows up with no color.
Is there a way to achieve this? Where am I missing the mark?
Thank you so much!
Warm regards,
Havi
Hey havi,
Thank you for your question, when the paragraph text <p> is added to the column it gets the align left, but the width of the paragraph is 100% of the column or the text element that is inside the column, so “centering” it will place it in the center of the column, the easiest fix to center the text under the button would be to use some left padding. The distance from the button is the padding & margin from the bottom of the button and the top of the paragraph, this is an easy fix with css by changing all to zero.
I found your page but the text was not in place so I couldn’t offer some css, please place the text using the elements that are easiest for you to use and if you want to reproduce this combination of button and text elsewhere please add custom classes to them or the parent container and I will suggest some css to help.Best regards,
MikeHi Mike!!
Thank you so much! The most important part is the top padding for the text (bottom padding for the button above) I have tried adding margin and padding-top=0px and bottom for the button and the same for anything that I could find but I could not get the text close to the button above as I need it to be (like when it’s inside of the same <div>)
I added the text to the page you have on Private data. And a class=”padleft” but it does not work. I gave it 20% (so I could notice it would be applied) but I also need it to be responsive so adding px would not translate well)
Is there a way to create a button with the text under it as a new element? I think the issue it the box itself that adds spacing in between. But look forward to your suggestions.
Thank you in advance!!
Warmly,
Havi
Hi,
Thanks for adding the text back, please try this css in your Quick CSS field:.avia_textblock.padleft p { margin: 0; padding-left: 40px; }After applying the css, please clear your browser cache and check.
I’m not sure that you would want the text much closer since part of the text is a link.Best regards,
MikeThank you, Mike. It’s close but I need to do away with the left padding. It’s not centered and it looks off.
Is there a way to add the text under the button on the same <div>? I do like it closer and centered with respect to the button. I wonder why it wouldn’t pick up the CSS when I added the actual <div> code with Code. Was I supposed to select some additional option?
This was the code I added to Code (it showed the button and the text perfectly but not the right colors):
<div class=”avia-button-wrap avia-button-left avia-builder-el-4 el_after_av_textblock el_before_av_textblock ” title=”Play the MindCrowd Memory Test”><span class=”avia_iconbox_title”>TEST YOUR MEMORY</span>
<p style=”font-size:13px;text-align:center;”>We respect your Privacy.</p></div>Can I remove the CSS I had added to the child theme’s stylesheet?
/*padding left to text*/
p.padleft {
padding-left: 20% !important;
}One more CSS question:
There’s a padding inside of the cell 75px top not rendering on landscape mode on mobile. It does show on Desktop, and on Portrait Mobile but not on Mobile Landscape. So, the text is under the menu.
I changed the break point for the top section hoping it would not be covered by the menu when I look at it on landscape mode on mobile, but it did not work. (It was Grid Row Mobile Breaking point > On Mobile Devices 767px or lower and now it is On Tablets > 989px or lower)
Thank you in advance!!!
Warmly,
Havi
If I add a white space 20px and select Hide on Desktop, It does not hide it on Desktop either and the screen also does not cover the full viewport on mobile landscape.Hi,
Try this script to add the text to your button div as you were asking, by adding this code to the end of your functions.php file in Appearance ▸ Editor:function custom_wryp_script() { ?> <script> (function($) { var wryp = $('<p class="wryp">We respect your <a href="https://staging-mindcrowd.kinsta.cloud/privacy-policy/">privacy</a>.</p>').css({ 'text-align':'center','margin':'0' }); $(wryp).appendTo('[title="Play the MindCrowd Memory Test"].avia-button-wrap'); })(jQuery); </script> <?php } add_action('wp_footer', 'custom_wryp_script');Best regards,
MikeThank you, Mike! That’s really harcoded. And it would show up every time I have this button with this text, That would create a different issue and this is getting too complex.
I did remove the CSS I had added to the child theme’s stylesheet (hope that was ok)
/*padding left to text*/
p.padleft {
padding-left: 20% !important;
}I guess the theme has a bug right now regarding displaying or hiding whitespace. And rendering on mobile landscape. I will create a new ticket to address it.
Thanks.
Havi
Hi,
Ok, then try this css:.padleft p { line-height: 0px; }and then clear your browser cache and check the space between the text and button.
Best regards,
Mike
- You must be logged in to reply to this topic.