Hi there everyone,
Got a question. I would like the corners of the multirow element on the password page of my website: pasdepoison.nl to be rounded just like the second row in the multirow element.
Also would like the corners of my hero image to be evenly rounded on all corners as well. No matter what I try in the normal template settings I can’t seem to get them rounded.
Would love to get some help on this.
Thanks in advance.
Site: pasdepoison.nl
Hi @Dtcedrico0m
Please follow these Steps:
- Go to Online Store
- Edit Code
- Please find theme.liquid file
- Add the following code above tag
Hi @Dtcedrico0m
You can do that by adding this CSS code at the bottom of your base.css file
.password-modal__content .password-field.field:after { border-radius: 40px !important; }
I would like the radium to be in px same as the other corners I did in the shopify template settings under content cards (32px). Also how about the multirow element?
Yes, I believe there is something wrong in the code, because only the middle element of that section seems to work:
Hello @Dtcedrico0m
Its Artzen Technologies! We will be happy to help you today.
Please use the below css for banner image.
.password .image-with-text__media img{
border-radius: 32px;
}
Also use this css to round the multirow element.
Let me know if need further assistance
Regards,
Artzen Technologies
Hi there, thank you for your reply. I tried your solution, but unfortunately it didn’t work. I think there is something wrong in the source code, because normally you can just adjust the corners and stuff in the template settings, but it doesn’t work.
Please add this CSS Code
.image-with-text.collapse-corners:not(.image-with-text--overlap) .grid:not(.image-with-text__grid--reverse) .image-with-text__content {
border-radius: 32px !important;
}
Unfortunately that didn’t work either. They should all look like this one: