Instagram: Remove Tiny Arrows and Add 'Load More' button

Hello,

We have 2 questions for our instagram widget.

(1) It added tiny arrows to each photo. How can we get rid of them?

(2) How can we add a load more button, so it shows more photos on a grid layout when clicked?

I appreciate your help.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .instagram-widget .instagram-pics li:hover>.wrapp-pics>.hover-mask:after {
display:none;
}

There is no option to add a “Load more” button.

Best Regards

(1) The code that you provided didn’t work. The arrows that I’m referencing are not a hover effect. If you look at the page, it’s consistently there. Can you take another look please?

(2) Side question. On our shop page – the title, price and buttons underneath the picture were not centered aligned. We found the following code via this support thread: https://xtemos.com/forums/topic/product-images-allignment/ and inputted it. It center aligned everything except for the price. Can you modify the code so that price get’s aligned as well?

body .basel-hover-alt .product-title {
    text-align: center;
}
body .basel-hover-alt .wrap-price{
text-align:center;
}
body .basel-hover-alt.purchasable .wrapp-swap{
	margin: 0 auto;
}

Hello,

Please provide the screen which arrows to remove.

Also provide the screen of the result and show what you want to move and where

Best Regards

I’m re-attaching the links in the private content below.

Also, let me know your thoughts about the code I provided above – I need help revising it so that the price underneath each item, can be centered on the shop page.

Hello,

Please provide your site admin access so that I could check the element.

Best Regards

Hello – the login credentials are below.

Please let me know your thoughts on:

(1) removing the little arrows on the IG widget
(2) center aligning the ‘price’ with the rest of the ‘title’ & ‘buttons’

I appreciate your help. Thanks.

Hello,

You are applying HTML block in the extra content http://prntscr.com/n9f0rs I am checking this blog and see the shortcodes to the others blocks http://prntscr.com/n9exhl It is not correct.

You need to insert the Instagram element directly. If you do not want to create and configure the element each time save the row as a template and insert wherever you need.

The price has been centered.

Best Regards

Hello, the code you provided for the price, allowed the price to be centered on the shop pages, but it also moved it on the individual product pages. You can see it centered in the middle now on the product page (link below in private section). I want to move it back to it’s regular position.

Can we edit this code you provided to help fix this please?

body .wrapp-swap .price,
.single-product-content .basel-scroll-content > p.price {
	 text-align: center;
}

Hello,

Please remove replace the code with this one:

body .wrapp-swap .price {
	 text-align: center;
}

Best Regards

thank you. please close the ticket

[Author]

Posts