REFRESH rounded corners multiline custom CSS

[StillVaping]

I created my theme so as to obtain sections with rounded corners and others not.

However in multiline sections, I want to obtain a precise final result using custom CSS:

- image with rounded corners (this is currently the case)
- text with non-rounded corners

What is the CSS code to enter in the multiline section please

Image 1 not desired

Image 2 desired

Thanks

[StillVaping]

Link

The store is currently online. Here is the direct link for the example.

This is a problem only encountered on a smartphone display.

Thank you for your help

[BSSCommerce-B2B]

Hi @StillVaping 

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file base.css. Search for the following CSS snippet

.card-wrapper .card__content {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

If it helps you, please like and mark it as the solution.

Best Regards

[StillVaping]

This unfortunately doesn't work. Thanks

[BSSCommerce-B2B]

Hi @StillVaping 

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file base.css. Search for the following CSS snippet

@media screen and (max-width: 1000px) {
.content-container:after { {
   border-radius: 0 !important;
}
}

The result

If it helps you, please like and mark it as the solution.

Best Regards

[StillVaping]

This works by putting the lines of code directly into base.css however I now have the problem in sections
- multicolumn
- collapsible content

You are very close to my full satisfaction!

I rate this answer as helpful because you solved the issue regarding multiline. ⭣

@media screen and (max-width: 1000px) {
.content-container:after {
   border-radius: 0 !important;
}

Thank you so much

[BSSCommerce-B2B]

Hi @StillVaping , 

We're happy to see that our suggestion helped you solve the issue. 

To complete your requirement, you can add more this script to this code directly into base.css: 

ul#Slider-template--23203130081622__46e56e0b-4a95-439d-a9e1-4aed95933ef0, 
.collapsible-content__wrapper.section-template--23203130081622__ea5b3494-bd20-4e8b-b632-5139904a2ca5-padding.content-container.color-scheme-6c284116-0432-4358-a720-c3070adbc651.gradient {
    --color-shadow: transparent !important;
}

And the result will be: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[StillVaping]

Following your response I was annoyed that the shadows were no longer present. So I searched a bit and found another part of the solution which perhaps will lead you to the solution.

If I put your line of code, I get the result only on the multiline section but I have a problem on the other sections as said before.

However if I replace your line of code or add the one below, I get all sections correctly except the multiline:

.contains-content-container {
   border-radius: 0 !important;
}

[BSSCommerce-B2B]

Hi my friend @StillVaping , 

Your way it works! You're nice. I haved checked your website and  I haved seen everything look good.

If you have any other issues, can you kindly share the details of your problem (screenshot/ record) with us?

We will check it and suggest you a solution if possible.

Have a nice day! ^^

[StillVaping]

Thank you for your message and your time. I'll recap to explain the current problem.

The site appears correctly on a computer, however it is the smartphone version that poses a problem.

With the code below, the multiline section is ok but the other sections do not have the desired result :

@media screen and (max-width: 1000px) {
.content-container:after {
   border-radius: 0 !important;
}
}

With the code below, all sections have the desired result except the multiline section.

.contains-content-container {
   border-radius: 0 !important;
}

I don't have the knowledge to find the solution alone. Thanks