How can I adjust the return button alignment and size on my webpage?

[Luxurymrkt]

Hi,

id like to make the return button align left

make the button smaller 

and change the background color to white with 1 px border where is says back to menswear  etc

my site is https://luxurymrkt.com/collections/footwear-1/products/axel-arigato-clean-90-suede-sneakers

[PageFly-Victor · Accepted solution]

Hi @Luxurymrkt

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

-Go to Online Store->Theme->Edit code

-Asset->theme.css  paste the below code at the top of the file.

#shopify-section-template--15648733003957__collection-return .return-link{

    background:white !important;

    color:black !important;

    border:solid 1px black !important

}

Best Regards;

PageFly

[MOISCHKOWITZ]

Well a few things need to happen: 

.1. the container needs to get the class "page-with" (liquid)

This I would have to look into your backend for 

.2 the element needs to get a max-with (css) - where as this value of 20em is arbitrary

.3 the "a" inside the element needs a background, a color and a border (css)

.4 the reverse color for a:hover (css)

.text-center.page-content.page-content--bottom {
    max-width: 20em;
}

a.btn.btn--small.return-link {
    background: #fff;
    color: #000;
    border: 1px solid;
}

a.btn.btn--small.return-link:hover {
    color: #fff;
}

[Luxurymrkt]

That worked

just the return button after click is still black

possible to fix?

 

[MOISCHKOWITZ]

Great that it worked but I am not sure what you mean by "is still black after click"
It becomes black if you put the mouse over it and then stays that way. You do not want that?

Btw you should change the image size on the product detail page and make it bigger. The right hand panel has too much space to give the page the right balance I think. 

[Luxurymrkt]

Yea I’d like the button to just stay as is. No border just the white background black words looks nice and clean. On hover also.

*you mean on desktop make product image bigger? Thing is the length of pants overflows the bottom looks kind of weird🔽
not sure how to adjust the width or what you’re referring to.

[PageFly-Victor · Accepted solution]

Hi @Luxurymrkt

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

-Go to Online Store->Theme->Edit code

-Asset->theme.css  paste the below code at the top of the file.

#shopify-section-template--15648733003957__collection-return .return-link{

    background:white !important;

    color:black !important;

    border:solid 1px black !important

}

Best Regards;

PageFly

[Luxurymrkt]

Anyway to move the text fully left on desktop? I fixed the mobile

[PageFly-Victor]

but I see it aligns left on desktop

[Luxurymrkt]

Should align like this

 

[PageFly-Victor · Accepted solution]

you can add

@media(min-width:767px){
#shopify-section-template--15648733003957__collection-return a{
padding-left:0 !important;

}
#shopify-section-template--15648733003957__collection-return{

padding-left:40px !important
}
#shopify-section-template--15648733003957__collection-return div{
text-align:left !important ;
}
}

[Luxurymrkt]

Possible to add some padding on the mobile ?

 

[PageFly-Victor]

you can add it to the top of the file theme.css

@media (max-width:767px){

#shopify-section-template--15648733003957__collection-return {

padding-left: 17px !important;

}

}

[totovegas]

Thank you for sharing good information. I also want to share good information Please refer to 토토커뮤니티 when you are wondering if my site is safe You won't regret it.