Make share button and text bigger and move to right

Store Design
, , , , , , ,
1

hi,

im looking to make the share TEXT & ICON bugger and move to the right side on mobile and desktop. My site is https://b32b39-5.myshopify.com/products/copy-of-test

2D78E083-65E4-42AE-ABEA-4112D9568C55.jpeg
2D78E083-65E4-42AE-ABEA-4112D9568C55.jpeg1170×2532 174 KB

2

Hi @Luxurymrkt , go to theme.css and add the following code :

.product-info__block-list .product-info__block-item:nth-child(1) {
    text-align: -webkit-right !important;
}

button.share-buttons.share-buttons--native.link-faded .smallcaps {
    font-size: 1.3rem !important;
}

Hope this help you.

3

Go to Online store > Themes > Edit code > open theme.css file, add this code the bottom of this file

@media (max-width: 767px) {
.product-info__block-item[data-block-type="share-buttons"] {
    display: flex;
    justify-content: flex-end;
}
.product-info__block-item[data-block-type=share-buttons]) ..share-buttons .text-xxs {
font-size: 1rem;
}
}
4

@Luxurymrkt - please add this css to the very end of your theme.css file and check

@media screen and max-width:749px){
.product-info__block-item:is([data-block-type=share-buttons]){justify-content: right;  display: flex;}
}
5

Hi @Luxurymrkt

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

[data-block-type=“share-buttons”] {

display: flex !important;

flex-direction: row-reverse;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly