Forum Replies Created
> it is padding in the image itself and not added by CSS or HTML.
This is the information I was trying to ascertain.
> Please refer the attached screenshot to know its dictionary definition.
I am aware of those two dictionary definitions of ‘padding.’ But what you omitted is another, far more relevant definition of padding—the CSS padding property. When referring to ‘padding’ in a discussion about HTML and CSS, it is assumed you are referring to the CSS definition of ‘padding.’ I now realize you are not referring to ‘padding’ in that way–thank you for confirming.
I was able to resolve my issue. We can consider this resolved.
> Please refer the attached screenshots to know what I am referring to as Private Reply, Image and its padding.
I looked at your screenshot for the Private Reply. In your screenshot I see the red shaded “Private information field.” But on my screen, there is no such field. Please see the attached screenshot for an illustration of what I see on my screen–you can see that there is no such “Private information field.” But I am also unsure why you are sending information privately. As I see it, to date, there has been no reason to send any info privately in this thread.
> As said above, to resolve the issue please remove the padding from the image and instead add it to the row element that contains both the image and the text.
I see your screenshot (Screenshot-12.png), and I see a red arrow pointing to some white space. But can I ask why you are referring to this as ‘padding?’ Are you saying that the CSS property ‘padding-top’ has been added to this HTML element, and that is the reason for the white space? If so, can you tell me exactly which HTML element possesses the ‘padding-top?’ I ask because I have inspected both the
element and its containing element, and I do not see and ‘padding-top.’
Thanks.
>> The Atutomptize plugin caches the CSS file and code so to troubleshoot the issue I need it to disable temporarily.
OK I’ve temporarily deactivated the plugin on my staging site. Feel free to troubleshoot on my staging site now.
>> I troubleshoot the issue on your live site and saw this s happening because you have added the top padding in the image itself as shared in the private reply.
–Can you clarify which ‘private reply’ you are referencing? I’m not sure I see a private reply in this thread.
–Just to be clear, which ‘image’ are you referencing? Is the image to the left of the “Jewelry Crafted to Match Your Unique Personality” title?
–Which top padding are you referencing? I don’t see any top padding on the
element. at any screen width.
If you can take screenshots, it might help.
Thanks.
>> Please try clearing and temporarily deactivating the Atutomptize Cache that you are using on your shared site.
I don’t think Autoptimize has anything to do with this issue. The reason I say that is because the link I shared with you is my staging site, which has Autoptimize activated. But my live site (https://www.jewelsbyaron.com/) has Autoptimze deactivated, and it exhibits the same issue. Thoughts?
>> Also, please make sure that you are using below the latest version of the theme.
Is 4.3.1 the latest version? If so, I’m already using that version.
OK then, thanks. We can consider this resolved.
OK got it, thanks. We can consider this resolved.
That’ won’t work because in this case, the font is set via inline style, which will supersede any custom CSS I add. In light of that, I would need to add !important. Would you agree?
Solution for this topic
Edit: OK my issue with the Font Awesome icon is resolved–I think I just needed to do a hard refresh. So we can consider that resolved.
But your text editor here in this forum still has many issues.
> You have not added font family property to font awesome in the above shared CSS code so please add it.
OK right. So what font-family should I use? I tried
<div>
<div>font-family: “FontAwesome”;</div>
</div>
<div></div>
<div>But that didn’t change anything.</div>
<div></div>
<div></div>
<div>Jewels By Aron – live site (front-end)</div>>> Could you please share me the page URL from your site where it is displaying so that I can help you?
Sure, it is here: https://staging-e43sehju.versionpress.com/
edit: Wow. The text editor I’m using to submit this message is pretty bad :-/ It automatically added all that unnecessary markup, and the auto-formatting is very poor.
OK right, I understand that custom edits like that are beyond the scope of this support. But let me return to options that *are* available to me. Specifically:
1. I see that the top bar is always hidden at mobile screen widths. Is that correct, or am I overlooking something?
2. What I want in this case is to display my phone number in the header, and have it be visible at all screen widths. If the top bar is *always* hidden on mobile, what options might I have to display my phone number in the header at all screen widths?
Thanks.
>> The top bar only displays for the Header 2 and Header 3 Header Templates.
OK thanks for that. In a previous support post, I saw that the top bar should display for Header 1, 2, and 3. But I guess that has changed.
If I want to display a phone number in the header, but *not* in a top bar–using Header 1 for example. What would be the best approach? Would I have to make child theme modifications to one (or more) theme templates (e.g. header.php), and combine that with custom CSS edits? Or is there an easier/more advantageous method that I’m overlooking?
I’ve seen the links for each header type–thanks. But what about examples for:
Header 10
Left Header 11
Left Header 12OK then, thanks. We can consider this resolved.
Just to update you, I installed Google Analytics via analytics.js, by adding this code to my child theme’s functions.php file:
//Add Google Analytics to site.
if ($_SERVER[‘HTTP_HOST’] == ‘www.jewelsbyaron.com’) {
function add_googleanalytics() {
?>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga(‘create’, ‘UA-XXXXXXX-1’, ‘auto’);
ga(‘send’, ‘pageview’);
</script>
<script async src=’https://www.google-analytics.com/analytics.js’></script><?php }
add_action(‘wp_footer’, ‘add_googleanalytics’);
}It was taken from this page.
OK thanks. We can consider this resolved.
OK thanks for the reply.
>> I have notified this to the theme developer so that it will be upgraded in the future version of the theme.
Do you have a rough estimate as to when you expect to release the next theme version?
>> In the meanwhile, you can use any other solutions to use Google analytics on your site.
Got it–I’ll probably go with that.
OK thanks. We can consider this resolved.
OK thanks. I was able to do what I want with pure CSS actually, by simply modifying the font size of the header logo font. I didn’t need to edit any JS. For example, in my child style.css file I changed the font size using this rule:
<div>
<div>.sh-sticky-header-active:not(.sh-header-4):not(.sh-header-5):not(.sh-header-6) #header-logo-title .header-logo-title-alignment {</div>
<div> font-size: 28px;</div>
<div>}</div>
</div>
This ensured that the header height decreased as soon as the user began scrolling. Do you see any issue with that?
>> Please don’t share sensitive information on the forum as this is public forum so the information shared can be misused by others.
My mistake, I thought this was a private ticket. I’ll remember that in the future.
>> Please change the shared credentials ASAP.
I have deleted the account.
>> I logged into your site to troubleshoot the issue and it seems this is happening because of the logo title.
>> You can resolve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.OK, I added that custom CSS and it resolved the issue. But to be clear, the issue was from parent theme deficiency, not from any custom code I added–is that correct? Theme CSS sets padding-left: 15 px and padding-right: 15px on this particular element. The code you gave me sets them to zero. I’m asking only because if so, will you be sure to include this new CSS in an upcoming theme update? That way I can remove my own custom code.
>> There isn’t any theme option for it so to change it you have to develop custom code.
OK got it. But it looks like the change in header height as you scroll is the result of JS code–can you at least confirm that? If so, I’ll probably go with a pure JS approach on my end.
I have another related question. In your demo site, and when I switch to my parent theme, the height of the header is 100 px (see attached screenshot jba-height-parent). But in my child theme, the height of the header is 111 px (see attached screenshot jba-height-child; also see the page here: https://www.jewelsbyaron.com/). Why is there a discrepancy? I have not added any custom CSS to directly change the height of the header. But, in my child theme, the logo title is in a different, and larger font.
Thanks.
OK thanks for that. I’ve removed all the custom CSS from Yellow Pencil. I have two follow ups:
1. The header on my site still does not exhibit the behavior as your demo site. Any ideas why?
To see this, you can login to my staging site at: https://staging-e43sehju.versionpress.com/?root, using the credentials:
U/N: dev-guest
P/W: 3T-MF`de4u2. I see on your demo site that the default header height is 100 px, but when a user starts scrolling down, it reduces to 70 px in height. Is there a way in Theme Options to control the height of the scroll header, i.e. can I easily change it from 70 px to 50px? If not, how would I best approach that?
In other words, how and where is that 70 px set? Is it set in Theme Options? Or does it get set automatically by the browser, according the the content in the header (e.g. perhaps the 70 px is set by the height of the logo)?
Thanks!
