Question

Can someone help me for this issue

  • 12 January 2022
  • 7 replies
  • 32 views

I don’t know what’s the problem here the load more button is getting overlapped by the products, I have increased the margin of load more button in the product grid and increased the spacing b/w the the rows still facing this issue.

 


7 replies

Userlevel 3
Badge +2

I’m assuming that you’re not setting it for each individual item. Make sure that the button is on a separate row from the other boxes.

 

<row>
<button>
</row>
<row>
<items>
</row>
<row>
<button>
</row>

 

It is an inbuilt element(product grid) of elementor, also the load more button is the part of that element, so I can’t use the HTML or CSS without pro version.

Userlevel 3
Badge +2

Are you running a base theme?  Astra, Hello, or Generate Press themes? 

If you are then you could create a “child theme” you can put CSS in “style.css” or load it into that.  If you’re using a child theme you can find out about one here.

https://developer.wordpress.org/themes/advanced-topics/child-themes/

Userlevel 3
Badge +3

You also could use the inspect code option in your browser and find the CSS that defines the position of the button. I am guessing it is padding. If there is no padding for the button, add some. My initial thought would be padding-top: 60px;

@John Swaringen no I’m using bizconsulting theme.

@Steve Kinzey No sir, I have already tried to add some padding and margin to the button but nothing happens.

Userlevel 3
Badge +2

Ok, it’s going to be updated occasionally so I would make a child theme (https://developer.wordpress.org/themes/advanced-topics/child-themes/).  Make your changes there.  If you’re doing CSS don’t forget the “!important” so that it overrides the default styles being used by elementor.

 

Reply