- This topic has 11 replies, 2 voices, and was last updated 4 years, 10 months ago by
.
Hello. On my home page is a WPBakery ‘Custom Heading’ element. At desktop screen widths, there is some white space between the title and the header–this is desired (see attached screenshot jba-title-padding). But at lower screen widths (~1250 px), the layout changes, and that white space is removed (see attached screenshot jba-title-mobile). How can I resolve this?
As a test, I switched to my parent theme, but the issue is still there.
Thanks.
Hi @cagross,
I hope you are well today and thank you for your question.
Could you please share me the page URL from your site where it is happening so that I can troubleshoot it?
Best regards,
Shufflehound teamPlease try clearing and temporarily deactivating the Atutomptize Cache that you are using on your shared site.
Also, please make sure that you are using below the latest version of the theme.
>> 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.
Solution for this topic
The Atutomptize plugin caches the CSS file and code so to troubleshoot the issue I need it to disable temporarily.
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.
Therefore on the smaller screen when the image goes down then the text touches to the top element.
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.
>> 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.
The issue is the same on your staging site.
Please refer the attached screenshots to know what I am referring to as Private Reply, Image and its padding.
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.
> 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.
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.
I shared it in the private as many times after sharing site URL of the user the user asks to delete it so I wanted to avoid it.
If you don’t mind it then here it is for you https://stagingjba0.wpengine.com/wp-content/uploads/spirit1-600-1.jpg
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?’
Because that is what the padding is called.
Please refer the attached screenshot to know its dictionary definition.
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.’
No
I have clearly written above that “you have added the top padding in the image itself as shared in the private reply” it is padding in the image itself and not added by CSS or HTML.
You have to edit that image by using an image editor and remove the padding.
> 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.
OK
